Nextjs Root Layout

Unanswered

Shawty posted this in #help-forum

2023-09-20T04:33:30.000Z

it seems that the root layout is doing nothing:

code:

import '../pages/globals.css'
import type {Metadata} from 'next'
import {Inter} from 'next/font/google'
import Footer from "@/components/Footer";

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

export const metadata: Metadata = {
    title: 'Moody',
    description: 'Elevate Your Discord Experience with Advanced Features',
}

export default function RootLayout({
                                       children,
                                   }: {
    children: React.ReactNode
}) {
    console.log("ok")
    return (
        <html lang="en">
        <body className={inter.className}>{children}</body>
        </html>
    )
}

im trying to add fonts and etc and nothing changes. i also deleted the file and no error or anything so i dont think the file is even getting detected.

file path:

src/app/layout.tsx

11 Replies

@Shawty it seems that the root layout is doing nothing: code: ts import '../pages/globals.css' import type {Metadata} from 'next' import {Inter} from 'next/font/google' import Footer from "@/components/Footer"; const inter = Inter({subsets: ['latin']}) export const metadata: Metadata = { title: 'Moody', description: 'Elevate Your Discord Experience with Advanced Features', } export default function RootLayout({ children, }: { children: React.ReactNode }) { console.log("ok") return ( <html lang="en"> <body className={inter.className}>{children}</body> </html> ) } im trying to add fonts and etc and nothing changes. i also deleted the file and no error or anything so i dont think the file is even getting detected. file path: ts src/app/layout.tsx

@ts-ignore

2023-09-20T04:36:22.000Z

remove the .next folder and try again

ShawtyOP

2023-09-20T04:37:50.000Z

still no difference

@Shawty still no difference

@ts-ignore

2023-09-20T04:38:53.000Z

reinstall modules then and then restart, also reload the browser few times

ShawtyOP

2023-09-20T04:49:30.000Z

same thing

it works inside of _app.tsx tho?

but just not the body and html

European sprat

2023-09-20T05:06:35.000Z

What is the name of this file?

ShawtyOP

2023-09-20T06:17:01.000Z

layout.tsx

@Shawty layout.tsx

Clown

2023-09-20T06:45:48.000Z

Ok i might be derping out here but to me it seems you are confusing page router and app router logic.

There is no such thing as a root layout in page router. You have to wrap your entire application with the layout component manually if you want to use something like a root layout. Also the layout wouldnt contain something like <html> tags. IIRC pages uses <Head> tag and stuff.

Btw im saying all this because you mentioned _app.tsx which isnt a thing in App Router.