وثيقة مخصصة

يمكن لوثيقة Document المخصصة تحديث علامات <html> و <body> المستخدمة في عرض الصفحة.

للتجاوز عن الوثيقة الافتراضية، أنشئ ملف pages/_document كما هو موضح أدناه:

import { Html, Head, Main, NextScript } from 'next/document'

export default function Document() {
  return (
    <Html lang="en">
      <Head />
      <body>
        <Main />
        <NextScript />
      </body>
    </Html>
  )
}

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 لدعم العرض من جانب الخادم (SSR). هذا غير مطلوب لدعم 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

    // تشغيل منطق عرض React بشكل متزامن
    ctx.renderPage = () =>
      originalRenderPage({
        // مفيد لتفعيل شجرة React كاملة
        enhanceApp: (App) => App,
        // مفيد لتفعيل على أساس كل صفحة
        enhanceComponent: (Component) => Component,
      })

    // تشغيل `getInitialProps` الأصلي، الذي يتضمن الآن `renderPage` المخصص
    const initialProps = await Document.getInitialProps(ctx)

    return initialProps
  }

  render() {
    return (
      <Html lang="en">
        <Head />
        <body>
          <Main />
          <NextScript />
        </body>
      </Html>
    )
  }
}

export default MyDocument

import Document, { Html, Head, Main, NextScript } from 'next/document'

class MyDocument extends Document {
  static async getInitialProps(ctx) {
    const originalRenderPage = ctx.renderPage

    // تشغيل منطق عرض React بشكل متزامن
    ctx.renderPage = () =>
      originalRenderPage({
        // مفيد لتفعيل شجرة React كاملة
        enhanceApp: (App) => App,
        // مفيد لتفعيل على أساس كل صفحة
        enhanceComponent: (Component) => Component,
      })

    // تشغيل `getInitialProps` الأصلي، الذي يتضمن الآن `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.

محاذير

تخصيص renderPage

On this page

تخصيص `renderPage`