How to navigate between pages in Nextjs

In Next.js, a page is a React Component exported from a file in the pages directory.

Pages are associated with a route based on their file name. For example, in development:

• pages/index.js is associated with the / route.
• pages/posts/first-post.js is associated with the /posts/first-post route.

Create a New Page

Create the posts directory under pages.

Create a file called first-post.js inside the posts directory with the following content:

The component can have any name, but you must export it as a default export.

Now, make sure that the development server is running and visit http://localhost:3000/posts/first-post.

This is how we can create different pages in Next.js.

Simply create a JS file under the pages directory, and the path to the file becomes the URL path.