Search code examples
next.jsnext.js13

Next.js 13 - Have different shared layouts

I now want to upgrade to Next 13. I have different navbars on my portfolio. How can I use a different navbar for the /about and /skills route than the home page and /contact route?

I thought you could now create different subfolders within the app directory, each with the layout.tsx file, but then corresponding unwanted routes are created.

I tried the following file structure:

/app/LayoutOne/layout.tsx
/app/LayoutOne/page.tsx
/app/LayoutOne/contact/page.tsx
/app/LayoutTwo/layout.tsx
/app/LayoutTwo/about/page.tsx
/app/LayoutTwo/skills/page.tsx

But then I had the following routes:

../LayoutOne
../LayoutOne/contact
../LayoutTwo/about
../LayoutTwo/skills

I don't want the layout parts in the URL's

Solution

  • Use route grouping to avoid this behavior. Folder names that are enclosed in parentheses are ignored by the routing system.

    Try this:

    /app/(LayoutOne)/layout.tsx
/app/(LayoutOne)/page.tsx
/app/(LayoutOne)/contact/page.tsx
/app/(LayoutTwo)/layout.tsx
/app/(LayoutTwo)/about/page.tsx
/app/(LayoutTwo)/skills/page.tsx

    To define the following routes:

    ../
../contact
../about
../skills