How to do dynamic routes with nextjs 13?

Question

How do we do dynamic routing with layouts in nextjs 13?

I have a directory in the new next pages app in which im trying to do dynamic routing: app/dashboard/[id].jsx, however it does not work with the dashboard layout.

How do I do it? Normal pages work like app/dashboard/pages.jsx but how do we do dynamic routes in which i can also get the id?

Answer 1

https://beta.nextjs.org/docs/api-reference/file-conventions/page

So: app/dashboard/[id]/page.jsx

Your Page function can take a params argument:

export default function Page({ params, searchParams }) {
    return <div>ID: {params.id}</div>
}

Answer 2

In the latest App Router of Nextjs 13.4, It can be done in the following way.

Summary

1. single param (blog/123)

   • Use: [blogId]

2. multiple params (blog/a/b)

   • Use: [...blogId]

3. optional params (blog/ or blog/a)

   • Use: [[...blogId]]

⚠ Caution : You cannot use both optional params and multiple params at the same time

---

Invoking

export default function Home() {
    return (
        <div className="flex flex-col gap-4">
            <Link href={"/blog/123"} className="bg-green-400 w-fit rounded-lg p-4">
                Single param
            </Link>
            <Link href={"blog/a/b"} className="bg-blue-400 w-fit rounded-lg p-4">
                Multiple Params
            </Link>
            <Link href={"blog"} className="bg-amber-400 w-fit rounded-lg p-4">
                Optional
            </Link>
        </div>
    );
}

Receiving

1. Single parameter

   export default function BlogPost({ params }: { params: { blogId: string } }) {
    return <h1>{params.blogId}</h1>;
   } 
   
   

2. Multiple Parameters

   export default function BlogPost({ params }: { params: { blogId: string[] } }) {
    console.log(params);
    return (
        <div className="">
            {params.blogId[0]}
            {params.blogId[1]}
        </div>
     );
   }
   

Also refer latest Nextjs 13 code templates Next.js 13+ Power Snippets | TypeScript/Javascript

It includes wide range of code snippets for both ts and js. Find all snippets here

---

Useful Links:

• Get URL Params (Next.js 13)

• Nexjs Dynamic routes

Answer 3

you can use the getLayout function to define a custom layout for a page, including dynamic routes. Here's an example of how you can use getLayout to apply the DashboardLayout to all pages under the /dashboard route:

Define your custom DashboardLayout component:

     import React from 'react';
     import Navbar from '../components/Navbar';
 
     const DashboardLayout = ({ children }) => {
       return (
     <>
       <Navbar />
       <main>{children}</main>
     </>
   );
 };
 
 export default DashboardLayout;

In your dynamic route file (pages/dashboard/[id].jsx), define the getLayout function to return the DashboardLayout:

    
   import DashboardLayout from '../../layouts/DashboardLayout';
    
    const DashboardPage = ({ id }) => {
      return <h1>Dashboard page with ID: {id}</h1>;
    };
    
    DashboardPage.getLayout = function getLayout(page) {
      return <DashboardLayout>{page}</DashboardLayout>;
    };
    
    export default DashboardPage;

Note that the getLayout function takes in the page as an argument, representing the page component wrapped with the layout. You can then return the DashboardLayout component with the page as its child.

To extract the id parameter from the URL, you can use the useRouter hook from the next/router module:

   import { useRouter } from 'next/router';
   import DashboardLayout from '../../layouts/DashboardLayout';
    
    const DashboardPage = () => {
      const router = useRouter();
      const { id } = router.query;
    
      return <h1>Dashboard page with ID: {id}</h1>;
    };
    
    DashboardPage.getLayout = function getLayout(page) {
      return <DashboardLayout>{page}</DashboardLayout>;
    };
    
    export default DashboardPage;

In this example, we use the useRouter hook to access the query object containing the dynamic route parameters. We can then extract the id parameter from the query object and use it in our component.

With these changes, your dynamic route should now use the DashboardLayout component.

Answer 4

use this below approach and this worked for me.

app/dashboard/[id]/page.jsx