meta: upgrade to next.js 16

.prettierignore

@@ -10,6 +10,7 @@ package-lock.json
 # Next.js Build Output
 .next
 build
+next-env.d.ts
 
 # Test Runner
 junit.xml

apps/site/app/[locale]/error.tsx

@@ -1,6 +1,5 @@
 'use client';
 
-import { ArrowRightIcon } from '@heroicons/react/24/solid';
 import { useTranslations } from 'next-intl';
 import type { FC } from 'react';
 
@@ -12,17 +11,17 @@ const ErrorPage: FC<{ error: Error }> = () => {
 
   return (
     <GlowingBackdropLayout kind="default">
-      500
+      <span>500</span>
+
       <h1 className="special -mt-4 text-center">
         {t('layouts.error.internalServerError.title')}
       </h1>
+
       <p className="-mt-4 max-w-sm text-center text-lg">
         {t('layouts.error.internalServerError.description')}
       </p>
-      <Button href="/">
-        {t('layouts.error.backToHome')}
-        <ArrowRightIcon />
-      </Button>
+
+      <Button href="/">{t('layouts.error.backToHome')}</Button>
     </GlowingBackdropLayout>
   );
 };

apps/site/app/[locale]/not-found.tsx

@@ -1,6 +1,5 @@
 'use server';
 
-import { ArrowRightIcon } from '@heroicons/react/24/solid';
 import { getTranslations } from 'next-intl/server';
 import type { FC } from 'react';
 
@@ -27,10 +26,7 @@ const NotFoundPage: FC = async () => {
         {t('layouts.error.notFound.description')}
       </p>
 
-      <Button href="/">
-        {t('layouts.error.backToHome')}
-        <ArrowRightIcon />
-      </Button>
+      <Button href="/">{t('layouts.error.backToHome')}</Button>
     </GlowingBackdropLayout>
   );
 };

apps/site/components/withNodeRelease.tsx

@@ -14,20 +14,15 @@ type WithNodeReleaseProps = {
 // Note that Hooks cannot be used in a RSC async component
 // Async Components do not get re-rendered at all.
 const WithNodeRelease: FC<WithNodeReleaseProps> = async ({
-  status,
+  status: statuses,
   children: Component,
 }) => {
-  const releaseData = await provideReleaseData();
-
-  let matchingRelease: NodeRelease | undefined;
-  for (const statusItem of Array.isArray(status) ? status : [status]) {
-    matchingRelease = releaseData.find(
-      release => release.status === statusItem
-    );
-    if (matchingRelease) {
-      break;
-    }
-  }
+  const releases = await provideReleaseData();
+
+  const matchingRelease = [statuses]
+    .flat()
+    .map(status => releases.find(release => release.status === status))
+    .find(Boolean);
 
   if (matchingRelease) {
     return <Component release={matchingRelease} />;

apps/site/eslint.config.js

@@ -12,7 +12,7 @@ export default baseConfig.concat([
 
   react.configs.flat['jsx-runtime'],
   hooks.configs['recommended-latest'],
-  next.flatConfig.coreWebVitals,
+  next.configs['core-web-vitals'],
   mdx.flatCodeBlocks,
 
   // Type-checking

apps/site/mdx/plugins.mjs

@@ -15,6 +15,20 @@ import remarkTableTitles from '../util/table';
 // Reference: https://github.com/nodejs/nodejs.org/pull/7896#issuecomment-3009480615
 const OPEN_NEXT_CLOUDFLARE = 'Cloudflare' in global;
 
+// Shiki **must** be a singleton, otherwise multiple instances drastically reduce performance
+const singletonShiki = rehypeShikiji({
+  // We use the faster WASM engine on the server instead of the web-optimized version.
+  //
+  // Currently we fall back to the JavaScript RegEx engine
+  // on Cloudflare workers because `shiki/wasm` requires loading via
+  // `WebAssembly.instantiate` with custom imports, which Cloudflare doesn't support
+  // for security reasons.
+  wasm: !OPEN_NEXT_CLOUDFLARE,
+
+  // TODO(@avivkeller): Find a way to enable Twoslash w/ a VFS on Cloudflare
+  twoslash: !OPEN_NEXT_CLOUDFLARE,
+});
+
 /**
  * Provides all our Rehype Plugins that are used within MDX
  */
@@ -25,21 +39,7 @@ export const rehypePlugins = [
   [rehypeAutolinkHeadings, { behavior: 'wrap' }],
   // Transforms sequential code elements into code tabs and
   // adds our syntax highlighter (Shikiji) to Codeboxes
-  [
-    rehypeShikiji,
-    {
-      // We use the faster WASM engine on the server instead of the web-optimized version.
-      //
-      // Currently we fall back to the JavaScript RegEx engine
-      // on Cloudflare workers because `shiki/wasm` requires loading via
-      // `WebAssembly.instantiate` with custom imports, which Cloudflare doesn't support
-      // for security reasons.
-      wasm: !OPEN_NEXT_CLOUDFLARE,
-
-      // TODO(@avivkeller): Find a way to enable Twoslash w/ a VFS on Cloudflare
-      twoslash: !OPEN_NEXT_CLOUDFLARE,
-    },
-  ],
+  () => singletonShiki,
 ];
 
 /**

apps/site/next-env.d.ts

@@ -1,7 +1,7 @@
 /// <reference types="next" />
 /// <reference types="next/image-types/global" />
 /// <reference types="next/navigation-types/compat/navigation" />
-/// <reference path="./.next/types/routes.d.ts" />
+import "./.next/types/routes.d.ts";
 
 // NOTE: This file should not be edited
 // see https://nextjs.org/docs/app/api-reference/config/typescript for more information.

apps/site/next.config.mjs

@@ -6,7 +6,8 @@ import { redirects, rewrites } from './next.rewrites.mjs';
 
 /** @type {import('next').NextConfig} */
 const nextConfig = {
-  allowedDevOrigins: ['10.1.1.232'],
+  // Full Support of React 18 SSR and Streaming
+  reactCompiler: true,
   // We don't want to redirect with trailing slashes
   skipTrailingSlashRedirect: true,
   // We allow the BASE_PATH to be overridden in case that the Website
@@ -75,10 +76,7 @@ const nextConfig = {
   // Enable statically typed links
   // @see https://nextjs.org/docs/app/api-reference/config/typescript#statically-typed-links
   typedRoutes: true,
-  // We don't want to run ESLint Checking on Production Builds
-  // as we already check it on the CI within each Pull Request
-  // we also configure ESLint to run its lint checking on all files
-  eslint: { ignoreDuringBuilds: true },
+  // Experimental Flags
   experimental: {
     useCache: true,
     // Ensure that server-side code is also minified
@@ -105,6 +103,8 @@ const nextConfig = {
       'tailwindcss',
       'shiki',
     ],
+    // Faster Development Servers with Turbopack
+    turbopackFileSystemCacheForDev: true,
   },
   // If we're building for the Cloudflare deployment we want to set
   // an appropriate deploymentId (needed for skew protection)

apps/site/package.json

@@ -3,17 +3,17 @@
   "type": "module",
   "scripts": {
     "prebuild": "node --run build:blog-data",
-    "build": "node --run build:default -- --turbo",
+    "build": "node --run build:default -- --turbopack",
     "build:blog-data": "cross-env NODE_NO_WARNINGS=1 node ./scripts/blog-data/generate.mjs",
     "build:blog-data:watch": "node --watch --watch-path=pages/en/blog ./scripts/blog-data/generate.mjs",
     "build:default": "cross-env NODE_NO_WARNINGS=1 next build",
     "cloudflare:build:worker": "OPEN_NEXT_CLOUDFLARE=true opennextjs-cloudflare build",
     "cloudflare:deploy": "opennextjs-cloudflare deploy",
     "cloudflare:preview": "wrangler dev",
     "predeploy": "node --run build:blog-data",
-    "deploy": "cross-env NEXT_PUBLIC_STATIC_EXPORT=true node --run build:default -- --turbo",
+    "deploy": "cross-env NEXT_PUBLIC_STATIC_EXPORT=true node --run build:default -- --turbopack",
     "predev": "node --run build:blog-data",
-    "dev": "cross-env NODE_NO_WARNINGS=1 next dev --turbo",
+    "dev": "cross-env NODE_NO_WARNINGS=1 next dev --turbopack",
     "lint": "node --run lint:js && node --run lint:css && node --run lint:md",
     "lint:fix": "node --run lint:js:fix && node --run lint:css:fix && node --run lint:md:fix",
     "lint:css": "stylelint \"**/*.css\" --allow-empty-input --cache --cache-strategy=content --cache-location=.stylelintcache",
@@ -60,7 +60,7 @@
     "github-slugger": "~2.0.0",
     "gray-matter": "~4.0.3",
     "mdast-util-to-string": "^4.0.0",
-    "next": "15.5.4",
+    "next": "16.0.0",
     "next-intl": "~4.3.11",
     "next-themes": "~0.4.6",
     "postcss-calc": "~10.1.1",
@@ -81,16 +81,17 @@
   },
   "devDependencies": {
     "@flarelabs-net/wrangler-build-time-fs-assets-polyfilling": "^0.0.1",
-    "@next/eslint-plugin-next": "15.5.4",
+    "@next/eslint-plugin-next": "16.0.0",
     "@node-core/remark-lint": "workspace:*",
     "@opennextjs/cloudflare": "^1.6.4",
     "@playwright/test": "^1.54.1",
     "@testing-library/user-event": "~14.6.1",
     "@types/mdast": "^4.0.4",
     "@types/mdx": "^2.0.13",
     "@types/semver": "~7.7.1",
+    "babel-plugin-react-compiler": "^1.0.0",
     "dedent": "^1.6.0",
-    "eslint-config-next": "15.5.4",
+    "eslint-config-next": "16.0.0",
     "eslint-plugin-mdx": "~3.6.2",
     "eslint-plugin-react": "~7.37.5",
     "eslint-plugin-react-hooks": "^5.2.0",

apps/site/pages/404.tsx

@@ -0,0 +1 @@
+export default () => null;

apps/site/pages/500.tsx

@@ -0,0 +1 @@
+export default () => null;

apps/site/redirects.json

@@ -351,6 +351,14 @@
     {
       "source": "/:locale/download/package-manager/all",
       "destination": "/:locale/download/archive/current"
+    },
+    {
+      "source": "/404",
+      "destination": "/"
+    },
+    {
+      "source": "/500",
+      "destination": "/"
     }
   ],
   "internal": []

apps/site/tsconfig.json

@@ -12,7 +12,7 @@
     "moduleResolution": "Bundler",
     "resolveJsonModule": true,
     "isolatedModules": true,
-    "jsx": "preserve",
+    "jsx": "react-jsx",
     "incremental": true,
     "plugins": [
       {
@@ -33,7 +33,8 @@
     "**/*.tsx",
     // Explicitly include since the globs won't match the `.`
     ".stylelintrc.mjs",
-    ".next/types/**/*.ts"
+    ".next/types/**/*.ts",
+    ".next/dev/types/**/*.ts"
   ],
   "exclude": ["node_modules", ".next"]
 }

package.json

@@ -42,11 +42,11 @@
     "@eslint/js": "~9.36.0",
     "@reporters/github": "^1.11.0",
     "@testing-library/react": "~16.3.0",
-    "cross-env": "^10.0.0",
+    "cross-env": "^10.1.0",
     "eslint": "~9.36.0",
     "eslint-import-resolver-typescript": "~4.4.4",
     "eslint-plugin-import-x": "~4.16.1",
-    "globals": "^16.3.0",
+    "globals": "^16.4.0",
     "prettier": "3.6.2",
     "prettier-plugin-tailwindcss": "0.6.14",
     "typescript": "catalog:",