Next JS is a react framework that helps us build more performance react apps. If we go to the nextjs.org we can get a comprehensive list of all the things that next offer us. The main purpose of Next JS is Server-Side Rendering. Server-Side Rendering is a process of rendering web apps on the servers.

In Server-Side Rendering instead of waiting for all javascript files to be loaded with the initial page load to create the markup, we load them on the server. This is the key idea behind server-side rendering (SSR) and where Next JS comes into the ground which makes SSR so easy.

Why Next JS?

The applications developed in JavaScripts are awesome but there are some handful of problems that need to be fixed for better user experience. For example, it usually takes a bit longer to load all page content as all javascript files are loaded first so it takes a bit time to show something useful to the user with which he can interact.

Secondly, applications developed in React JS are not SEO friendly. Google crawlers face some issues while crawling the content.

Code Splitting is another major feature of Next. Because code is split into light bundles and loads only those that are needed. Next supports hot reloading that can detect any changes in code.

I think these features are enough to get started with Next. Now we can jump to the next step and that is to create a project in Next JS.

How to create a project in Next JS?

There are two ways to create projects in Next JS.

  1. Through create-next-app
  2. Manual setup

Through create-next-app

It is highly recommended to create a project using create-next-app command as it will automatically set up everything for you. To create a project, run the following command

npm init create-next-app
or
yarn create-next-app

It will ho through all the procedures and will set everything for you. Now go to pages/index.js to start editing everything.

Through Manual Setup

To create a project manually you need to install next react react-dom

npm install next react react-dom

Once the modules are installed next thing is to run this command

npm init

Open package.json and add the following scripts

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

Now Let’s explore the these scripts.

dev: Runs the next project in development server

build: build command is use for building next js project for the production

start: Runs next.js project in production server.

How to run the project?

To start the project run the following command.

npm run dev

This command will run the project on port 3000.

That’s it now our project is ready for development. Therefor Go to pages/index and start editing. Hot Reload will automatically detect all the changes.

Conclusion

In this article, we have checked the features and benefits of Next over simple react. We have also learned how to create and start a project in Next.

Please keep visiting infosectweaks for more tutorials on Next JS.

Next JS vs GatsBy

LEAVE A REPLY

Please enter your comment!
Please enter your name here