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

Question

I am trying to use dynamic routes such that the URI has blogs/id/ n NextJS 13 project where the id part is supposed to be dynamic, however it seems like it is not working. It seems to always show the page corresponding to blogs.

I have am using the experimental app directory in Next 13 for this project and I have a route blogs which I set up by creating the layout.jsx and page.jsx inside the src/app/blogs/ directory.

I have noticed that the console log statements in the src/app/blogs/[id]/page.jsx is showing up in the server side console. i.e. the terminal (not the browser console). However, the corresponding JSX in the return statement is not rendering. Instead of that, the JSX corresponding to blogs is getting 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:

Screenshot of blogs/two for Reference
Screenshot of Frontend for reference

I have gone through the official documentation couple of times, but I am not able to understand what is wrong here and why it is not rendering properly. Any help is greatly appreciated.

Neeraj Walia · Answer 1 · 2023-06-14T08:43:27.993

1

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

You are supposed to render children instead of rendering the page manually.

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}
        </>
      )
    }

Some more info

page content is automatically passed to the closest layout.jsx For example if you are trying to access http://localhost:3000/blogs layout inside app/blogs will be rendered
If you are trying to access http://localhost:3000/blogs/1 layout inside app/blogs/[id] will be rendered
I don't know the use case but just for info if layout doesn't exist in app/blogs/[id] while accessing http://localhost:3000/blogs/1 it will render the closest one in this case which will be inside app/blogs means we don't need multiple layouts

For refrence

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

edited Jun 14 '23 at 08:43

answered Jun 14 '23 at 06:53

Neeraj Walia

186
6

Apologies for the late response, I just got time off from work, so I can reply back here now. Okay so my goal is have a blogs page where the listing of the blogs would be and I would like it to be in the route '/blogs' and then the subsequent blog pages themselves could have dynamic routes, for instance 'blogs/blog-01'. Based on the id of the dynamic route for the blog page I am planning on fetching data from my database. – tribelord Jun 15 '23 at 20:03
Eventually, the end goal would be to also have categories for the blogs so there would be a dynamic route for the individual categories as well, so it could be something like 'blog-category-[id]/blog-[id]' both of which I plan to make as dynamic routes. But in order to get to that I need to first understand how to make a simple route and use layout files effectively. – tribelord Jun 15 '23 at 20:03
Now, the example you've mentioned seems to work to render things, however the issue that I am facing now is that the dynamic route is not it's own thing, it still renders the parts from './blogs'(corresponding to files in `app/blogs` directory level) and then renders the children, which is the content from the dynamic route which is inside `app/blogs/[id]`, which I do not want. I would like to use the `layout.jsx` of the dynamic route [id] to be used as a wrapper such that it can be used to define the structure of the page. i.e. things like 1 column or 2 column layout etc at the top level. – tribelord Jun 15 '23 at 20:04
Am I wrong to assume that `layout.jsx` is used for top level layout and structuring? Because when I rendered the dynamic page without using layout.jsx in both the directories it worked as I expected it to , without having to use children. One more thing to note is that I come from a Magento 2 background, so my understanding of layouts may be a little different than how nextjs handles things. Could you please provide some insight into this? Thank you for your time. – tribelord Jun 15 '23 at 20:04
Sure lets do it step by step **1.** create a nextjs 13 app **2.** Do not touch layout files yet will change that later on once the dynamic routes are working. **3.** Now you need to have a category id and blog id Your folder structure for this will look like this `app/blog/[category]/[blog]` For reference - https://nextjs.org/docs/app/api-reference/functions/use-params – Neeraj Walia Jun 17 '23 at 06:44
Now its layout time, you can use one single layout in your entire application, but if you want have multiple layouts steps are - **1.** Grouping the routes and create new layouts in that group. - https://nextjs.org/docs/app/building-your-application/routing/route-groups **2.** New layout structure you can copy from the root layout file that is create by next js. **3.** Remove the root layout file. – Neeraj Walia Jun 17 '23 at 06:46

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

JSX Code in the project:

Project and Environment Details:

Screenshots for reference:

1 Answers1