[Tutorial] Create react based server side rendering app with NextJS

Hello, this is my first post on CloudReports! From today, i will write as an author of CloudReports, i want to share my personal experiences about web development. If you want, you can create an author account and do it like me 🙂

Check out these tutorials about Next.js

Next.js + Ant Design with less – Advanced Nextjs and Ant design scaffolding

Convert HTML template into NextJs app

Create custom self-api Next.js api server

NextJs + KoaJs Create custom NextJs server with KoaJs

[Tutorial] Create react based server side rendering app with NextJS

NextJs Data fetching – Combine Server Side and Client Side fetching

Cloudreports – Next.js tutorials

Well, i was a backend develop for many years and just started with ReactJs for about month. Start working in a brand new context make me confused. Spending a week to learn about ReactJs, it’s syntax, build script and design flow… I can create a simple ReactJs project; not sure but i think i can understand basic concept of ReactJs.

After that, i start building my personal blog with ReactJs, every things seem okay till i read some blog’s post about SSR and i see that SSR benefits are needed for my blog 😀

Do you ever facing this scenario like me? And do you wondering that can i resolve this SSR problem?

Yes, although it took me a week but i did it with help of so many tutorial on internet (oh, with Google search too :v ) It’s not so difficult to implement ReactJs SSR.

I think that i can finish my blog and start writing on it. I decided to research a bit about ReactJs advance, during that i found an awesome framework: NextJs. I was very happy to find out a greate framework but i also disapointed because all my works this month has been did very good before. I was reinvented the very good wheel 🙁

NextJs is a ReactJs base framework, it support both client side and server side rendering. One good thing is that NextJs is very easy to learn, it’s struct is simple enought for new bie to approach.

Now i will start a simple tutorial about NextJs, let’s start!

In this tutorial, we will learn about these topics:

1. Create simple (Hello World) NextJs app
2. What is NextJs page and how to create a NextJs page
3. Convenience of Server side rendering

1. Create simple (Hello World) NextJs app

Create empty Node.js project

mkdir my-nextjs && cd my-nextjs
npm init -y

Install required dependencies

npm i -s react react-dom next

Your package.json file will be like this

{
    "name": "my-nextjs",
    "version": "1.0.0",
    "description": "",
    "main": "index.js",
    "scripts": {
        "test": "echo \"Error: no test specified\" && exit 1"
    },
    "keywords": [],
    "author": "",
    "license": "ISC",
    "dependencies": {
        "next": "^7.0.2",
        "react": "^16.7.0",
        "react-dom": "^16.7.0"
    }
}

Modify your package.json file like this

{
    "scripts": {
        "dev": "next",
        "build": "next build",
        "start": "next start"
    }
}

Let me explain these scripts above:

• build Next.js will load and build bundle file for you, this process will build client side and server side bundle
• start Run NextJs project based on built file (from build script). Note that you can’t run start without running build
• dev This script is awesome and very convenience for development. It include build, run and folder watcher. This mean that every thing you did inside your project will trigger build, start and hot reload, you won’t have to manually restart your app nor reload the web page

Now your project is ready for development. Let’s start building a “Hello World” page

Take a look at your project file explorer, you may have a directory structure like this

Inside your project root, create a directory and named it as pages. This directory will be the place where will store all of our page source code. Next.js support many custom config, but at this time, we can’t change the behavior of the pages directory, it must be named as pages

2. What is NextJs page and how to create a NextJs page?

NextJs page is a ReactJs component, it responsible for creating output of a webpage. The example bellow will show you how to create a page

Create pages directory and run Next.js script

cd my-nextjs
mkdir pages
npm run dev

Create index page:

When we start the project by the command npm run dev Next.js will start serving at 127.0.0.1:3000. The home page (at path /) will be serve from code in file pages/index.js you can also named index file as index.jsx

Update index.js file content as bellow:

export default () => <div>Hello World.</div>

You can also export React Component class from this file

import React from 'react'

export default class HomePage extends React.Component {
    render() {
        return <div>Hello World.</div>
    }
}

After save index.js file, NextJs will automatically rebuild and serving new content, let navigate your browser to 127.0.0.1:3000 to check the output.

The result will simply a blank page with text Hello World.

Now you can imagine how can we implement a page with Next.js. Now let’s create some extra page and try more with them

Create about page

Create file pages/about.jsx

Update about.jsx with content as bellow

import React from 'react'

export default class AboutPage extends React.Component {
    render() {
        return <div>About page</div>
    }
}

Navigate to 127.0.0.1:3000/about and check

The result is: About page

As you can see, there is a simple rule for creating NextJs page: “The page file (base) name will be the uri path”. For example:

127.0.0.1:3000/about: file pages/about.js or pages/about.jsx

127.0.0.1:3000/contact: file pages/contact.js or pages/contact.jsx

Another rule for NextJs pages:

You can also use directory as NextJs page path:

127.0.0.1:3000/about: pages/about/index.js or pages/about/index.jsx

127.0.0.1:3000/contact: pages/contact/index.js or pages/contact/index.jsx

This directory design is also good for deep uri path, for example, you have this page to build: 127.0.0.1:3000/user/login so you can create your user login file by two ways:

• Create file: pages/user/login.jsx
• Create file: pages/user/login/index.jsx

Note: in generality, when NextJs server received a request, it will check inside pages directory to see if have the file or directory with name the same as the request path (without query string), for example: request path: /directory/sub1/sub2 NextJs will looking for pages/directory/sub1/sub2.jsx or pages/directory/sub1/sub2/index.jsx

3. Convenience of Server side rendering

Now, you have known basic concept of NextJs page, let’s back into Server side rendering concept

You know, Server side rendering (SSR) mean that, html code of a page will be build and response from server; browser just need to parse and build dom-tree from the code that they received.

So, why we need NextJs (even though ReactJs) for this classic flow? Why don’t we just use handlebar, pugjs or mustache?

The answer was not exactly to the question, but it can explain some thing relevant. When a developer mention to ReactJs, AngularJs, Vuejs, they often mean about Client Side Rendering (CSR). In real life, the aim of these above tools is just for making an easier life for frontend developer, they help working with client side code simpler. In other words, when we say: ReactJs, VueJs… we are saying about Client Side Rendering. So, when we say “ReactJs Server Side Rendering”, we are mean about thing that include both SSR and CSR;

Linking between NextJs pages with next/link

In example above, we have two pages: / and /about, let’s try linking to /about from the index page.

We need to update index.js file. First, import next/link

import Link from 'next/link'

Place a link inside the returning template:

<Link href='/about'><a>About</a></Link>

import React from 'react'
import Link from 'next/link'

export default class HomePage extends React.Component {
    render() {
        return (
            <div>
                Hello World.<br />
                <Link href='/about'><a>About</a></Link>
            </div>
        )
    }
}

Navigate to 127.0.0.1 then click link about . Take a look at browser loading indicator while you are clicking on that link. You will see that browser won’t have to reload whole html source of about page. Instead, it will send xhr request to load the needed part for displaying about page. This behavior help saving network bandwidth and also decrease page load time.

Now, you are in about page, click reload button or press ctrl + r, the browser reload whole about page and display exact what it did before. This is how SSR work.

This example is not demonstrate all benefits of SSR, it’s too simple to express all SSR features. When we have complicated apps, with multi client resources (css, js…) and complicated components struct, then NextJs really make the difference.

Now we have completed a basic tutorial about NextJs, if you have any question please let me know; or if i have wrote some thing wrong, please let me know too.

We will try to resolve some “real life” problems with NextJs in other posts. Thank you!

Examples of this blog are posted here: https://github.com/cloudreports/my-nextjs/tree/basic

References:
https://nextjs.org
https://nextjs.org/docs/#routing