Open In App

Next.js Installation

Improve
Improve
Like Article
Like
Save
Share
Report

Next.js is based on react, webpack, and babel. It is an awesome tool for creating web applications and is famous for server-side rendering. Developers with knowledge of HTML, CSS, JavaScript and React can easily learn and switch to next.js.

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

Installing Next.js: Below is the step-by-step procedure for installing next.js.

Step 1: Install NodeJS. Follow one of the links to install according to your system, Windows  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

Project Structure

Step 3: 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: 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.

index.js




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


Output:

Example 2: 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.

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

page1.js




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


page2.js




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


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.

”[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


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

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:



Last Updated : 02 Feb, 2023
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads