Next.js — How to set up the initial page

I recently started leaned NEXT.js. I got some interesting information about this tool. which I want to share with you all with this hope that might be it will helpful for you all.

Whenever we heard about any new tool or language so the question which is coming in all of us mind is that what is it? why we use it? and what are the new features of it? So lets’ start with:

1) What is next.js?

Next.js is a minimalistic framework for rendering React application on the server.

as we all know that React.js angular.js and vue.js they all are client-side frameworks. so when we want to run our application on the server we use next.js it helps us to run the application on the server.

Now the question which is coming here is:

What’s the difference between client-side rendering and server-side rendering?

Let me guide you with the answer…

Client-side rendering(CSR) in this compiler convert our code into pure javascript code and send to the browser. After that its browser’s responsibility to execute javascript code and get the HTML and show it on the webpage. this process takes too much time.

Server-side rendering(SSR) in this compiler download HTML strings and send it to the webpage so that our webpage is now viewable and then download Javascript code and then browser execute React and now our page looks intractable as you can see in the picture. this process takes less time and the user experience become nice.

2) Core features of next.js

i) Server rendering React Apps

as we know that next gives us server-side rendering for our react application. we already talked about it upside of our blog.

ii) Automatic Code splitting

as we all know that code splitting is one of the most important methods for run our application faster. It allows us to load needed parts of the page when they actually required. next.js give us that feature it directly jumped on that module which is needed and render it first which helps in to load our webpage faster and makes the performance better.

iii) Simple page based Routing

Next.js give you automatic route in his features here you no need to map your routes and any configuration. and if you want then you can map it in your about.js file. You just upload a page and access it with the URL.

iv) Built-in CSS Support

Next.js gives you full support and friendly CSS support for JSX. In this, you can style your JSX too and you can use plugin styled components too.

v) Hot Reloading

In next.js it automatically reloads the page when the page detects any changes in that. it is nice and it increases the speed of your webpage too.

vi) Deployment

In next.js deployment is easy you can run build command to build your files and static assets. after that you can host your app anywhere.it’s pretty simple and straightforward. You also have an option of ZIET now hosting which allows you to basically deploy your app with a single command. so no pre-configuration of a server and anything like that.

we have many more features of next.js like that which we learn after.

3) Let’s start with the next.js

Installation & Setup

open your favourite text editor and create a folder for your app:

mkdir firstNextApp

after that creating a package.jsonfile with this command

npm init -y

then install next.js with the following command

npm install --save next react react-dom

then set up your package.json file with these following commands:

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

After that your file looks something like this:

{"name": "githubSearch",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
     "dev": "next",
     "build": "next build",
     "start": "next start"
},
"keywords": [],
"author": "",
"license": "ISC",
"dependencies": {
     "next": "^7.0.2",
     "react": "^16.6.3",
     "react-dom": "^16.6.3"
  }
}

then add a folder name and touch a index.js file in that which is the root file of your app./pages/index.js:

then in your ./index.js start writing code. like I created a default function and add a div element in which I write “Hello Next.js”

export default() => (
       <div>Hello Next.js</div>
     );

after all that stuff run your server with this command:

npm run dev

Congrats!!! Your server is started on localhost:3000

Your journey starts here.