Skip to content
Related Articles
Open in App
Not now

Related Articles


Improve Article
Save Article
  • Last Updated : 15 Mar, 2023
Improve Article
Save Article

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.

Next.js Tutorial

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 


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
yarn create next-app
pnpm create next-app

This would be the folder structure after installation

Project Structure

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


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.





Learn more about 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

My Personal Notes arrow_drop_up
Related Articles

Start Your Coding Journey Now!