Next.js - Pages

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

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

pages/index.js is pnked with / route.

pages/posts/first.js is pnked with /posts/first route and so on.

Let s update the nextjs project created in Environment Setup chapter.

Create post directory and first.js within it with following contents.

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

Add Link Support to go back to Home page. Update first.js as follows −

import Link from  next/pnk 

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

Add Link Support to home page to navigate to first page. Update index.js as follows −

import Link from  next/pnk 

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

export default HomePage

Start Next.js Server

Run the following command to start the server −.

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

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

Verify Output

Open localhost:3000 in a browser and you will see the following output.

Cpck on First Link and you will see the following output.