Skip to content

Use _document for shared <head> content #56

@oliverjam

Description

@oliverjam

week6-EMJA/pages/buy.js

Lines 10 to 21 in 9faafaa

<Head>
<title>Thank You 💕</title>
<meta name="description" content="" />
<link rel="icon" href="/favicon.ico" />
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" />
<link
href="https://fonts.googleapis.com/css2?family=Zen+Kurenaido&display=swap"
rel="stylesheet"
/>
</Head>

You're repeating yourself quite a bit on each page to ensure they all have the right fonts, favicon etc in the <head>. Next lets you customise the "surrounding HTML" (i.e. the bit outside of the main React app) by creating a pages/_document.js(just like your pages/_app.js).

You can put the stuff that's shared across all pages in here, and reserve <Head> usage for things unique to each page (like the title)

https://nextjs.org/docs/advanced-features/custom-document

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions