Inline the CSS for improved first paint performance (#81)

* Upgrade Next.js from 9.1.2 to 9.5.3 * Inline the CSS for improved first paint performance * Change ENV to NODE_ENV Possibly the CSS was not minified due to this
koodiklinikka · Sep 30, 2020 · 0eba06f · 0eba06f
1 parent 9b08b2b
commit 0eba06f
Show file tree

Hide file tree

Showing 3 changed files with 25 additions and 5 deletions.
diff --git a/package.json b/package.json
@@ -7,8 +7,8 @@
   "scripts": {
     "start": "next",
     "build": "next build && next export",
-    "dev": "SERVER=http://localhost:9000/ ENV=development next",
-    "prod": "ENV=production next build && next export",
+    "dev": "SERVER=http://localhost:9000/ NODE_ENV=development next",
+    "prod": "NODE_ENV=production next build && next export",
     "lint": "eslint --ext .jsx --ext .js .",
     "prettify": "prettier --write components pages styles"
   },
@@ -21,7 +21,7 @@
     "font-awesome": "^4.7.0",
     "less": "^3.10.3",
     "lodash": "^4.17.15",
-    "next": "^9.1.2",
+    "next": "^9.5.3",
     "next-fonts": "^1.4.0",
     "parse-github-event": "^1.1.3",
     "react": "^16.11.0",

diff --git a/pages/_document.tsx b/pages/_document.tsx
@@ -3,6 +3,26 @@ import Document, { Html, Head, Main, NextScript } from "next/document";
 import { Footer } from "../components/Footer";
 import Fader from "../components/Fader";
 import ReactGA from "react-ga";
+import fs from "fs";
+import path from "path";
+
+class CustomNextHead extends Head {
+  // TODO: This might not be needed if Next.js implements built-in support
+  // https://github.com/zeit/next-plugins/issues/364
+  getCssLinks({ allFiles }) {
+    return allFiles
+      .filter(file => file.endsWith(".css"))
+      .map(file => (
+        <style
+          key={file}
+          nonce={this.props.nonce}
+          dangerouslySetInnerHTML={{
+            __html: fs.readFileSync(path.join(".next", file), "utf-8"),
+          }}
+        />
+      ));
+  }
+}
 
 function trackPageView() {
   if (location.hostname === "localhost" || location.hostname === "127.0.0.1") {
@@ -29,7 +49,7 @@ class MyDocument extends Document {
   render() {
     return (
       <Html lang="fi">
-        <Head />
+        <CustomNextHead />
         <body>
           <div className="site">
             <div className="container">

diff --git a/yarn.lock b/yarn.lock
@@ -4144,7 +4144,7 @@ next-tick@~1.0.0:
   resolved "https://registry.yarnpkg.com/next-tick/-/next-tick-1.0.0.tgz#ca86d1fe8828169b0120208e3dc8424b9db8342c"
   integrity sha1-yobR/ogoFpsBICCOPchCS524NCw=
 
-next@^9.1.2:
+next@^9.5.3:
   version "9.5.3"
   resolved "https://registry.yarnpkg.com/next/-/next-9.5.3.tgz#7af5270631f98d330a7f75a6e8e1ac202aa155e2"
   integrity sha512-DGrpTNGV2RNMwLaSzpgbkbaUuVk30X71/roXHS10isSXo2Gm+qWcjonDyOxf1KmOvHZRHA/Fa+LaAR7ysdYS3A==