NextJS - Docs

NextJS is a React Framework that has included tons of production-ready configurations so that developers can focus more on building business logic for the application. One of the main reasons why people are using NextJS is its server-rendering capability.

For more detailed information, you can check out the NextJS Official Documentations. We will only mention some basic features and differences when developing with NextJS in this documentation.

Server-side Rendering

Normally, when developing using puer ReactJS, there will be just one index.html file like the example below returned from the server at the first load.

<html>
  <head>
    <!-- Head stuffs -->
  </head>
  <body>
    <div id="root" />
    <script src="js/main.js" />
  </body>
</html>

All the components will be rendered and added to the DOM later by React when executed the main.js file. There is no issue with this if you are developing a Web Application that is made for internal uses, or required login from users to access the app, which means you don't need to care much about SEO (Search Engine Optimization). But for normal Websites like blogs, e-commerce websites or organization websites that need SEO, this is not enough because not all Search Engine or Social App Bots execute the script when crawling a webpage, so what they will see is just an empty page like the above. That's why we need Server-side Rendering.

Server-side Rendering is when at the first load, the React script will be executed from the server and render all the components to the HTML file before returning to the client. So when Search Engine or Social App Bots read the HTML source file, they can see all the things that need to be indexed like metadata, h1, content, images alternative,...

Folder Structure

Below is a typical NextJS application folder structure

├── pages/
│   ├── index.js
│   └── login.js
├── components/
│   ├── component1.js
│   ├── component2.js
│   └── component3.js
├── styles/
│   ├── global.css
├── .env
├── next.config.js
├── server.js
├── package.json
└── README.md

pages/: like its name is where you put all your page-level components files, and index.js is the Home page. By default, the page name will be also the route of that page. For example, login.js page will be located at /login path.
components/: where you can put smaller components.
styles/: where you can put CSS or SCSS files.
.env: this is the environment config file. Usually, there will be a .env.sample file, whose content you can copy to the .env file.
next.config.js: the config file specific for NextJS, where you can turn on or off NextJS's features or change the features' behaviors.
server.js: this is an optional file, if present, you will create a custom NodeJS server instead of using the default NextJS server.

Data Fetching

Basically, there are not many differences when coding with NextJS compare to coding with pure ReactJS. The main difference comes from the Data Fetching mechanism because NextJS needs to fetch the data on the server side before rendering components and returning files to the clients. Check out the Server-side rendering above.

NextJS supported 4 functions that can be used to do such things. You can check out each function document for more information.

Routing

Another thing you should take note of is when developing with NextJS, for all the internal linking in the application, you should always use Link component from next/link instead of <a> tag and use router from next/router instead of React Router. NextJS will cover all the cases and do all the magic works in the background for you so you should make use of it. You can check out the Routing Guide for more information.

Dynamic Import

This is an advanced feature of NextJS but we think you might need to know since usually there will be issues that you will need this feature to solve.

Dynamic Import enables you the ability to lazy loading a library or a React component. Components or libraries are only imported and included in the JavaScript bundle when they're used. You can also use ssr option to disable server-rendering. This is useful if the component depends on a client-side-only external library like a Rich Text Editor or relies on browser APIs like window. These things are not available on Server-side so they will throw errors when importing and rendering on the server. Check out the Dynamic Import Document for more information.