Next.js Discord

Discord Forum

next js app router layout works halfway.

Unanswered
BNK posted this in #help-forum
Open in Discord
BNKOP
When I refresh my page localhost:3000/pages/auth/...
my layout becomes secondary and my app layout becomes primary

6 Replies

BNKOP
after refresh :
/app/layout.tsx
import type { Metadata } from "next";
import { Inter } from "next/font/google";
import "./globals.css";
import logo from "./favicon.ico";
import NavBar from "@/components/NavBar";
const inter = Inter({ subsets: ["latin"] });

export const metadata: Metadata = {
  title: "Dot App",
  description: "Generated by create next app",
};
import { data } from "../data";

export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) 
{
  return (
    <html lang="en">
      <link rel="icon" href={logo.src} />
      <body className={inter.className && "min-h-screen w-full"}>
        <NavBar
          logo={true}
          title={metadata.title}
          naviagationList={data[0].items}
          gap={"md"}
        />
        {children}
      </body>
    </html>
  );
}
/app/pages/auth/layout.tsx
import { Inter } from "next/font/google";
import "../../globals.css";
import logo from "../../favicon.ico";
const inter = Inter({ subsets: ["latin"] });

interface AuthLayoutProps {
  children: any;
}



export function AuthLayout({ children } : Readonly<{
  children: React.ReactNode;
}>)
{
  return (
    <html lang="en">
      <link rel="icon" href={logo.src} />
      <body className={inter.className && "min-h-screen w-full"}>
        {children}
      </body>
    </html>
  );
}; 
export default AuthLayout;