Next-critical NPM

Next Critical⚡

Next Critical is a plug in that improve your web site speed with Critical CSS.

How to use

Install:

npm i -S next-critical

Create custom head component with your Critical CSS in _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>
    )
  }
}

next-critical v0.1.1

Next Critical⚡

How to use

Related links