11

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

Yilmaz
  • 35,338
  • 10
  • 157
  • 202
iAmWhy
  • 327
  • 2
  • 13
  • Try using Next.js [rewrites](https://nextjs.org/docs/api-reference/next.config.js/rewrites) to strip the layout segment from the url to hide it. – rantao Oct 26 '22 at 19:35
  • @rantao Looks like a workaround for older next.js versions, but i hope there is a more convenient way for next.js 13 – iAmWhy Oct 26 '22 at 19:39
  • 1
    Found the answer in the [documentation](https://beta.nextjs.org/docs/routing/defining-routes#example-organizing-routes-without-affecting-the-url-path) – rantao Oct 27 '22 at 02:05

2 Answers2

20

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
shubhamt619
  • 11
  • 4
OGreeni
  • 572
  • 5
  • 17
  • Does this setup require `app/layout.tsx` and `app/page.tsx` if not, which one would be the layout of `../` ? – G.D. Jun 27 '23 at 13:08
  • @G.D. no, `/app/(LayoutOne)/page.tsx` is mapped to `../`. `../` will have the layout defined in `/app/(LayoutOne)/layout.tsx`. – OGreeni Jun 27 '23 at 17:12
  • How would you then invoke Layout Two? – Craig P Aug 05 '23 at 12:39
  • @CraigP I'm not sure I understand your question correctly, but any pages under `/app/(LayoutTwo)` will have `/app/(LayoutTwo)/layout.tsx` as their base. For instance, `/app/(LayoutTwo)/skills/page.tsx` will use this layout as opposed to Layout One. – OGreeni Aug 05 '23 at 19:03
  • I asked my question has a question [here](https://stackoverflow.com/questions/76843693/next-js-dynamic-routing-with-multiple-urls-and-page-designs-one-repo) – Craig P Aug 05 '23 at 21:58
6

Next.js has two layouts. "Root" and "reagular". From docs

Root Layout : You can create a root layout that will apply to all routes of your application by adding a layout.js file inside the app folder. The root layout replaces the need for a custom App (_app.js) and custom Document (_document.js) since it applies to all routes.

Regular Layouts: You can also create a layout that only applies to a part of your application by adding a layout.js file inside a specific folder.

For example, you can create a layout.js file inside the "about" folder which will only apply to the route segments inside "about".

  • If you want to use one layout for more than 1 route, you can group them.

A route group can be created by wrapping a folder’s name in parenthesis: (folderName)

Note: The naming of route groups are only for organizational purposes since they do not affect the URL path.

enter image description here

  • Another way would be to create a custom BasePage component and wrap each page with BasePage. Because in your question you just want to use 2 different navbars. But what if some of the pages you don't need a navbar at all? For example https://codesandbox.io/ the main page has a navbar but the code playground pages have no navbar. Or maybe you would need a different background color for different pages. In each case, you just pass a prop to wrapper "BasePage" and handle the logic inside. the global layout file's role will be just applying top css rules or media rules.
Yilmaz
  • 35,338
  • 10
  • 157
  • 202