Next.js File Based Routing (Dynamic Routes) (Part-3)

Posted by Ashutosh on April 06, 2021




In our last tutorial, we learn about the Nested paths in Next.js. 


Let's say there is an admin who can create, edit, delete and view the profile of the users. And there're hundreds of users in the web application. And it is not possible to create an individual file for each of the users. Here dynamic path comes into the picture. 


If you remember this article (Please visit if you haven't), we discussed how dynamic routing files look in Next.js. 


In Next.js, if you encountered a file like [xxx].js, it indicates this file is for the dynamic routes. 


Whenever user details stores in the database, it generally has an Id. Not to mention, Id is unique for every user. 


In our Next.js app, we create a file with the name of [userId].js and update the following code


import { useRouter } from 'next/router';


function UserDetailsPage() {
  const router = useRouter();
  const { userId } = router.query;
  return (
    <div>
      This is the user Details page { userId }.
    </div>
  )
}
export default UserDetailsPage;


In this way, we can achieve the basic dynamic routing in Next.js.


In our next article, we discuss more complex dynamic routing.