Upgrade to Next.js 16

.gitignore

@@ -11,6 +11,7 @@ node_modules
 # next.js
 /.next/
 /out/
+next-env.d.ts
 
 # production
 /build

next.config.js

@@ -15,11 +15,28 @@
 const nextConfig = {
   pageExtensions: ['jsx', 'js', 'ts', 'tsx', 'mdx', 'md'],
   reactStrictMode: true,
+  reactCompiler: true,
   experimental: {
     scrollRestoration: true,
-    reactCompiler: true,
   },
   env: {},
+  turbopack: {
+    resolveAlias: {
+      'use-sync-external-store/shim': 'react',
+      raf: require.resolve('./src/utils/rafShim.js'),
+
+      // Unfortunately not working at the moment
+      process: require.resolve('./src/utils/processShim.js'),
+
+      // ESLint depends on the CommonJS version of esquery,
+      // but Webpack loads the ESM version by default. This
+      // alias ensures the correct version is used.
+      //
+      // More info:
+      // https://github.com/reactjs/react.dev/pull/8115
+      esquery: 'esquery/dist/esquery.min.js',
+    },
+  },
   webpack: (config, {dev, isServer, ...options}) => {
     if (process.env.ANALYZE) {
       const {BundleAnalyzerPlugin} = require('webpack-bundle-analyzer');

package.json

@@ -7,8 +7,8 @@
     "analyze": "ANALYZE=true next build",
     "dev": "next-remote-watch ./src/content",
     "build": "next build && node --experimental-modules ./scripts/downloadFonts.mjs",
-    "lint": "next lint && eslint \"src/content/**/*.md\"",
-    "lint:fix": "next lint --fix && eslint \"src/content/**/*.md\" --fix",
+    "lint": "eslint .",
+    "lint:fix": "eslint . --fix",
     "format:source": "prettier --config .prettierrc --write \"{plugins,src}/**/*.{js,ts,jsx,tsx,css}\"",
     "nit:source": "prettier --config .prettierrc --list-different \"{plugins,src}/**/*.{js,ts,jsx,tsx,css}\"",
     "prettier": "yarn format:source",
@@ -35,8 +35,8 @@
     "classnames": "^2.2.6",
     "debounce": "^1.2.1",
     "github-slugger": "^1.3.0",
-    "next": "15.1.11",
-    "next-remote-watch": "^1.0.0",
+    "next": "16.1.0-canary.31",
+    "next-remote-watch": "^2.0.0",
     "parse-numeric-range": "^1.2.0",
     "react": "^19.0.0",
     "react-collapsed": "4.0.4",

src/utils/compileMDX.ts

@@ -106,6 +106,8 @@ export default async function compileMDX(
   const fakeRequire = (name: string) => {
     if (name === 'react/jsx-runtime') {
       return require('react/jsx-runtime');
+    } else if (name === 'react/jsx-dev-runtime') {
+      return require('react/jsx-dev-runtime');
     } else {
       // For each fake MDX import, give back the string component name.
       // It will get serialized later.

tsconfig.json

@@ -20,7 +20,7 @@
     "moduleResolution": "node",
     "resolveJsonModule": true,
     "isolatedModules": true,
-    "jsx": "preserve",
+    "jsx": "react-jsx",
     "baseUrl": "src",
     "incremental": true,
     "plugins": [