Next.js Discord

Discord Forum

Opt-out root layout in dynamic routes

Answered
Cape lion posted this in #help-forum
Open in Discord
Cape lionOP
Hello!

How should my folder structure be if I want to opt-out the root layout in my dynamic routes?
My current folder structure is:
src/
|--app/
   |--demo/
      |--[id]
         |--page.tsx
      |--page.tsx

I have tried:
src/
|--app/
   |--demo/
      |--(wrapper)
         |--[id]
            |--layout.tsx
            |--page.tsx
      |--page.tsx

and
src/
|--app/
   |--demo/
      |--[id]
         |--(wrapper)
            |--layout.tsx
            |--page.tsx
      |--page.tsx

without any luck.

The layout.tsx file for the dynamic routes is:
import { Inter } from "next/font/google";
import React from "react";

const inter = Inter({ subsets: ["latin"] });

export default function Amk({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  return (
    <html lang="en">
      <body className={inter.className}>{children}</body>
    </html>
  );
}
Answered by Cape lion
I did this to solve it https://nextjs.org/docs/app/building-your-application/routing/route-groups#creating-multiple-root-layouts don't know if you could do it without making two logical groups
View full answer

2 Replies

Cape lionOP
I did this to solve it https://nextjs.org/docs/app/building-your-application/routing/route-groups#creating-multiple-root-layouts don't know if you could do it without making two logical groups
Answer
joulev
You have to use route groups