fix: tighten App Router boundaries and metadata

Author: aurorascharff

.github/workflows/analyze.yml

@@ -42,16 +42,13 @@ jobs:
           key: ${{ runner.os }}-build-${{ env.cache-name }}
 
       - name: Build next.js app
-        # This project pins the webpack pipeline (see next.config.js): the custom
-        # webpack config and Sandpack's raw-loader imports aren't Turbopack-ready,
-        # and Next 16's `next build` defaults to Turbopack. Match the `build`/`analyze`
-        # npm scripts by forcing `--webpack`.
-        run: ./node_modules/.bin/next build --webpack
+        # Match the production Turbopack build so route-level diagnostics reflect
+        # the chunks users receive in production.
+        run: ./node_modules/.bin/next build
 
       # Measure the current build's bundle sizes (App Router-aware).
-      # See scripts/analyzeBundle.mjs — reads build-manifest.json + .next/static
-      # and sums gzipped sizes, since nextjs-bundle-analysis only understands the
-      # Pages Router and reports 0 B for the App Router.
+      # See scripts/analyzeBundle.mjs — reads build output and Turbopack's route
+      # diagnostics, since nextjs-bundle-analysis only understands Pages Router.
       - name: Analyze bundle
         run: node scripts/analyzeBundle.mjs report
 

.prettierignore

@@ -1 +1,2 @@
 src/content/**/*.md
+src/components/MDX/Sandpack/sandpack-rsc/sandbox-code/src/worker-bundle.dist.js

package.json

@@ -9,7 +9,7 @@
     "predev": "node scripts/buildRscWorker.mjs",
     "dev": "next dev",
     "prebuild:rsc": "node scripts/buildRscWorker.mjs",
-    "build": "node scripts/buildRscWorker.mjs && next build && node --experimental-modules ./scripts/downloadFonts.mjs && node ./scripts/generateOgImages.mjs",
+    "build": "node scripts/buildRscWorker.mjs && next build && node --experimental-modules ./scripts/downloadFonts.mjs && node ./scripts/generateOgImages.mjs && node ./scripts/validateMetadata.mjs",
     "lint": "eslint \"{src,plugins}/**/*.{js,jsx,ts,tsx}\" && eslint \"src/content/**/*.md\"",
     "lint:fix": "eslint --fix \"{src,plugins}/**/*.{js,jsx,ts,tsx}\" && eslint --fix \"src/content/**/*.md\"",
     "format:source": "prettier --config .prettierrc --write \"{plugins,src}/**/*.{js,ts,jsx,tsx,css}\"",
@@ -25,6 +25,7 @@
     "check-all": "npm-run-all prettier lint:fix tsc rss",
     "rss": "node scripts/generateRss.js",
     "deadlinks": "node scripts/deadLinkChecker.js",
+    "validate-metadata": "node scripts/validateMetadata.mjs",
     "copyright": "node scripts/copyright.js",
     "test:eslint-local-rules": "yarn --cwd eslint-local-rules test"
   },

scripts/analyzeBundle.mjs

@@ -59,6 +59,48 @@ function sumGroup(files) {
   return {raw, gzip, count: files.length};
 }
 
+function addRouteStats(stats) {
+  const routeStatsFile = path.join(
+    nextDir,
+    'diagnostics',
+    'route-bundle-stats.json'
+  );
+  if (!fs.existsSync(routeStatsFile)) return;
+
+  const routeStats = JSON.parse(fs.readFileSync(routeStatsFile, 'utf8'));
+  const representativeRoutes = {
+    'First-load JS: Home': '/',
+    'First-load JS: Learn': '/learn/[[...slug]]',
+    'First-load JS: Reference': '/reference/[[...slug]]',
+    'First-load JS: Community': '/community/[[...slug]]',
+    'First-load JS: Blog': '/blog/[[...slug]]',
+  };
+
+  for (const [label, route] of Object.entries(representativeRoutes)) {
+    const entry = routeStats.find((item) => item.route === route);
+    if (!entry) continue;
+    const files = entry.firstLoadChunkPaths
+      .map((file) => path.join(root, file))
+      .filter((file) => fs.existsSync(file));
+    stats[label] = sumGroup(files);
+  }
+}
+
+function addHtmlStats(stats) {
+  const representativePages = {
+    'HTML: Home': 'index.html',
+    'HTML: Effects guide': 'learn/synchronizing-with-effects.html',
+    'HTML: useState': 'reference/react/useState.html',
+  };
+
+  for (const [label, file] of Object.entries(representativePages)) {
+    const fullPath = path.join(nextDir, 'server', 'app', file);
+    if (fs.existsSync(fullPath)) {
+      stats[label] = sumGroup([fullPath]);
+    }
+  }
+}
+
 function report() {
   const manifest = JSON.parse(
     fs.readFileSync(path.join(nextDir, 'build-manifest.json'), 'utf8')
@@ -73,7 +115,7 @@ function report() {
   const jsFiles = walk(path.join(nextDir, 'static', 'chunks')).filter((f) =>
     f.endsWith('.js')
   );
-  const cssFiles = walk(path.join(nextDir, 'static', 'css')).filter((f) =>
+  const cssFiles = walk(path.join(nextDir, 'static')).filter((f) =>
     f.endsWith('.css')
   );
 
@@ -82,6 +124,8 @@ function report() {
     'Total JS': sumGroup(jsFiles),
     'Total CSS': sumGroup(cssFiles),
   };
+  addRouteStats(stats);
+  addHtmlStats(stats);
 
   fs.mkdirSync(analyzeDir, {recursive: true});
   fs.writeFileSync(statsFile, JSON.stringify(stats, null, 2));
@@ -110,7 +154,9 @@ function isNewFormat(obj) {
   const vals = obj && typeof obj === 'object' ? Object.values(obj) : [];
   return (
     vals.length > 0 &&
-    vals.every((v) => v && typeof v.gzip === 'number' && typeof v.count === 'number')
+    vals.every(
+      (v) => v && typeof v.gzip === 'number' && typeof v.count === 'number'
+    )
   );
 }
 

scripts/validateMetadata.mjs

@@ -0,0 +1,86 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import fs from 'fs';
+import path from 'path';
+import {fileURLToPath} from 'url';
+
+const root = path.resolve(path.dirname(fileURLToPath(import.meta.url)), '..');
+const appDir = path.join(root, '.next', 'server', 'app');
+
+function walk(dir) {
+  return fs.readdirSync(dir, {withFileTypes: true}).flatMap((entry) => {
+    const file = path.join(dir, entry.name);
+    return entry.isDirectory() ? walk(file) : [file];
+  });
+}
+
+function getHead(html) {
+  const end = html.indexOf('</head>');
+  return end === -1 ? '' : html.slice(0, end + 7);
+}
+
+function getAttribute(tag, name) {
+  return tag.match(new RegExp(`${name}="([^"]*)"`))?.[1];
+}
+
+const pages = walk(appDir).filter(
+  (file) =>
+    file.endsWith('.html') &&
+    !file.includes('[') &&
+    !file.endsWith('_global-error.html')
+);
+const errors = [];
+
+for (const file of pages) {
+  const head = getHead(fs.readFileSync(file, 'utf8'));
+  const relative = path.relative(appDir, file);
+  const title = head.match(/<title>([^<]*)<\/title>/)?.[1];
+
+  if (!title || title === ' – React') {
+    errors.push(`${relative}: missing page title`);
+  }
+
+  if (file.endsWith('_not-found.html')) {
+    if (!head.includes('<meta name="robots" content="noindex"')) {
+      errors.push(`${relative}: missing noindex metadata`);
+    }
+    continue;
+  }
+
+  const required = [
+    'rel="canonical"',
+    'hrefLang="x-default"',
+    'property="og:title"',
+    'property="og:url"',
+    'property="og:image"',
+    'name="twitter:card"',
+    'name="twitter:title"',
+    'name="twitter:image"',
+  ];
+  for (const marker of required) {
+    if (!head.includes(marker)) {
+      errors.push(`${relative}: missing ${marker}`);
+    }
+  }
+
+  const ogImageTag = head.match(/<meta property="og:image"[^>]*>/)?.[0];
+  const ogImage = ogImageTag && getAttribute(ogImageTag, 'content');
+  if (ogImage) {
+    const imagePath = path.join(root, 'public', new URL(ogImage).pathname);
+    if (!fs.existsSync(imagePath)) {
+      errors.push(`${relative}: missing OG image ${ogImage}`);
+    }
+  }
+}
+
+if (errors.length > 0) {
+  console.error(errors.join('\n'));
+  process.exit(1);
+}
+
+console.log(`Validated metadata for ${pages.length} prerendered pages.`);

src/app/DocsPage.tsx

@@ -33,7 +33,8 @@ export async function DocsPage({
       routeTree={routeTree}
       meta={data.meta}
       section={section}
-      pathname={pathname}>
+      pathname={pathname}
+      showCopyPage>
       {children ?? content}
     </Page>
   );

src/app/error.tsx

@@ -8,15 +8,11 @@
 'use client';
 
 import {useEffect} from 'react';
-import {Page} from 'components/Layout/Page';
-import {MDXComponents} from 'components/MDX/MDXComponents';
-import sidebarLearn from '../sidebarLearn.json';
-import type {RouteItem} from 'components/Layout/getRouteMeta';
-
-const {Intro, MaxWidth, p: P, a: A} = MDXComponents;
+import Link from 'next/link';
 
 export default function GlobalError({
   error,
+  reset,
 }: {
   error: Error & {digest?: string};
   reset: () => void;
@@ -26,24 +22,37 @@ export default function GlobalError({
   }, [error]);
 
   return (
-    <Page
-      toc={[]}
-      routeTree={sidebarLearn as RouteItem}
-      section="unknown"
-      pathname="/500"
-      meta={{title: 'Something Went Wrong'}}>
-      <MaxWidth>
-        <Intro>
-          <P>Something went very wrong.</P>
-          <P>Sorry about that.</P>
-          <P>
-            If you’d like, please{' '}
-            <A href="https://github.com/reactjs/react.dev/issues/new">
-              report a bug.
-            </A>
-          </P>
-        </Intro>
-      </MaxWidth>
-    </Page>
+    <main className="min-h-screen px-5 py-16 sm:px-12">
+      <div className="max-w-4xl mx-auto">
+        <h1 className="font-display text-4xl font-bold text-primary dark:text-primary-dark">
+          Something Went Wrong
+        </h1>
+        <div className="mt-6 font-display text-xl leading-relaxed text-primary dark:text-primary-dark">
+          <p>Something went very wrong. Sorry about that.</p>
+          <p className="mt-4">
+            You can try again or{' '}
+            <a
+              className="text-link dark:text-link-dark underline"
+              href="https://github.com/reactjs/react.dev/issues/new">
+              report a bug
+            </a>
+            .
+          </p>
+        </div>
+        <div className="flex gap-3 mt-8">
+          <button
+            type="button"
+            onClick={reset}
+            className="py-2 px-4 rounded-full bg-link text-white font-bold">
+            Try again
+          </button>
+          <Link
+            href="/"
+            className="py-2 px-4 rounded-full border border-border dark:border-border-dark font-bold text-primary dark:text-primary-dark">
+            Go home
+          </Link>
+        </div>
+      </div>
+    </main>
   );
 }

src/app/errors/[errorCode]/page.tsx

@@ -6,6 +6,7 @@
  */
 
 import type {Metadata} from 'next';
+import {buildPageMetadata} from 'lib/buildPageMetadata';
 import {listErrorCodes, loadErrorDecoderData} from 'lib/loadErrorDecoderData';
 import {ErrorDecoderView} from '../ErrorDecoderView';
 
@@ -20,7 +21,13 @@ export async function generateStaticParams() {
 
 export async function generateMetadata({params}: PageProps): Promise<Metadata> {
   const {errorCode} = await params;
-  return {title: `Minified React error #${errorCode}`};
+  const data = await loadErrorDecoderData(errorCode);
+  return buildPageMetadata({
+    data,
+    pathname: `/errors/${errorCode}`,
+    section: 'unknown',
+    title: `Minified React error #${errorCode}`,
+  });
 }
 
 export default async function ErrorDecoderPage({params}: PageProps) {

src/app/errors/page.tsx

@@ -6,12 +6,19 @@
  */
 
 import type {Metadata} from 'next';
+import {buildPageMetadata} from 'lib/buildPageMetadata';
 import {loadErrorDecoderData} from 'lib/loadErrorDecoderData';
 import {ErrorDecoderView} from './ErrorDecoderView';
 
-export const metadata: Metadata = {
-  title: 'Minified Error Decoder',
-};
+export async function generateMetadata(): Promise<Metadata> {
+  const data = await loadErrorDecoderData(null);
+  return buildPageMetadata({
+    data,
+    pathname: '/errors',
+    section: 'unknown',
+    title: 'Minified Error Decoder',
+  });
+}
 
 export default async function ErrorDecoderIndex() {
   const data = await loadErrorDecoderData(null);

src/app/not-found.tsx

@@ -5,14 +5,16 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-'use client';
-
 import {Page} from 'components/Layout/Page';
-import {MDXComponents} from 'components/MDX/MDXComponents';
+import Intro from 'components/MDX/Intro';
+import Link from 'components/MDX/Link';
 import sidebarLearn from '../sidebarLearn.json';
 import type {RouteItem} from 'components/Layout/getRouteMeta';
+import type {Metadata} from 'next';
 
-const {Intro, MaxWidth, p: P, a: A} = MDXComponents;
+export const metadata: Metadata = {
+  title: 'Not Found – React',
+};
 
 export default function NotFound() {
   return (
@@ -22,19 +24,19 @@ export default function NotFound() {
       routeTree={sidebarLearn as RouteItem}
       section="unknown"
       pathname="/404">
-      <MaxWidth>
+      <div className="max-w-4xl ms-0 2xl:mx-auto">
         <Intro>
-          <P>This page doesn’t exist.</P>
-          <P>
+          <p>This page doesn’t exist.</p>
+          <p>
             If this is a mistake{', '}
-            <A href="https://github.com/reactjs/react.dev/issues/new">
+            <Link href="https://github.com/reactjs/react.dev/issues/new">
               let us know
-            </A>
+            </Link>
             {', '}
             and we will try to fix it!
-          </P>
+          </p>
         </Intro>
-      </MaxWidth>
+      </div>
     </Page>
   );
 }