Next.js _document.js

10109 ワード
next.js JavaScript テキストリンク

_document.js


next.jsドキュメント 
import Document, { Html, Head, Main, NextScript } from 'next/document'

class MyDocument extends Document {
  static async getInitialProps(ctx) {
    const initialProps = await Document.getInitialProps(ctx)
    return { ...initialProps }
  }

  render() {
    return (
      <Html>
        <Head />
        <body>
          <Main />
          <NextScript />
        </body>
      </Html>
    )
  }
}

export default MyDocument
_document.jsの基本構造.
_document.jsは関数形式で記述されるものではなく、上述したように記述されるべきである.
_document.jsはpagesフォルダの下で生成されます.
import Document, { Html, Head, Main, NextScript } from 'next/document'

class MyDocument extends Document {
  static async getInitialProps(ctx) {
    const initialProps = await Document.getInitialProps(ctx)
    return { ...initialProps }
  }

  render() {
    return (
      <Html>
        <Head>
          <link
            href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css"
            rel="stylesheet"
          />
        </Head>
        <body>
          <Main />
          <NextScript />
        </body>
      </Html>
    )
  }
}

export default MyDocument
Headラベルを開き、tailwind cssのCND linkコードを貼り付けます.
次に、サイトのページソースを表示すると、headラベルに貼り付けられたリンクが表示されます.
import Document, { Html, Head, Main, NextScript } from 'next/document'

class MyDocument extends Document {
  static async getInitialProps(ctx) {
    const initialProps = await Document.getInitialProps(ctx)
    return { ...initialProps }
  }

  render() {
    return (
      <Html lang="ko">
        <Head>
          <link
            href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css"
            rel="stylesheet"
          />
        </Head>
        <body>
          <Main />
          <NextScript />
        </body>
      </Html>
    )
  }
}

export default MyDocument
言語コードを挿入することもできます.<!DOCTYPE html><html lang="ko"><head>...ページをクリックしてソースを表示すると、次のアプリケーションが表示されます.
今日の勉強
超エコで超高速なやつらの性能比較: Go vs Node.js (vs Vert.x)