NextJS is a simple NodeJS web framework with React in frontend. NextJS uses server side rendering so it solve SEO problem of React. It is also very simple web framework and consider easy to use.

Know characteristics of NextJS

There is a tutorial from NextJS official website. Please refer to the tutorial for more detail.

To mention the characteristics of NextJS:

• Server-rendered by default

• Automatic code splitting for faster page loads

• Simple client-side routing (page based)

• Webpack-based dev environment which supports (HMR)

• Able to implement with Express or any other Node.js HTTP server

• Customizable with your own Babel and Webpack configurations

As from my experience of using NextJS, it is a super simple web framework. It is friendly for beginner and also flexible. All essential features are included by default. Whatmore, developers can freely choose which HTTP server, which css framework or even using TypeScript to use.

NextJS is also an open source project. We can check current status via Github.

Try using NextJS

The best way to learn for beginer is by following offical tutorial: https://nextjs.org/learn/basics/getting-started

It is needed to have some React knowledge but it's just limited and you don't have to be a React guru to begin.

Note points:

• Use pages for default routing

• Use getInitialProps() in both server and client side for initiating data. For example, API call to get list of items to show in a page

• Need to know how data flows from HTTP server to React component

• First time access will be a static page (SSR - server side rendering page). After that, every all pages would be similar to SPA (single page application). NextJS configures this by default so we don't have to worry about it.

If there is any problem, also check

README

https://github.com/zeit/next.js

This page is full of information for almost NextJS fundermental features. Make sure to check this page whenever there is an issue while following the tutorial.

Examples

An other great place to check after the tutorial are example from Github repository: https://github.com/zeit/next.js/tree/master/examples

There are many sample codebases with different NodeJS framework such as express, hapi, koa, etc. So make sure to check this.

Issues

Whenever having an issue, it may already be answered by other developers so just check it. https://github.com/zeit/next.js/issues

Showcase

Check to know which web services are using NextJS: https://nextjs.org/showcase

If you familiar with React, there is a chance you would know styled-component official website: https://www.styled-components.com/. Actually, this site is also coded using NextJS. They also open source codebase: https://github.com/styled-components/styled-components-website

From: https://phuongnq.dev