NextJS

Next.js is an open-source web development react-based framework created by Vercel, which is famous for it’s unique features such as Server-side rendering and enhanced SEO. It has some additional features such as data fetching utilities, dynamic API routes, optimized builds, etc. It is a framework built upon React, webpack, and babel.

A traditional react application is rendered client-side whereas a Next.js application is used to create production-ready web applications. Learning Next.js requires knowledge of basic React and Web Development. The most popular use of Next.js is in making Landing pages and marketing websites. Also if we want our webpage to rank better on searches the inbuilt features of Next.js provide support for that functions.

Features of Next.js:

• Hot Code Reloading: It automatically reloads the application when changes in the code get saved it is also known as fast refresh.
• Automatic Code Splitting: With this feature, every import in the code gets bundled and served with each page. It means that unnecessary code never gets loaded on the page. If there is an import in a specific page then other pages do not include that library this makes our application lightweight.
• Ecosystem Compatibility: Compatible with JavaScript, Node, and React. This makes it the first choice of many developers.
• Server Rendering: Easily render React component on the server before sending HTML to the client. This feature helps in improving SEO as load speed is a crucial factor when pages ranking is decided
• Styled-JSX: Styled-JSX allows you to write CSS directly inside JavaScript code. This solves confusion caused by maintaining multiple stylesheets
• Automatic Routing: The files inside the pages directory are automatically mapped and does not require additional coding

Prerequisites:

Before start learning Nex.js you should have basic knowledge of how we shifted from JavaScript to React, after that you can shift from React to Next.js. So you will need basic knowledge of HTML, CSS, JS, and React.

Next.js Installation:

To install Next.js follow these steps.

Note: This tutorial is for automatic setup in which folders and files are created automatically.

Step 1: Install NodeJS. Follow one of the links to install according to your system, Windows and Linux.

Step 2: Now create a folder for your project on the desktop navigate to the folder through your code editor and run the following command on the terminal.

npm init -y
npx create-next-app@latest
    or
yarn create next-app
    or
pnpm create next-app

This would be the folder structure after installation

Example: This code is added in the index.js file in the Pages directory

Javascript

function HomePage() {
    return <div> Welcome to GFG Next.js tutorial</div>
}

export default HomePage

Step 3 Run the Code: To run the application type the following command in the terminal after navigating to the project folder.

npm run dev

Local Server: After successful compilation open your web browser and type the following URL.

http://localhost:3000/

Output:

Next.js

Learn more about Next.js:

• Next.js Introduction
• How to start the Next.js server?
• Next.js Create Next App
• Difference between Next.js and React.js
• Next.js Supported Browsers and Features
• What is SSR in Next.js?

Disadvantage of Next.js:

Even though there are many advantages of Next.js it has some drawbacks. The major drawback is that it is very less flexible and almost everything has to be coded from scratch. It also has lesser plugins as compared to its alternatives and lacks an inbuilt state manager so we have to use external state managers like Redux.

Recent Articles on Next.js