How to Create Pages in Next.js?

Hi Learners, In this tutorial, you will learn about how to create pages in Next.js. Basically, the Next.js pages are React Component. You create files using  .js, .jsx .ts .tsx  extension inside the next page’s folders. Every page in next.js opens with a specific router path in the web browser. You access a page with the file name. Your learning objectives are:

1. How to create a simple nextjs page?
2. How to create a page for dynamic routing in nextjs?

So get ready with your PC to start your learning.

Prerequisites

Before we begin, make sure you have the necessary libraries/packages installed: Node.js 18.17 or later

Step-1

Make a folder for your project named CodeSpeedy (say on Desktop), Then open in your favorite code editor, like Visual Studio Code and enter the below command in the terminal:

npx create-next-app@latest

It would look something like this:

PS C:\Users\User\Desktop\CodeSpeedy> npx create-next-app@latest

Step-2

You would see many prompts, select typescript yes/no, type your project name  etc. (according to your preferences or hit Enter Enter…).

After the prompts,  It will create a folder with your project named as you just gave above in prompts.

Step-3

Go inside your project directory by typing the following command and hit ENTER:

cd your-project-name

Step-4

Type the below command to start your development server:

npm run dev

Visit http://localhost:3000 to view your application. It would display the page.js file content in the browser (by default).

Step-5

If you create a home page in your nextjs app, create a file in the nextjs pages folder with the home name, and your file extension is .js after you access the home page with the help of the filename. Inside the home page, you create a functional component and ensure your Function component exports with export default.  Now you are ready to access your home page in a browser at http://localhost:3000/home.

Step-6

If you want to create a dynamic route then create a folder say country then create a file named as the URL parameter name in square bracket then type the extension of your file.

Example:     [location].js

Folder Structure:   country/[location].js

With the help of this, Now if you type in the search box of the browser  http://localhost:3000/country/delhi. Then your location delhi page will be loaded in the browser. Try next time Kolkata and see the interesting output.

Conclusion

In this tutorial, we understood how to create pages in Next.js ? I hope you found this tutorial helpful and learned something new today through this tutorial.