Next.js — The React Framework for Production(Intro)

If you don’t have time to read but want to know what’s there in this post. Find the quick read 👇

What will you learn?

Intro about Next.js
How Next.js is different from React
Settingup new Next.js application

1. Intro about Next.js

Next.js is an opinionated React framework that enables several extra features, including server-side rendering, and generating static websites.

React is a JavaScript library that is traditionally used to build web applications rendered in the client’s browser with JavaScript.

The main idea behind the framework(Next.js) is to ensure applications start and remain as performant as possible by having these capabilities included by default.

Development history of Next.js

Image represents the development history of Next.js

2. How Next.js is different from React

React is a library that makes it easier to build user interfaces using a component-based approach. Although powerful, React is specifically a UI library. Many developers include additional tooling such as a module bundler (webpack for example) and a transpiler (Babel for example) to have a complete build toolchain.

In the React collection, we took the approach of using Create React App (CRA) to spin up React apps quickly. CRA takes the hassle out of setting up a React application by providing a complete build toolchain with a single command.

Next.js, which can also be used to create a new React application, takes a different approach. It immediately provides a number of common optimizations that many developers would like to have but find difficult to set up, such as:

Server-side rendering
Automatic code-splitting
Route prefetching
File-system routing
CSS-in-JS styling ([styled-jsx](https://github.com/zeit/styled-jsx))

3. Settingup new Next.js application

To create a new Next.js application, run the following command:

npx create-next-app new-app

Once the installation is done navigate to the directory and start the development server using the below command

cd new-app npm run dev

Notice that a pages/ directory is created with a single file: index.jsx. Next.js follows a file-system routing approach, where every page within this directory is served as a separate route. Creating a new file in this directory, such as about.js, will automatically create a new route (/about).

Components can also be created and used like any other React application. A components/ directory has already been created with a single component, nav.js, which is already imported in index.js. By default, every import used in Next.js is only fetched when that page is loaded, providing the benefits of automated code-splitting.

The preview of Next.js directory with the newly created files

Moreover, every initial page load in Next.js is server-side rendered. If you open the Network panel in DevTools, you can see the initial request for the document returns a fully server-rendered page.