Next.js | Pages

Hello folks! welcome back to a new section of our tutorial on Next.js. In this section of our tutorial on Next.js, we will be discussing about Next.js Pages.

In Next.js, we can make pages and navigate between them using the file system routing feature. We'll use Link component to have a client side navigation between pages.

In Next.js, a page is a React component and is exported from pages directory. Each page is associated with a route based on its file name. For example.

• pages/index.js is linked with '/' route.

• pages/posts/first.js is linked with '/posts/first' and so on.

Let us update the nextjs project created in Environment Setup tutorial.

Create post directory and first.js within it by using the following content -

export default function FirstPost() {
   return <h1>My First Post</h1>
}

Add Link Support to go back to Home page. Update first.js with the following content -

import Link from 'next/link'

export default function FirstPost() {
   return (
      <>
         <h1>My First Post</h1>
         <h2>
            <Link href="/">
               <a>Home</a>
            </Link>
         </h2>
      </>	  
   )
}

READ: Next.js | Environment Setup

Add Link Support to Home page to navigate to first page. Update index.js with following content -

import Link from 'next/link'

function HomePage() {
   return (
      <>
         <div>Welcome to Next.js!</div>
         <Link href="/posts/first"><a>First Post</a></Link>
      </>	    
   )
}

export default HomePage

Start Next.js Server

Now run the following command to start the server -

npm run dev
> nextjs@1.0.0 dev \Node\nextjs
> next

ready - started server on http://localhost:3000
event - compiled successfully
event - build page: /
wait  - compiling...
event - compiled successfully
event - build page: /next/dist/pages/_error
wait  - compiling...
event - compiled successfully

Output

Open localhost:3000 in any browser of your choice to see the following result -

Now click on First Link and you will see the following output -

READ: Next.js | Overview

Alright guys! This is where we are going to be rounding up for this tutorial. In our next tutorial, we are going to be studying about Next.js Static File Serving.

Feel free to ask your questions where necessary and we will attend to them as soon as possible. If this tutorial was helpful to you, you can use the share button to share this tutorial.

Follow us on our various social media platforms to stay updated with our latest tutorials. You can also subscribe to our newsletter in order to get our tutorials delivered directly to your emails.

Thanks for reading and bye for now.