Special pages

Next.js allows us to affect the way a website will be rendered by placing special handlers for certain items.

The first one is pages/_document.js, which allows us to define the surroundings of the page, such as the Head section. This could be useful to change the page title, add meta information or styles, and so on.

Here is a minimal example:

// pages/_document.jsimport Document, {Head, Main, NextScript} from 'next/document';export default class MyDocument extends Document {    render() {        return (            <html>            <Head>                <title>NextJS Condensed</title>            </Head>            <body>            <Main/>            <NextScript/>            </body>            </html>        )    }}

In this example, we've configured the very basic surroundings of the actual markup that will be injected in the page straight in ...

Get Next.js Quick Start Guide now with the O’Reilly learning platform.

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.