Dynamic routing in NextJS 13 is not working as expected. How to make it work?

Question

I'm trying to use dynamic routing so that the URI has blogs/id/ in a NextJS 13 project where the id part should be dynamic, but it doesn't seem to work. It seems that the page corresponding to the blog is always displayed.

I'm using the Experimental Application Directory from Next 13 for this project, and I have a route for blogs that I set up by creating layout.jsx and It's >page.jsx in the src/app/blogs/ directory.

I noticed that the console log statements in

src/app/blogs/[id]/page.jsx show up in the server side console. i.e. the terminal (not the browser console). However, the corresponding JSX in the return statement is not rendered. Instead, the JSX corresponding to blogs is being rendered.

JSX code in the project:

src/app/blogs/layout.jsx

import PageTitle from '../components/Title/page-title';
    import BlogPage from './page.jsx';
    
    export default function BlogLayout() {
      const blogTitle = "My Blog"
      return (
        <>
            <PageTitle title={blogTitle} />
            <BlogPage />
        </>
    
      )
    }

src/app/blogs/page.jsx

function BlogPage() {
    
        return (
            <>
                <p className="blog-text--paragraph prose text-gray-600">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequuntur quaerat a possimus, qui expedita iure, ipsum asperiores aliquid eveniet libero vel architecto! Assumenda incidunt dolore molestiae?
                </p>
            </>
            
        );
    }
    
    export default BlogPage;

src/app/blogs/[id]/layout.jsx

import PageTitle from '../../components/Title/page-title';
    import BlogPageMain from '../[id]/page';
    
    export default function DynamicBlogLayout() {
    
    
      const blogTitle = "BlogPageMain Blog"
      
      return (
        <>
            <PageTitle title={blogTitle} />
            <BlogPageMain />
        </>
      )
    }

src/app/blogs/[id]/page.jsx

export default function BlogPageMain({ params, searchParams }) {
    
        console.log("The current ID is:");
        console.log(params.id);
    
        return <div>ID: {params.id}</div>
    
      }

Project and environment details:

-Next v13.3.0

- Tailwindcss v3.3.1

- Node v18.15.0

- yarn v1.22.19

- Ubuntu 22 (Linux)

Screenshots for reference:

Blog/Second screenshots for reference

Front-end screenshots for reference

I've read the official documentation a few times but I can't understand what's going wrong here and why it doesn't render correctly. Any help is greatly appreciated.

Answer 1

Hey, the problem I see here is that is not dynamic routing, but layout.jsx.

You should render the child instead of manually rendering the page.

src/app/blogs/layout.jsx

 import PageTitle from '../components/Title/page-title';
    
    export default function BlogLayout({children}) {
      const blogTitle = "My Blog"
      return (
        <>
            <PageTitle title={blogTitle} />
            {children}
        </>
    
      )
    }

src/app/blogs/[id]/layout.jsx

   import PageTitle from '../../components/Title/page-title';
    import BlogPageMain from '../[id]/page';
    
    export default function DynamicBlogLayout({children}) {
    
    
      const blogTitle = "BlogPageMain Blog"
      
      return (
        <>
            <PageTitle title={blogTitle} />
            {children}
        </>
      )
    }

More information

• Page content is automatically passed to the nearest layout.jsx For example, if you try to access http://localhost:3000/blogs application The layout within /blog will be rendered
• If you try to access http://localhost:3000/blogs/1, the layout within app/blogs/[id] will be rendered
• I don't know the use case, but just to provide information when accessing http://localhost:3000/blogs when the layout does not exist in app/blogs/[id]/1 In this case it will render the closest one, which will be in app/blogs, which means we don't need multiple layouts

for reference

• Pages and Layouts - https://nextjs .org/docs/app/building-your-application/routing/pages-and-layouts
• Routing Groups - https://nextjs.org/docs/app/building-your-application/routing/route-groups#creating-multiple-root-layouts