Upgrade to Next 12

next.config.js

@@ -10,59 +10,6 @@ const SentryWebpackPluginOptions = {
   silent: true,
 };
 
-// https://securityheaders.com
-// https://csp-evaluator.withgoogle.com/
-const ContentSecurityPolicy = `
-  default-src 'self';
-  script-src 'self' 'unsafe-eval' 'unsafe-inline' *.twitter.com https://www.googletagmanager.com https://www.google-analytics.com https://dbdiagram.io;
-  child-src *.youtube.com *.google.com *.twitter.com  https://codepen.io https://dbdiagram.io;
-  style-src 'self' 'unsafe-inline' *.googleapis.com;
-  img-src * blob: data: www.googletagmanager.com;
-  media-src 'self';
-  connect-src *;
-  font-src 'self';
-  object-src 'none';
-  worker-src 'self' *.youtube.com *.google.com *.twitter.com;
-`;
-const securityHeaders = [
-  // https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP
-  {
-    key: "Content-Security-Policy",
-    value: ContentSecurityPolicy.replace(/\n/g, ""),
-  },
-  // https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Referrer-Policy
-  {
-    key: "Referrer-Policy",
-    value: "origin-when-cross-origin",
-  },
-  // https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/X-Frame-Options
-  {
-    key: "X-Frame-Options",
-    value: "SAMEORIGIN",
-  },
-  // https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/X-Content-Type-Options
-  {
-    key: "X-Content-Type-Options",
-    value: "nosniff",
-  },
-  // https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/X-DNS-Prefetch-Control
-  {
-    key: "X-DNS-Prefetch-Control",
-    value: "on",
-  },
-  // https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Strict-Transport-Security
-  {
-    key: "Strict-Transport-Security",
-    value: "max-age=31536000; includeSubDomains; preload",
-  },
-  // https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Feature-Policy
-  // Opt-out of Google FLoC: https://amifloced.org/
-  {
-    key: "Permissions-Policy",
-    value: "interest-cohort=()",
-  },
-];
-
 const isDevelopment = process.env.NODE_ENV === "development";
 
 // @ts-check
@@ -71,6 +18,7 @@ const isDevelopment = process.env.NODE_ENV === "development";
  * @type {import('next').NextConfig}
  **/
 const nextConfig = {
+  swcMinify: true,
   reactStrictMode: true,
   pageExtensions: ["ts", "tsx", "md", "mdx"],
   images: {
@@ -89,15 +37,6 @@ const nextConfig = {
       "s3.us-west-2.amazonaws.com",
     ],
   },
-  webpack5: true,
-  async headers() {
-    return [
-      {
-        source: "/(.*)",
-        headers: securityHeaders,
-      },
-    ];
-  },
   pwa: {
     dest: "public",
     runtimeCaching,

package.json

@@ -4,7 +4,7 @@
   "private": true,
   "scripts": {
     "start": "next-remote-watch ./data",
-    "dev": "yarn run clean && TAILWIND_MODE=watch next dev",
+    "dev": "TAILWIND_MODE=watch next dev",
     "build": "next build && node ./scripts/generate-sitemap",
     "clean": "rm -rf ./.next",
     "serve": "next start",
@@ -35,7 +35,7 @@
     "image-size": "0.9.7",
     "mdx-bundler": "^6.0.1",
     "mdx-embed": "^0.0.19",
-    "next": "^11.1.2",
+    "next": "^12.0.1",
     "next-auth": "4.0.0-beta.2",
     "next-pwa": "^5.3.1",
     "next-seo": "4.23.0",

pages/_middleware.ts

@@ -0,0 +1,28 @@
+import type { NextFetchEvent, NextRequest } from "next/server";
+import { NextResponse } from "next/server";
+
+export function middleware(req: NextRequest, ev: NextFetchEvent) {
+  const ContentSecurityPolicy = `
+  default-src 'self';
+  script-src 'self' 'unsafe-eval' 'unsafe-inline' *.twitter.com https://www.googletagmanager.com https://www.google-analytics.com https://dbdiagram.io;
+  child-src *.youtube.com *.google.com *.twitter.com  https://codepen.io https://dbdiagram.io;
+  style-src 'self' 'unsafe-inline' *.googleapis.com;
+  img-src * blob: data: www.googletagmanager.com;
+  media-src 'self';
+  connect-src *;
+  font-src 'self';
+  object-src 'none';
+  worker-src 'self' *.youtube.com *.google.com *.twitter.com;
+  `;
+
+  const response = NextResponse.next();
+
+  response.headers.set("Content-Security-Policy", ContentSecurityPolicy.replace(/\n/g, ""));
+  response.headers.set("Referrer-Policy", "origin-when-cross-origin");
+  response.headers.set("Strict-Transport-Security", "max-age=31536000; includeSubDomains; preload");
+  response.headers.set("X-Frame-Options", "SAMEORIGIN");
+  response.headers.set("X-Content-Type-Options", "nosniff");
+  response.headers.set("X-DNS-Prefetch-Control", "on");
+
+  return response;
+}

tsconfig.json

@@ -21,7 +21,8 @@
       "@/layouts/*": ["layouts/*"],
       "@/lib/*": ["lib/*"],
       "@/css/*": ["css/*"]
-    }
+    },
+    "incremental": true
   },
   "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
   "exclude": ["node_modules"]