Next.js Installation

Next.js is a popular React framework that enables server-side rendering and static site generation. It is easy to learn if you have prior knowledge of HTML, CSS, JavaScript, and ReactJS. Installing Next.js involves setting up Node.js and npm, creating a new Next.js project using npx create-next-app, and starting the development server with npm run dev.

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

Steps to Install Next.js

Step 1: Install Node in Your System

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

Step 2: Initialize the Next.js Project

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.

npx create-next-app@latest 
#OR
yarn create next-app
#OR
pnpm create next-app

Step 3: Configure your next.js app

Write the project name (default my-app) and choose other configuration options

√ What is your project named? my-app
√ Would you like to use TypeScript? No / Yes
√ Would you like to use ESLint? No / Yes
√ Would you like to use Tailwind CSS? No / Yes
√ Would you like to use `src/` directory? No / Yes
√ Would you like to use App Router? (recommended) No / Yes
√ Would you like to customize the default import alias (@/*)? No / Yes
√ What import alias would you like configured? @/*

Step 4: Switch to Project Directory

Move to the project folder to install any other other dependencies. Use the command given below

cd my-app

Project Structure:

This would be the folder structure after selecting No for App Router while installation

Next.js Project Structure

Step 5: Run the Application

Write the command below to run the NextJS Application, and then open the URL in the browser.

npm run dev

After the successful run, the default page of next.js will be shown in the browser.

Let’s understand working through an example.

Example 1: Hello World in NextJS

In this example, we will simply print Hello. The index.js file is the main entry point of the next.js application, which means the component exported default by the index.js file gets rendered on the screen, so we have to change inside this file to render hello world on the screen.

// pages/index.js

export default function Home() {
    return (
        <div>Hello, GeeksforGeeks Learner!!</div>
    );
}

Output:

Example 2: Routing in Next.js

Example based on Pages. NextJS provides an awesome feature of pages, which means you can create any component same as the ReactJS, and then store it inside a directory named pages. Later whenever anyone visits the route /component, the component will render. You can clearly see what’s going on here, we are creating routing without any extra effort.

Project Structure:

We are going to create three components here, this will be the folder structure.

Define the Pages:

Inside the functional component, there is a div in starting which contains some text and bold text inside the b tag.

// pages/page1.js

function Page1() {
    return (
        <div>
            This is page1, accessed from the route
            <b>/page1</b>
        </div>
    );
}

export default Page1;

// pages/page2.js

function Page2() {
    return (
        <div>
            This is page2, accessed from the route
            <b>/page2</b>
        </div>
    );
}

export default Page2;

Define Routes:

Create this file inside the directory dynamicpage (let say) and the component will render on the route /dynamicpage/[id] where [] denotes the place holder. The router object returned from the useRouter hook provides an attribute asPath which contains the path of the requested URL that we are accessing inside the b tag.

// pages/dynamicpage/[id].js

import { useRouter } from "next/router";

function DynamicPage() {
    const router = useRouter();
    return (
        <div>
            This is Dynamic Page, accessed from
            the route <b>{router.asPath}</b>{" "}
        </div>
    );
}

export default DynamicPage;

Uodate the Home Page:

Finally, here we have combined all three pages inside the entry point of next.js app

// pages/index.js

export default function Home() {
    return <div>This is HomePage
        <p>
        Click on this <a href='/page1'><u>Link</u></a> to Go
        <b>/page1</b>
        Route
        </p>
    
        <p>
            Click on this <a href='/page2'><u>Link</u></a> to Go
            <b>/page2</b> Route
        </p>
    
    </div>
    }
    

Output:

mrtwinklesharma

Follow

Improve