The NextJS App Router migration guide says If you have an existing _app or _document file, you can copy the contents (e.g. global styles) to the root layout (app/layout.tsx)..
However, I couldn't find a good example. This is my real world example including Theme and Auth Providers, a NavBar and a Toaster.
NextJS v15
// layout.tsx (NextJS 15) import "@/src/app/globals.css"; import { NextAuthProvider, ThemeProvider } from "@/src/app/providers"; import { Accordion } from "@/src/components/accordion"; import { Toaster } from "@/src/components/ui/sonner"; import { cn } from "@/src/lib/utils"; import type { Metadata } from "next"; import { Geist, Geist_Mono } from "next/font/google"; const geistSans = Geist({ variable: "--font-geist-sans", subsets: ["latin"], }); const geistMono = Geist_Mono({ variable: "--font-geist-mono", subsets: ["latin"], }); export const metadata: Metadata = { title: "", description: "", }; export default function RootLayout({ children, }: Readonly<{ children: React.ReactNode; }>) { return ( <html lang="en" suppressHydrationWarning> <head /> <body className={cn( "min-h-screen bg-background font-sans antialiased", geistSans.variable, geistMono.className )} > <ThemeProvider attribute="class" defaultTheme="system" enableSystem disableTransitionOnChange > <NextAuthProvider> <main className="flex min-h-screen flex-col items-center md:p-24 p-4 w-full"> <Accordion /> <div className="w-full pt-4 mt-16 sm:mt-32 content-center space-y-4"> {children} </div> </main> </NextAuthProvider> <Toaster /> </ThemeProvider> </body> </html> ); } // page.tsx (NextJS 15) import { CardCompact } from "@/src/components/card-compact"; import Image from "next/image"; export default function Home() { return ( <section className="flex flex-col gap-8"> <CardCompact title="" description="" content={ <Image className="dark:invert" src="/next.svg" alt="Next.js logo" width={180} height={38} priority /> } /> </section> ); } NextJS v14
// _document.tsx (NextJS 14) import { Html, Head, Main, NextScript } from "next/document"; export default function Document() { return ( <Html lang="en"> <Head /> <body className="antialiased"> <Main /> <NextScript /> </body> </Html> ); } // _app.tsx (NextJS 14) import "@/styles/globals.css"; import type { AppProps } from "next/app"; export default function App({ Component, pageProps }: AppProps) { return <Component {...pageProps} />; } 
Top comments (0)