Next.js / page.tsx & layout.tsx #70909

tobiholic · 2024-10-07T14:41:18Z

tobiholic
Oct 7, 2024

Summary

Hi all!

Probably a simple question, but I am stuck here. In my next.js project, I created a root layout.tsx file:

export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  return (
    <html lang="de">
      <body className={`${inter.className}`}>
        <QueryClientProvider>
          <Theme accentColor="orange">
            <NavBar />
            <main>{children}</main>
            <footer>
              <Footer />
            </footer>
          </Theme>
        </QueryClientProvider>
      </body>
    </html>
  );
}

Works for all pages fine. But now, for my login/page.tsx, I want to create a different layout (without the Navbar and Footer). As I understand the documentation, when creating a login/layout.tsx file, it should overwrite the root layout? But it does not, still having a Navbar in in my login/page.tsx.
login/layout.tsx:

import React, { PropsWithChildren } from 'react';

const LoginLayout = ({ children }: PropsWithChildren) => {
  return <div>{children}</div>;
};

export default LoginLayout;

Anyone an idea? Not really want to delete the Navbar of my route/layout.tsx and define for every path an extra layout.tsx file.

Cheers for any help!!

Tobi

icyJoseph · 2024-10-07T19:54:49Z

icyJoseph
Oct 7, 2024

Layouts can wrap other layouts, as their are nested in your file directory:

By default, layouts in the folder hierarchy are nested, which means they wrap child layouts via their children prop. You can nest layouts by adding layout.js inside specific route segments (folders).

https://nextjs.org/docs/app/building-your-application/routing/pages#nesting-layouts

What you need is a route group, to opt out from the root layout. https://nextjs.org/docs/app/building-your-application/routing/route-groups. See this part:

Even though routes inside (marketing) and (shop) share the same URL hierarchy, you can create a different layout for each group by adding a layout.js file inside their folders.

0 replies

tobiholic · 2024-10-16T11:02:10Z

tobiholic
Oct 16, 2024
Author

Another Question to this topic:

I structured my app now like following:

(APP)/
-> main structure
page.tsx (homepage)
not-found.tsx

(AUTH)/
-> files for auth (login, logout)
layout.tsx (defining a layout for my auth pages)
not-found.tsx

Like this, I can freely design layouts for both root layouts. But my not-found.tsx files are not working. (Template from Vercel is shown) Anyone knows why? When I define them in my /app root again, the layout file will overwrite the (APP) and (AUTH) file. Hope someone has an idea how I can keep this structure and still define my own style for not-found.tsx.

0 replies

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Next.js / page.tsx & layout.tsx #70909

{{title}}

{{editor}}'s edit

{{editor}}'s edit

Replies: 2 comments

{{title}}

{{title}}

Select a reply

Next.js / page.tsx & layout.tsx #70909

tobiholic Oct 7, 2024

Summary

Replies: 2 comments

icyJoseph Oct 7, 2024

tobiholic Oct 16, 2024 Author

Another Question to this topic:

tobiholic
Oct 7, 2024

icyJoseph
Oct 7, 2024

tobiholic
Oct 16, 2024
Author