In the previous post we discussed about the advantages of server side rendering. Now we will see how to use nextJS with react.

First create the project and install the dependencies.

mkdir UsersApp

cd UsersApp

npm init -y

npm install react react-dom next isomorphic-fetch --save

After installing the dependencies your package.json will look like this

Creating layout

Now we are going to create a layout for our application using the bootstrap. Let’s create the below directory structure in your application.

- layout

- pages

- static

— css

Layout

We are going to create our header and footer components in the layout directory. Layout is the user defined name you can keep whatever name you want.

Static

Create a directory called static, we are going to keep our static files in this directory. In our case to keep our bootstrap.css file we are going to create one more directory called css in static directory. The directory name is defined by nextjs so it should be static.

Pages

Name of the directory should be pages. What ever component you create in pages will act as a route for your application. By default nextjs will consider the file name as the route name. It also provides options to have custom name for the routes.

In our example, we are going to create a template and all other components will render in the template. Now create a file called _document.js in pages directory and copy the below code.

Here _document.js file let us add our custom html. Basically, this file will be loaded from server so we use this to include our css files. To learn more about _document.js check the docs here.

We can have <Head> in each component to include static files and to add page title. Finally nextjs will combine and create the <head>

Generally nextjs loads all the components in its default app component. We can also create our custom app component by extending the app component. Here we are going to create a custom app component which is going to help us include our header, footer and our main component in one place. Create a file called _app.js in pages directory and copy the below code.

Here we included our Header, Footer components. <Component> will load our components which we are going to create in our pages directory. Both _document.js and _app.js files will not act as a route. To know more about _app.js check the docs here.

We created components in pages and layout directories. But the difference is nextjs will consider all the components created in pages act as a route to your application so you can directly access them by calling the respective URL in your browser. But components created outside pages will not be accessed via URL, you have to include them in other components.

Now we are going to create our index.js and users.js files in pages.

Above is the normal react component except the getInitialProps method. It is used to get the data at the time of page load. Whatever you return from getInitialProps method will be passed as props to the component.

The getInitialProps method provides the ability to load the data for the component during server side rendering.

Let’s run this code by executing the below command from your root directory.

npm run dev

Now open your browser and go to http://localhost:3000/ you will get this