Пользовательский документ

Пользовательский Document может обновлять теги <html> и <body>, используемые для отображения Страницы.

Чтобы переопределить значение по умолчанию Document, создайте файл pages/_document, как показано ниже:

import { Html, Head, Main, NextScript } from 'next/document'
 
export default function Document() {
  return (
    <Html lang="en">
      <Head />
      <body>
        <Main />
        <NextScript />
      </body>
    </Html>
  )
}

Важно знать

_document отображается только на сервере, поэтому обработчики событий, такие как onClick, нельзя использовать в этом файле.

<Html>, <Head />, <Main /> и <NextScript /> необходимы для правильного отображения страницы.

Ограничения

Компонент <Head />, используемый в _document, отличается от next/head. Компонент <Head /> в этом случае следует использовать только для кода <head>, который является общим для всех страниц. Во всех остальных случаях, таких как теги <title>, рекомендуется использовать next/head на ваших страницах или компонентах.
Компоненты React за пределами <Main /> не будут инициализированы браузером. Не добавляйте здесь логику приложения или пользовательский CSS (например, styled-jsx). Если вам нужны общие компоненты на всех страницах (например, меню или панель инструментов), прочитайте раздел Макеты вместо этого.
Document в настоящее время не поддерживает методы извлечения данных Next.js, такие как Методы извлечения данных getStaticProps или getServerSideProps.

Настройка renderPage

Настройка renderPage является продвинутой и необходима только для библиотек, таких как CSS-in-JS, для поддержки рендеринга на стороне сервера. Это не нужно для встроенной поддержки styled-jsx.

Не рекомендуется использовать этот шаблон. Вместо этого рассмотрите возможность постепенного внедрения App Router, который позволяет вам легче получать данные для страниц и макетов.

import Document, {
  Html,
  Head,
  Main,
  NextScript,
  DocumentContext,
  DocumentInitialProps,
} from 'next/document'
 
class MyDocument extends Document {
  static async getInitialProps(
    ctx: DocumentContext
  ): Promise<DocumentInitialProps> {
    const originalRenderPage = ctx.renderPage
 
    // Run the React rendering logic synchronously
    ctx.renderPage = () =>
      originalRenderPage({
        // Useful for wrapping the whole react tree
        enhanceApp: (App) => App,
        // Useful for wrapping in a per-page basis
        enhanceComponent: (Component) => Component,
      })
 
    // Run the parent `getInitialProps`, it now includes the custom `renderPage`
    const initialProps = await Document.getInitialProps(ctx)
 
    return initialProps
  }
 
  render() {
    return (
      <Html lang="en">
        <Head />
        <body>
          <Main />
          <NextScript />
        </body>
      </Html>
    )
  }
}
 
export default MyDocument

Важно знать

getInitialProps в _document не вызывается во время переходов на стороне клиента.

Объект ctx для _document эквивалентен объекту, полученному в getInitialProps, с добавлением renderPage.

© 2024 Vercel, Inc.
Licensed under the MIT License.
https://nextjs.org/docs/pages/building-your-application/routing/custom-document