Nokkio Documentation: Page Module API

Nokkio begins rendering your application on the server, taking advantage of React 18's streaming SSR capabilities. Each Nokkio application defines a pages/_document.js file that controls how the HTML shell is constructed during that initial render.

The default root document looks something like this:

pages/_document.js

import { Html, Head, Body } from '@nokkio/doc';

export default function Doc({ children }) {
  return (
    <Html>
      <Head />
      <Body>
        <div id="main">{children}</div>
      </Body>
    </Html>
  );
}

At minimum, the root document must use the Html, Head, and Body components provided by @nokkio/doc, and must define an element with id="main" where the Nokkio application will be rendered.

Use cases

Loading a custom font

The root document is an ideal location to load a custom font that you use across your application. The following example loads Roboto from Google Fonts:

pages/_document.js

import { Html, Head, Body } from "@nokkio/doc";

export default function Doc({ children }) {
  return (
    <Html>
      <Head>
        <link
          rel="preconnect"
          href="https://fonts.googleapis.com"
        />
        <link
          rel="preconnect"
          href="https://fonts.gstatic.com"
          crossorigin
        />
        <link
          href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;900&display=swap"
          rel="stylesheet"
        />
      </Head>
      <Body>
        <div id="main">{children}</div>
      </Body>
    </Html>
  );
}

Setting default metadata

The root document can also be used to set default meta tags for your application. This example sets a default title and description for the application, which will be used when the current page module does not define a title or description in its getPageMetadata function:

pages/_document.js

import { Html, Head, Body } from '@nokkio/doc';

export default function Doc({ children }) {
  return (
    <Html>
      <Head>
        <title>My nokkio app</title>
        <meta name="description" content="Welcome to my app" />
      </Head>
      <Body>
        <div id="main">{children}</div>
      </Body>
    </Html>
  );
}

For more on overriding this metadata at the page level, see the Page Module API.