next critical

次の批判的>

次に重要なのは、重要なCSSを使用してWebサイトの速度を向上させるプラグインです。

使い方

インストール：

 npm i -S next-critical

_document.jsで重要なCSSを使用してカスタムヘッドコンポーネントを作成します。

 import Document , { Html , Head , Main , NextScript } from 'next/document'
import CustomHead from 'next-critical'
import { readFileSync } from 'fs'
import * as React from 'react'

let styleSheetContent : string = ''

export default class MyDocument extends Document {
  // @ts-ignore
  static async getInitialProps ( ctx ) {
    const initialProps = await Document . getInitialProps ( ctx )

    // Your critical css file
    const filePath = `./src/styles/critical.css`
    styleSheetContent = readFileSync ( filePath , 'utf8' )

    return { ... initialProps }
  }

  render ( ) {
    const CriticalCssHead = CustomHead ( Head , styleSheetContent )

    return (
      < Html >
        < CriticalCssHead />
        < body >
          < Main />
          < NextScript />
        </ body >
      </ Html >
    )
  }
} 

関連リンク

Zeit/next.js-サーバーレンダリングのReactアプリケーションのフレームワーク