Build your app with Headless CMS (Strapi), Node.js and Next.js (Part -2)

Explore Next.js and integration of Node.js API with Next.js

Published in

Globant

7 min readSep 17, 2021

Hello there! Welcome back to the next part of Build your app with Headless CMS(Strapi), Node.js, and Next.js (Part-2). In the previous article, we have seen how a JS developer can use headless CMS (Strapi) as a backend to create and manage data on a website. Let’s move on to other aspects of building a complete application i.e. middleware and frontend.
In this article we will be covering:

Middleware setup with Node.js
Frontend setup with Next.js
A small example to demonstrate how we can call Node.js API in NextJS

First, let’s get started with middleware setup using Node.js

Node Setup

When we install Node.js, we also get the npm program installed on our machine.
We need to follow two important steps:
1) Initialize npm
2) Install module we have to use

First, let’s initialize npm in our project which means we need to run a single command from the root directory. In our case, the root directory will be events-api. Let’s move to this directory:

$ cd events-api 
And then run: $ npm init

This will create a single configuration file that we can use to manage all of the dependencies. This will ask you for some information, to populate various fields in this configuration file, and for every single field, we are going to stick with the default value.

Once done type yes to proceed, this will create a ‘package.json’ file.
If you require any dependency you can use the command:
npm i module_name.
Here we have installed three dependencies:
1) Express.js:- Provides methods GET, POST, etc for a particular HTTP request
npm i express
2) Axios:- send asynchronous HTTP requests and perform CRUD operations.
npm i axios
3) Nodemon:- Is only used for development to watch files
npm i nodemon

Now we will start with creating an app.js file where we will be adding a port number and will define some routes e.g. /api/example
Here is the app.js file which will look like this:

// App.jsconst express = require("express");
const app = express();
port = 3080;
const data = {
  header: "This is Header data",
  title: "This is Title for header",
};
// @ Routes
app.use("/api/example", (req, res) => {
  console.log("Example API Called!");
  res.json(data);
});
app.use("/", (req, res) => {
  res.status(200).send();
});
app.listen(port, () => {
  console.log(`Server listening on the port::${port}`);
});

In this file, we have simply defined a route for /api/example which is returning a data object with header and title.

Next, we need to start the Node.js server with this command:

npm run dev

This will start our server on port 3080 and the moment we change any file, it will be automatically updated as we are using nodemon to watch file changes.

Now, if you hit http://localhost:3080/api/example you will be able to see the data object that we have defined in app.js as below:
Here, we are using Postman for API testing.

Let’s build a web page using Next.js and then see how we can call this API in Next.js

What is Next.js?

In case you are not familiar with it yet, Next.js is a popular React framework for building server-side rendered React applications. This framework allows you to build React applications capable of static site generation and server-side rendering with no configuration required.

Next.js is not just for building an application’s frontend, because of its ‘server-side’ approach, it can be used to build a full backend for the application as well. It is loaded with features like file-based routing, styling, authentication, bundle optimization, etc. which enable us to build full-fledged production-ready applications.

But rather than going through a long explanation of the benefits of Next.js let’s instead build an example to demonstrate how it can be used to build a static site.

Getting Started with Next.js

Open the terminal and create or navigate to the directory where you want to create a new project. Once you’re there run the following command in the terminal to create the project:

$ npx create-next-app my-events-app

Here, the events-project is the name of our project. Once this process gets completed we have our project ready. To run the project execute the following commands:

$ cd my-events-app
$ npm run dev

Open up a browser and enter the following URL to view our project running: http://localhost:3000

You will be greeted with the default info page for the Next.js project we just created. Next.js offers hot reloading so any changes you make to the project code will automatically be applied and reflected in the browser.

In the development phase, we will run the Node.js and Next.js application on completely different ports. It’s easier and faster to develop this way.

Creating the Layout

Now that we have our project set up, let’s get ready for coding. But first, we can do a little cleanup. Let’s delete the content from the index.js file and set up a basic layout:

// pages/index.jsexport default function Home() {
  return (
    <div className="main-container container">
      <div className="main-title">UI Engineering</div>
      <div className="event-title">Events</div>
    </div>
  );
}

Once you save the changes, you will be able to see the home page with UI Engineering and Events title on the browser. Now that we have our UI and middleware running, let’s see how we can access Node.js API in Next.js.

Don’t forget to keep your middleware running.

Calling API in Next.js

Now it’s time to look at the Next.js UI. I am not going to pull all the files here but let’s see some important files. First, Create one folder at the root level as ‘services’ and in that create a file as ‘service.js’.
Here is the service.js file which calls Node.js API using Axios.

// services/service.jsimport axios from "axios";
const fetchResponse = async (path) => {
  const url = `http://localhost:3080/api/${path}`;
  const res = await axios.get(url);
  return res.data;
};
export default fetchResponse;

This file is responsible for calling the Node.js API and returns the required data.
Now let’s see how we can get this data in the index.js file. The updated index.js file will look like this:

// pages/index.jsimport fetchResponse from "../services/service";export default function Home({ data }) {
  console.log("data", data);
  return (
    <div className="main-container container">
      <div className="main-title">{data.header}</div>
      <div className="event-title">{data.title}</div>
    </div>
  );
}
export async function getStaticProps() {
  const data = await fetchResponse("example");
  return {
    props: { data },
    revalidate: 1,
  };
}

In this file, we are trying to get data from the backend using the getStaticProps() method and showing it on the UI. We will see the importance of this method in the next article of this series.

It’s time to test !!

If everything is working properly then the end result should look something like this:

Lastly

Consider the highlighted part of the image. If we take a look at the architecture of our My Events App, this is how far we have got:

We have created a server with Node.js and used Express.js that comes with features like routing, rendering, and support for REST APIs.

Now if you are wondering why the architecture has missing parts, it would be worthwhile to watch out for the upcoming part of this article.

What have we learned so far?

There are so many ways we can build the Next.js app, One way is to build the Next.js app with Node.js and serve the static content. This is really helpful when you want to do server-side rendering or you need to do some processing. Node.js is non-blocking IO and it is very good for normal websites as well.

What we are going to learn next?

We are going to wrap up Part 2 here to get ready for the last part i.e. Part 3, where we will be diving deep into the code and show you how to integrate your headless CMS API which we have built in Part-1 via Node.js and ensure everything runs smoothly. See you soon!