Special files

_app.tsx and _document.tsx are special files in pages/. They are optional for the developer: If we don't provide/implement them, Next.js provides them in their default version.

_app.tsx

It serves as a global wrapper: it matches every routes.

import global stylesheets

It is the designated file to import global stylesheets, which Next.js only allows in this file:

import "../styles/global.css"

load local fonts

We may import and expose a local font: see Expose a local font.

favicon

We can switch between separate favicon dynamically.

boilerplate

We must add some boilerplate: The file must have a default export and feed pageProps to Component.

export default function App({ Component, pageProps }: AppProps) {
    return (
        <>
            <Component {...pageProps} />
        </>
    )
}

_document.tsx

It serves a limited role. Since we have control over the <html> element, we can

add the lang attribute.
import Google fonts outside of Next.js control.
import a static favicon.

Next.js does not expose an index.html file. _document.tsx is the only place where we have direct control over the <html> and <body> elements, though technically we rely on <Html> and other Next.js provided wrappers, and the content we set in <Head> is not exhaustive.

import { Html, Head, Main, NextScript } from "next/document"
const FAVICON_URL = "/favicon.ico"

export default function Document() {
    return (
        <Html lang="en">
            <Head>
                <link
                    href="https://fonts.googleapis.com/css2?family=PT+Mono&display=swap"
                    rel="stylesheet"
                />
                <link rel="icon" href={FAVICON_URL} />
            </Head>
            <body>
                <Main />
                <NextScript />
            </body>
        </Html>
    )
}

Special files

_app.tsx and _document.tsx are special files in pages/. They are optional for the developer: If we don't provide/implement them, Next.js provides them in their default version.

_app.tsx

It serves as a global wrapper: it matches every routes.

import global stylesheets

It is the designated file to import global stylesheets, which Next.js only allows in this file:

import "../styles/global.css"

load local fonts

We may import and expose a local font: see Expose a local font.

favicon

We can switch between separate favicon dynamically.

boilerplate

We must add some boilerplate: The file must have a default export and feed pageProps to Component.

export default function App({ Component, pageProps }: AppProps) { return ( <> <Component {...pageProps} /> </> ) }

_document.tsx

It serves a limited role. Since we have control over the <html> element, we can

add the lang attribute.

import Google fonts outside of Next.js control.

import a static favicon.

import { Html, Head, Main, NextScript } from "next/document" const FAVICON_URL = "/favicon.ico" export default function Document() { return ( <Html lang="en"> <Head> <link href="https://fonts.googleapis.com/css2?family=PT+Mono&display=swap" rel="stylesheet" /> <link rel="icon" href={FAVICON_URL} /> </Head> <body> <Main /> <NextScript /> </body> </Html> ) }