Next.js Discord

Discord Forum

Conditional Page Layout

Unanswered
California Towhee posted this in #help-forum
Open in Discord
California TowheeOP
is there a way to do this
HomePage.getLayout = (page) => <AppLayout page={page} withCardLinks />;

in app directory ?

5 Replies

California TowheeOP
but what if have 4 pages like about, contact,help and faqs and i want 2 of them to be rendered with the root layout like with header, footer and sidebar
with this method we were able do to conditional layout rendering
HomePage.getLayout = (page) => <AppLayout page={page} withCardLinks />;
is there any another way with the app router to achieve this same thing ?
Giant panda
Read the docs about route groups
They exist to separate reusable layouts
Asiatic Lion
You can do stuff like

(site)/layout.tsx
(site)/about/page.tsx
(site)/faqs/page.tsx
(support)/layout.tsx
(support)/help/page.tsx
(support)/contact/page.tsx
Or how else you want to structure is. But as said, it's all in the docs