Next.js | Dynamic Routing

Hello folks! welcome back to a new section of our tutorial on Next.js. In this tutorial, we will discuss about Next.js Dynamic Routing.

We can create routes dynamically in Next.js. In this tutorial, we are going to create pages spontaneously and their routing as well.

Step One - Define [id].js File

[id].js represents the dynamic page where id will be relative path. You have to define this file in pages/posts directory.

Step Two - Define libs/posts.js

posts.js represents the ids and contents. lib directory is to be created in root directory.

[id].js

Update [id].js file via getStaticPaths() which sets the paths and getStaticProps() method to get the contents based on id.

import Link from 'next/link'
import Head from 'next/head'
import Container from '../../components/container'

import { getAllPostIds, getPostData } from '../../lib/posts'

export default function Post({ postData }) {
   return (
      <Container>
         {postData.id}
         <br />
         {postData.title}
         <br />
         {postData.date}
      </Container>
   )
}
export async function getStaticPaths() {
   const paths = getAllPostIds()
   return {
      paths,
      fallback: false
   }
}

export async function getStaticProps({ params }) {
   const postData = getPostData(params.id)
      return {
      props: {
         postData
      }
   }
}

READ: Next.js | Routing

posts.js

posts.js contains getAllPostIds() method to get the ids and getPostDate() method to get corresponding contents.

export function getPostData(id) {
   const postOne = {
      title: 'One',
      id: 1,
      date: '04/11/2022'
   }

   const postTwo = {
      title: 'Two',
      id: 2,
      date: '04/11/2022'
   }
   if(id == 'one'){
      return postOne;
   }else if(id == 'two'){
      return postTwo;
   }  
}

export function getAllPostIds() {
   return [{
      params: {
         id: 'one'
      }
   },
   {
      params: {
         id: 'two'
      }
   }
];
}

Start Next.js Server

Run the following command below 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/posts/one in any web browser of your choice to see the following result -

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

READ: Next.js | Pre-Rendering

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 Imperative Routing.

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.