Next.js Discord

Discord Forum

Question about layouts

Answered
Youssef posted this in #help-forum
Open in Discord
YoussefOP
I have a misunderstanding regarding multiple layouts in Next.
Let's say I have two architectures:

First architecture:
app
├── sign-in
│   ├── page.tsx
│   └── layout.tsx
├── page.tsx
└── layout.tsx


Second architecture:
app
├── sign-in
│   ├── page.tsx
│   └── layout.tsx
└── (root)
    ├── page.tsx
    └── layout.tsx


In the First architecture, when I navigate from / to /sign-in (or vice versa), I get this error:
Error: Clerk: You've added multiple <ClerkProvider> components in your React component tree. Wrap your components in a single <ClerkProvider>.


But when I switch to the Second architecture, I get no error and it works perfectly.
Could someone explain what the difference is and what happened?

Thanks in advance.
Answered by Rafael Almeida
in the first architecture you have a root layout (app/layout.tsx) so all segments are gonna be built on top of it. this means that app/sign-in/layout.tsx will be nested inside it:
<AppLayout>
  <SignInLayout>
    <SignInPage />
  </SignInLayout>
</AppLayout>

you can already notice what is the issue, the provider is already defined in the root layout so there is no need to define it again in the sign-in layout

in the second architecture you have multiple root layouts, so app/sign-in-layout.tsx isn't nested by app/(root)/layout.tsx because they don't have any nesting relation in the folders:
// Route: /sign-in
<SignInLayout>
  <SignInPage />
</SignInLayout>

// Route: /
<RootLayout>
  <HomePage />
</RootLayout>
View full answer

2 Replies

Rafael Almeida
in the first architecture you have a root layout (app/layout.tsx) so all segments are gonna be built on top of it. this means that app/sign-in/layout.tsx will be nested inside it:
<AppLayout>
  <SignInLayout>
    <SignInPage />
  </SignInLayout>
</AppLayout>

you can already notice what is the issue, the provider is already defined in the root layout so there is no need to define it again in the sign-in layout

in the second architecture you have multiple root layouts, so app/sign-in-layout.tsx isn't nested by app/(root)/layout.tsx because they don't have any nesting relation in the folders:
// Route: /sign-in
<SignInLayout>
  <SignInPage />
</SignInLayout>

// Route: /
<RootLayout>
  <HomePage />
</RootLayout>
Answer