next critical

Kritis berikutnya⚡

Kritis berikutnya adalah steker yang meningkatkan kecepatan situs web Anda dengan CSS kritis.

Cara menggunakan

Memasang:

 npm i -S next-critical

Buat komponen kepala khusus dengan CSS kritis Anda di _document.js.

 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 >
    )
  }
} 

Tautan terkait

zeit/next.js - Kerangka kerja untuk aplikasi reaksi server -render