From cc34811d47d4e406a5af0dbd1f341c9189a56437 Mon Sep 17 00:00:00 2001
From: SukkaW <isukkaw@gmail.com>
Date: Sat, 3 Jan 2026 18:10:09 +0800
Subject: [PATCH 1/7] Refactor: make `compileMDX` works for both App/Pages
 Router

---
 next.config.js          | 5 +++++
 src/utils/compileMDX.ts | 8 ++++++--
 2 files changed, 11 insertions(+), 2 deletions(-)

diff --git a/next.config.js b/next.config.js
index fe88a09a0c4..d6ff921c50f 100644
--- a/next.config.js
+++ b/next.config.js
@@ -72,6 +72,11 @@ const nextConfig = {
 
     return config;
   },
+  serverExternalPackages: [
+    '@babel/core',
+    '@babel/preset-react',
+    '@babel/plugin-transform-modules-commonjs',
+  ],
 };
 
 module.exports = nextConfig;
diff --git a/src/utils/compileMDX.ts b/src/utils/compileMDX.ts
index c312f03fe96..8b0fe816c50 100644
--- a/src/utils/compileMDX.ts
+++ b/src/utils/compileMDX.ts
@@ -96,9 +96,13 @@ export default async function compileMDX(
     ],
   });
   const {transform} = require('@babel/core');
+
+  const babelPluginTransformModulesCommonjs = require('@babel/plugin-transform-modules-commonjs');
+  const babelPresetReact = require('@babel/preset-react');
+
   const jsCode = await transform(jsxCode, {
-    plugins: ['@babel/plugin-transform-modules-commonjs'],
-    presets: ['@babel/preset-react'],
+    plugins: [babelPluginTransformModulesCommonjs],
+    presets: [babelPresetReact],
   }).code;
 
   // Prepare environment for MDX.

From 8f5a12011b06b8053ae13e310adbb63c542fec67 Mon Sep 17 00:00:00 2001
From: SukkaW <isukkaw@gmail.com>
Date: Sat, 3 Jan 2026 18:11:12 +0800
Subject: [PATCH 2/7] Mark necessary MDX components as Client Components

---
 src/components/Layout/HomeContent.js          |   2 +
 src/components/MDX/Challenges/Challenges.tsx  |   2 +-
 src/components/MDX/Challenges/index.tsx       |   2 +
 src/components/MDX/ErrorDecoder.tsx           |   4 +-
 .../MDX/Illustration/AuthorCredit.tsx         |  28 +++
 .../MDX/Illustration/Illustration.tsx         |  40 ++++
 .../MDX/Illustration/IllustrationBlock.tsx    |  56 ++++++
 .../MDX/Illustration/IllustrationContext.ts   |   9 +
 src/components/MDX/LanguageList.tsx           |  39 ++++
 src/components/MDX/LanguagesContext.tsx       |   2 +
 src/components/MDX/List.tsx                   |   9 +
 src/components/MDX/MDXComponents.tsx          | 173 +-----------------
 src/components/MDX/Sandpack/CustomPreset.tsx  |   2 +
 src/components/MDX/TerminalBlock.tsx          |   2 +
 src/components/MDX/TocContext.tsx             |   2 +
 15 files changed, 202 insertions(+), 170 deletions(-)
 create mode 100644 src/components/MDX/Illustration/AuthorCredit.tsx
 create mode 100644 src/components/MDX/Illustration/Illustration.tsx
 create mode 100644 src/components/MDX/Illustration/IllustrationBlock.tsx
 create mode 100644 src/components/MDX/Illustration/IllustrationContext.ts
 create mode 100644 src/components/MDX/LanguageList.tsx
 create mode 100644 src/components/MDX/List.tsx

diff --git a/src/components/Layout/HomeContent.js b/src/components/Layout/HomeContent.js
index f9b785db420..251f2cab6d6 100644
--- a/src/components/Layout/HomeContent.js
+++ b/src/components/Layout/HomeContent.js
@@ -1,3 +1,5 @@
+'use client';
+
 /**
  * Copyright (c) Meta Platforms, Inc. and affiliates.
  *
diff --git a/src/components/MDX/Challenges/Challenges.tsx b/src/components/MDX/Challenges/Challenges.tsx
index 1b5dcfb1f06..eb6fec19d41 100644
--- a/src/components/MDX/Challenges/Challenges.tsx
+++ b/src/components/MDX/Challenges/Challenges.tsx
@@ -16,7 +16,7 @@ import {H2} from 'components/MDX/Heading';
 import {H4} from 'components/MDX/Heading';
 import {Challenge} from './Challenge';
 import {Navigation} from './Navigation';
-import {useRouter} from 'next/router';
+import {useRouter} from 'next/compat/router';
 
 interface ChallengesProps {
   children: React.ReactElement[];
diff --git a/src/components/MDX/Challenges/index.tsx b/src/components/MDX/Challenges/index.tsx
index 27e3df1ef0d..481f154ac7f 100644
--- a/src/components/MDX/Challenges/index.tsx
+++ b/src/components/MDX/Challenges/index.tsx
@@ -1,3 +1,5 @@
+'use client';
+
 /**
  * Copyright (c) Meta Platforms, Inc. and affiliates.
  *
diff --git a/src/components/MDX/ErrorDecoder.tsx b/src/components/MDX/ErrorDecoder.tsx
index 423790198bf..ea9355fd371 100644
--- a/src/components/MDX/ErrorDecoder.tsx
+++ b/src/components/MDX/ErrorDecoder.tsx
@@ -1,3 +1,5 @@
+'use client';
+
 /**
  * Copyright (c) Meta Platforms, Inc. and affiliates.
  *
@@ -6,7 +8,7 @@
  */
 
 import {useEffect, useState} from 'react';
-import {useErrorDecoderParams} from '../ErrorDecoderContext';
+import {useErrorDecoderParams} from '../_/ErrorDecoderContext';
 import cn from 'classnames';
 
 function replaceArgs(
diff --git a/src/components/MDX/Illustration/AuthorCredit.tsx b/src/components/MDX/Illustration/AuthorCredit.tsx
new file mode 100644
index 00000000000..2f230ef8cad
--- /dev/null
+++ b/src/components/MDX/Illustration/AuthorCredit.tsx
@@ -0,0 +1,28 @@
+export function AuthorCredit({
+  author = 'Rachel Lee Nabors',
+  authorLink = 'https://nearestnabors.com/',
+}: {
+  author: string;
+  authorLink: string;
+}) {
+  return (
+    <div className="sr-only group-hover:not-sr-only group-focus-within:not-sr-only hover:sr-only">
+      <p className="bg-card dark:bg-card-dark text-center text-sm text-secondary dark:text-secondary-dark leading-tight p-2 rounded-lg absolute start-1/2 -top-4 -translate-x-1/2 -translate-y-full group-hover:flex group-hover:opacity-100 after:content-[''] after:absolute after:start-1/2 after:top-[95%] after:-translate-x-1/2 after:border-8 after:border-x-transparent after:border-b-transparent after:border-t-card after:dark:border-t-card-dark opacity-0 transition-opacity duration-300">
+        <cite>
+          Illustrated by{' '}
+          {authorLink ? (
+            <a
+              target="_blank"
+              rel="noreferrer"
+              className="text-link dark:text-link-dark"
+              href={authorLink}>
+              {author}
+            </a>
+          ) : (
+            author
+          )}
+        </cite>
+      </p>
+    </div>
+  );
+}
diff --git a/src/components/MDX/Illustration/Illustration.tsx b/src/components/MDX/Illustration/Illustration.tsx
new file mode 100644
index 00000000000..96ba3a89244
--- /dev/null
+++ b/src/components/MDX/Illustration/Illustration.tsx
@@ -0,0 +1,40 @@
+'use client';
+
+import {useContext} from 'react';
+import {IllustrationContext} from './IllustrationContext';
+import {AuthorCredit} from './AuthorCredit';
+
+export function Illustration({
+  caption,
+  src,
+  alt,
+  author,
+  authorLink,
+}: {
+  caption: string;
+  src: string;
+  alt: string;
+  author: string;
+  authorLink: string;
+}) {
+  const {isInBlock} = useContext(IllustrationContext);
+
+  return (
+    <div className="relative group before:absolute before:-inset-y-16 before:inset-x-0 my-16 mx-0 2xl:mx-auto max-w-4xl 2xl:max-w-6xl">
+      <figure className="my-8 flex justify-center">
+        <img
+          src={src}
+          alt={alt}
+          style={{maxHeight: 300}}
+          className="rounded-lg"
+        />
+        {caption ? (
+          <figcaption className="text-center leading-tight mt-4">
+            {caption}
+          </figcaption>
+        ) : null}
+      </figure>
+      {!isInBlock && <AuthorCredit author={author} authorLink={authorLink} />}
+    </div>
+  );
+}
diff --git a/src/components/MDX/Illustration/IllustrationBlock.tsx b/src/components/MDX/Illustration/IllustrationBlock.tsx
new file mode 100644
index 00000000000..2538bec6197
--- /dev/null
+++ b/src/components/MDX/Illustration/IllustrationBlock.tsx
@@ -0,0 +1,56 @@
+import {Children} from 'react';
+import {IllustrationContext} from './IllustrationContext';
+import {AuthorCredit} from './AuthorCredit';
+
+const isInBlockTrue = {isInBlock: true};
+
+export function IllustrationBlock({
+  sequential,
+  author,
+  authorLink,
+  children,
+}: {
+  author: string;
+  authorLink: string;
+  sequential: boolean;
+  children: any;
+}) {
+  const imageInfos = Children.toArray(children).map(
+    (child: any) => child.props
+  );
+  const images = imageInfos.map((info, index) => (
+    <figure key={index}>
+      <div className="bg-white rounded-lg p-4 flex-1 flex xl:p-6 justify-center items-center my-4">
+        <img
+          className="text-primary"
+          src={info.src}
+          alt={info.alt}
+          height={info.height}
+        />
+      </div>
+      {info.caption ? (
+        <figcaption className="text-secondary dark:text-secondary-dark text-center leading-tight mt-4">
+          {info.caption}
+        </figcaption>
+      ) : null}
+    </figure>
+  ));
+  return (
+    <IllustrationContext value={isInBlockTrue}>
+      <div className="relative group before:absolute before:-inset-y-16 before:inset-x-0 my-16 mx-0 2xl:mx-auto max-w-4xl 2xl:max-w-6xl">
+        {sequential ? (
+          <ol className="mdx-illustration-block flex">
+            {images.map((x: any, i: number) => (
+              <li className="flex-1" key={i}>
+                {x}
+              </li>
+            ))}
+          </ol>
+        ) : (
+          <div className="mdx-illustration-block">{images}</div>
+        )}
+        <AuthorCredit author={author} authorLink={authorLink} />
+      </div>
+    </IllustrationContext>
+  );
+}
diff --git a/src/components/MDX/Illustration/IllustrationContext.ts b/src/components/MDX/Illustration/IllustrationContext.ts
new file mode 100644
index 00000000000..226d0d4b16f
--- /dev/null
+++ b/src/components/MDX/Illustration/IllustrationContext.ts
@@ -0,0 +1,9 @@
+'use client';
+
+import {createContext} from 'react';
+
+export const IllustrationContext = createContext<{
+  isInBlock?: boolean;
+}>({
+  isInBlock: false,
+});
diff --git a/src/components/MDX/LanguageList.tsx b/src/components/MDX/LanguageList.tsx
new file mode 100644
index 00000000000..258003058f0
--- /dev/null
+++ b/src/components/MDX/LanguageList.tsx
@@ -0,0 +1,39 @@
+'use client';
+
+import {useContext} from 'react';
+import {LanguagesContext} from './LanguagesContext';
+import {finishedTranslations} from 'utils/finishedTranslations';
+import Link from 'next/link';
+import {LI, UL} from './List';
+
+type TranslationProgress = 'complete' | 'in-progress';
+
+export function LanguageList({progress}: {progress: TranslationProgress}) {
+  const allLanguages = useContext(LanguagesContext) ?? [];
+  const languages = allLanguages
+    .filter(
+      ({code}) =>
+        code !== 'en' &&
+        (progress === 'complete'
+          ? finishedTranslations.includes(code)
+          : !finishedTranslations.includes(code))
+    )
+    .sort((a, b) => a.enName.localeCompare(b.enName));
+  return (
+    <UL>
+      {languages.map(({code, name, enName}) => {
+        return (
+          <LI key={code}>
+            <Link href={`https://${code}.react.dev/`}>
+              {enName} ({name})
+            </Link>{' '}
+            &mdash;{' '}
+            <Link href={`https://github.com/reactjs/${code}.react.dev`}>
+              Contribute
+            </Link>
+          </LI>
+        );
+      })}
+    </UL>
+  );
+}
diff --git a/src/components/MDX/LanguagesContext.tsx b/src/components/MDX/LanguagesContext.tsx
index cd9f8881671..ac37dcc9f25 100644
--- a/src/components/MDX/LanguagesContext.tsx
+++ b/src/components/MDX/LanguagesContext.tsx
@@ -1,3 +1,5 @@
+'use client';
+
 /**
  * Copyright (c) Meta Platforms, Inc. and affiliates.
  *
diff --git a/src/components/MDX/List.tsx b/src/components/MDX/List.tsx
new file mode 100644
index 00000000000..fab233fba59
--- /dev/null
+++ b/src/components/MDX/List.tsx
@@ -0,0 +1,9 @@
+export const OL = (p: React.HTMLAttributes<HTMLOListElement>) => (
+  <ol className="ms-6 my-3 list-decimal" {...p} />
+);
+export const LI = (p: React.HTMLAttributes<HTMLLIElement>) => (
+  <li className="leading-relaxed mb-1" {...p} />
+);
+export const UL = (p: React.HTMLAttributes<HTMLUListElement>) => (
+  <ul className="ms-6 my-3 list-disc" {...p} />
+);
diff --git a/src/components/MDX/MDXComponents.tsx b/src/components/MDX/MDXComponents.tsx
index a32dad27174..29a8e950c33 100644
--- a/src/components/MDX/MDXComponents.tsx
+++ b/src/components/MDX/MDXComponents.tsx
@@ -9,7 +9,7 @@
  * Copyright (c) Facebook, Inc. and its affiliates.
  */
 
-import {Children, useContext, useMemo} from 'react';
+import {useContext, useMemo} from 'react';
 import * as React from 'react';
 import cn from 'classnames';
 import type {HTMLAttributes} from 'react';
@@ -39,12 +39,14 @@ import ButtonLink from 'components/ButtonLink';
 import {TocContext} from './TocContext';
 import type {Toc, TocItem} from './TocContext';
 import {TeamMember} from './TeamMember';
-import {LanguagesContext} from './LanguagesContext';
-import {finishedTranslations} from 'utils/finishedTranslations';
 
 import ErrorDecoder from './ErrorDecoder';
 import {IconCanary} from '../Icon/IconCanary';
 import {IconExperimental} from 'components/Icon/IconExperimental';
+import {Illustration} from './Illustration/Illustration';
+import {IllustrationBlock} from './Illustration/IllustrationBlock';
+import {LanguageList} from './LanguageList';
+import {LI, OL, UL} from './List';
 
 function CodeStep({children, step}: {children: any; step: number}) {
   return (
@@ -76,16 +78,6 @@ const Strong = (strong: HTMLAttributes<HTMLElement>) => (
   <strong className="font-bold" {...strong} />
 );
 
-const OL = (p: HTMLAttributes<HTMLOListElement>) => (
-  <ol className="ms-6 my-3 list-decimal" {...p} />
-);
-const LI = (p: HTMLAttributes<HTMLLIElement>) => (
-  <li className="leading-relaxed mb-1" {...p} />
-);
-const UL = (p: HTMLAttributes<HTMLUListElement>) => (
-  <ul className="ms-6 my-3 list-disc" {...p} />
-);
-
 const Divider = () => (
   <hr className="my-6 block border-b border-t-0 border-border dark:border-border-dark" />
 );
@@ -262,129 +254,6 @@ function Recipes(props: any) {
   return <Challenges {...props} isRecipes={true} />;
 }
 
-function AuthorCredit({
-  author = 'Rachel Lee Nabors',
-  authorLink = 'https://nearestnabors.com/',
-}: {
-  author: string;
-  authorLink: string;
-}) {
-  return (
-    <div className="sr-only group-hover:not-sr-only group-focus-within:not-sr-only hover:sr-only">
-      <p className="bg-card dark:bg-card-dark text-center text-sm text-secondary dark:text-secondary-dark leading-tight p-2 rounded-lg absolute start-1/2 -top-4 -translate-x-1/2 -translate-y-full group-hover:flex group-hover:opacity-100 after:content-[''] after:absolute after:start-1/2 after:top-[95%] after:-translate-x-1/2 after:border-8 after:border-x-transparent after:border-b-transparent after:border-t-card after:dark:border-t-card-dark opacity-0 transition-opacity duration-300">
-        <cite>
-          Illustrated by{' '}
-          {authorLink ? (
-            <a
-              target="_blank"
-              rel="noreferrer"
-              className="text-link dark:text-link-dark"
-              href={authorLink}>
-              {author}
-            </a>
-          ) : (
-            author
-          )}
-        </cite>
-      </p>
-    </div>
-  );
-}
-
-const IllustrationContext = React.createContext<{
-  isInBlock?: boolean;
-}>({
-  isInBlock: false,
-});
-
-function Illustration({
-  caption,
-  src,
-  alt,
-  author,
-  authorLink,
-}: {
-  caption: string;
-  src: string;
-  alt: string;
-  author: string;
-  authorLink: string;
-}) {
-  const {isInBlock} = React.useContext(IllustrationContext);
-
-  return (
-    <div className="relative group before:absolute before:-inset-y-16 before:inset-x-0 my-16 mx-0 2xl:mx-auto max-w-4xl 2xl:max-w-6xl">
-      <figure className="my-8 flex justify-center">
-        <img
-          src={src}
-          alt={alt}
-          style={{maxHeight: 300}}
-          className="rounded-lg"
-        />
-        {caption ? (
-          <figcaption className="text-center leading-tight mt-4">
-            {caption}
-          </figcaption>
-        ) : null}
-      </figure>
-      {!isInBlock && <AuthorCredit author={author} authorLink={authorLink} />}
-    </div>
-  );
-}
-
-const isInBlockTrue = {isInBlock: true};
-
-function IllustrationBlock({
-  sequential,
-  author,
-  authorLink,
-  children,
-}: {
-  author: string;
-  authorLink: string;
-  sequential: boolean;
-  children: any;
-}) {
-  const imageInfos = Children.toArray(children).map(
-    (child: any) => child.props
-  );
-  const images = imageInfos.map((info, index) => (
-    <figure key={index}>
-      <div className="bg-white rounded-lg p-4 flex-1 flex xl:p-6 justify-center items-center my-4">
-        <img
-          className="text-primary"
-          src={info.src}
-          alt={info.alt}
-          height={info.height}
-        />
-      </div>
-      {info.caption ? (
-        <figcaption className="text-secondary dark:text-secondary-dark text-center leading-tight mt-4">
-          {info.caption}
-        </figcaption>
-      ) : null}
-    </figure>
-  ));
-  return (
-    <IllustrationContext value={isInBlockTrue}>
-      <div className="relative group before:absolute before:-inset-y-16 before:inset-x-0 my-16 mx-0 2xl:mx-auto max-w-4xl 2xl:max-w-6xl">
-        {sequential ? (
-          <ol className="mdx-illustration-block flex">
-            {images.map((x: any, i: number) => (
-              <li className="flex-1" key={i}>
-                {x}
-              </li>
-            ))}
-          </ol>
-        ) : (
-          <div className="mdx-illustration-block">{images}</div>
-        )}
-        <AuthorCredit author={author} authorLink={authorLink} />
-      </div>
-    </IllustrationContext>
-  );
-}
-
 type NestedTocRoot = {
   item: null;
   children: Array<NestedTocNode>;
@@ -438,38 +307,6 @@ function InlineTocItem({items}: {items: Array<NestedTocNode>}) {
   );
 }
 
-type TranslationProgress = 'complete' | 'in-progress';
-
-function LanguageList({progress}: {progress: TranslationProgress}) {
-  const allLanguages = React.useContext(LanguagesContext) ?? [];
-  const languages = allLanguages
-    .filter(
-      ({code}) =>
-        code !== 'en' &&
-        (progress === 'complete'
-          ? finishedTranslations.includes(code)
-          : !finishedTranslations.includes(code))
-    )
-    .sort((a, b) => a.enName.localeCompare(b.enName));
-  return (
-    <UL>
-      {languages.map(({code, name, enName}) => {
-        return (
-          <LI key={code}>
-            <Link href={`https://${code}.react.dev/`}>
-              {enName} ({name})
-            </Link>{' '}
-            &mdash;{' '}
-            <Link href={`https://github.com/reactjs/${code}.react.dev`}>
-              Contribute
-            </Link>
-          </LI>
-        );
-      })}
-    </UL>
-  );
-}
-
 function YouTubeIframe(props: any) {
   return (
     <div className="relative h-0 overflow-hidden pt-[56.25%]">
diff --git a/src/components/MDX/Sandpack/CustomPreset.tsx b/src/components/MDX/Sandpack/CustomPreset.tsx
index 4a241c87cbf..25dbbb41bc5 100644
--- a/src/components/MDX/Sandpack/CustomPreset.tsx
+++ b/src/components/MDX/Sandpack/CustomPreset.tsx
@@ -1,3 +1,5 @@
+'use client';
+
 /**
  * Copyright (c) Meta Platforms, Inc. and affiliates.
  *
diff --git a/src/components/MDX/TerminalBlock.tsx b/src/components/MDX/TerminalBlock.tsx
index 0fd0160d665..66a34727d9c 100644
--- a/src/components/MDX/TerminalBlock.tsx
+++ b/src/components/MDX/TerminalBlock.tsx
@@ -1,3 +1,5 @@
+'use client';
+
 /**
  * Copyright (c) Meta Platforms, Inc. and affiliates.
  *
diff --git a/src/components/MDX/TocContext.tsx b/src/components/MDX/TocContext.tsx
index 924e6e09eed..296a1b106a8 100644
--- a/src/components/MDX/TocContext.tsx
+++ b/src/components/MDX/TocContext.tsx
@@ -1,3 +1,5 @@
+'use client';
+
 /**
  * Copyright (c) Meta Platforms, Inc. and affiliates.
  *

From 5da0adac9b577f3e920632ce6d5ec9da7b02e637 Mon Sep 17 00:00:00 2001
From: SukkaW <isukkaw@gmail.com>
Date: Sat, 3 Jan 2026 18:11:53 +0800
Subject: [PATCH 3/7] Refactor: share part of root layout across App/Pages
 Routers

---
 src/app/layout.tsx               |  13 +++
 src/components/_/README.md       |   7 ++
 src/components/_/root-layout.tsx | 154 +++++++++++++++++++++++++++++++
 src/pages/_document.tsx          | 144 +----------------------------
 4 files changed, 178 insertions(+), 140 deletions(-)
 create mode 100644 src/app/layout.tsx
 create mode 100644 src/components/_/README.md
 create mode 100644 src/components/_/root-layout.tsx

diff --git a/src/app/layout.tsx b/src/app/layout.tsx
new file mode 100644
index 00000000000..a0bfd4aaa48
--- /dev/null
+++ b/src/app/layout.tsx
@@ -0,0 +1,13 @@
+import {SharedRootBody, SharedRootHead} from '../components/_/root-layout';
+import {siteConfig} from '../siteConfig';
+
+export default function RootLayout({children}: React.PropsWithChildren) {
+  return (
+    <html lang={siteConfig.languageCode} dir={siteConfig.isRTL ? 'rtl' : 'ltr'}>
+      <head>
+        <SharedRootHead />
+      </head>
+      <SharedRootBody>{children}</SharedRootBody>
+    </html>
+  );
+}
diff --git a/src/components/_/README.md b/src/components/_/README.md
new file mode 100644
index 00000000000..8c5baae4928
--- /dev/null
+++ b/src/components/_/README.md
@@ -0,0 +1,7 @@
+# `components/_` folder {/*components_-folder*/}
+
+This folder surves as a temporary location during transition from Next.js Pages Router to Next.js App Router. During this phase, many layout components may be shared bwetween both Next.js Pages Router and Next.js App Router.
+
+Due to the requirements of the Next.js Pages Router, any components under this foldeer must either be shared components or client components. React Server Components are not allowed in this folder.
+
+Once the migration to Next.js App Router is complete, this folder will be removed, and all components will be relocated to their appropriate locations.
diff --git a/src/components/_/root-layout.tsx b/src/components/_/root-layout.tsx
new file mode 100644
index 00000000000..6473e815b26
--- /dev/null
+++ b/src/components/_/root-layout.tsx
@@ -0,0 +1,154 @@
+import type React from 'react';
+
+export function SharedRootHead() {
+  return (
+    <>
+      <link
+        rel="apple-touch-icon"
+        sizes="180x180"
+        href="/apple-touch-icon.png"
+      />
+      <link
+        rel="icon"
+        type="image/png"
+        sizes="32x32"
+        href="/favicon-32x32.png"
+      />
+      <link
+        rel="icon"
+        type="image/png"
+        sizes="16x16"
+        href="/favicon-16x16.png"
+      />
+      <link rel="manifest" href="/site.webmanifest" />
+      <link rel="mask-icon" href="/safari-pinned-tab.svg" color="#404756" />
+      <meta name="msapplication-TileColor" content="#2b5797" />
+      <meta name="theme-color" content="#23272f" />
+      <script
+        async
+        src={`https://www.googletagmanager.com/gtag/js?id=${process.env.NEXT_PUBLIC_GA_TRACKING_ID}`}
+      />
+      <script
+        dangerouslySetInnerHTML={{
+          __html: `window.dataLayer = window.dataLayer || [];function gtag(){dataLayer.push(arguments);}gtag('js', new Date());gtag('config', '${process.env.NEXT_PUBLIC_GA_TRACKING_ID}');`,
+        }}
+      />
+    </>
+  );
+}
+
+export function SharedRootBody({children}: React.PropsWithChildren) {
+  return (
+    <body className="font-text font-medium antialiased text-lg bg-wash dark:bg-wash-dark text-secondary dark:text-secondary-dark leading-base">
+      <script
+        dangerouslySetInnerHTML={{
+          __html: `
+              (function () {
+                try {
+                  let logShown = false;
+                  function setUwu(isUwu) {
+                    try {
+                      if (isUwu) {
+                        localStorage.setItem('uwu', true);
+                        document.documentElement.classList.add('uwu');
+                        if (!logShown) {
+                          console.log('uwu mode! turn off with ?uwu=0');
+                          console.log('logo credit to @sawaratsuki1004 via https://github.com/SAWARATSUKI/ServiceLogos');
+                          logShown = true;
+                        }
+                      } else {
+                        localStorage.removeItem('uwu');
+                        document.documentElement.classList.remove('uwu');
+                        console.log('uwu mode off. turn on with ?uwu');
+                      }
+                    } catch (err) { }
+                  }
+                  window.__setUwu = setUwu;
+                  function checkQueryParam() {
+                    const params = new URLSearchParams(window.location.search);
+                    const value = params.get('uwu');
+                    switch(value) {
+                      case '':
+                      case 'true':
+                      case '1':
+                        return true;
+                      case 'false':
+                      case '0':
+                        return false;
+                      default:
+                        return null;
+                    }
+                  }
+                  function checkLocalStorage() {
+                    try {
+                      return localStorage.getItem('uwu') === 'true';
+                    } catch (err) {
+                      return false;
+                    }
+                  }
+                  const uwuQueryParam = checkQueryParam();
+                  if (uwuQueryParam != null) {
+                    setUwu(uwuQueryParam);
+                  } else if (checkLocalStorage()) {
+                    document.documentElement.classList.add('uwu');
+                  }
+                } catch (err) { }
+              })();
+            `,
+        }}
+      />
+      <script
+        dangerouslySetInnerHTML={{
+          __html: `
+                (function () {
+                  function setTheme(newTheme) {
+                    window.__theme = newTheme;
+                    if (newTheme === 'dark') {
+                      document.documentElement.classList.add('dark');
+                    } else if (newTheme === 'light') {
+                      document.documentElement.classList.remove('dark');
+                    }
+                  }
+
+                  var preferredTheme;
+                  try {
+                    preferredTheme = localStorage.getItem('theme');
+                  } catch (err) { }
+
+                  window.__setPreferredTheme = function(newTheme) {
+                    preferredTheme = newTheme;
+                    setTheme(newTheme);
+                    try {
+                      localStorage.setItem('theme', newTheme);
+                    } catch (err) { }
+                  };
+
+                  var initialTheme = preferredTheme;
+                  var darkQuery = window.matchMedia('(prefers-color-scheme: dark)');
+
+                  if (!initialTheme) {
+                    initialTheme = darkQuery.matches ? 'dark' : 'light';
+                  }
+                  setTheme(initialTheme);
+
+                  darkQuery.addEventListener('change', function (e) {
+                    if (!preferredTheme) {
+                      setTheme(e.matches ? 'dark' : 'light');
+                    }
+                  });
+
+                  // Detect whether the browser is Mac to display platform specific content
+                  // An example of such content can be the keyboard shortcut displayed in the search bar
+                  document.documentElement.classList.add(
+                      window.navigator.platform.includes('Mac')
+                      ? "platform-mac" 
+                      : "platform-win"
+                  );
+                })();
+              `,
+        }}
+      />
+      {children}
+    </body>
+  );
+}
diff --git a/src/pages/_document.tsx b/src/pages/_document.tsx
index 21b6f4d4f77..8aba8e3ef35 100644
--- a/src/pages/_document.tsx
+++ b/src/pages/_document.tsx
@@ -11,153 +11,17 @@
 
 import {Html, Head, Main, NextScript} from 'next/document';
 import {siteConfig} from '../siteConfig';
+import {SharedRootBody, SharedRootHead} from '../components/_/root-layout';
 
 const MyDocument = () => {
   return (
     <Html lang={siteConfig.languageCode} dir={siteConfig.isRTL ? 'rtl' : 'ltr'}>
       <Head />
-      <link
-        rel="apple-touch-icon"
-        sizes="180x180"
-        href="/apple-touch-icon.png"
-      />
-      <link
-        rel="icon"
-        type="image/png"
-        sizes="32x32"
-        href="/favicon-32x32.png"
-      />
-      <link
-        rel="icon"
-        type="image/png"
-        sizes="16x16"
-        href="/favicon-16x16.png"
-      />
-      <link rel="manifest" href="/site.webmanifest" />
-      <link rel="mask-icon" href="/safari-pinned-tab.svg" color="#404756" />
-      <meta name="msapplication-TileColor" content="#2b5797" />
-      <meta name="theme-color" content="#23272f" />
-      <script
-        async
-        src={`https://www.googletagmanager.com/gtag/js?id=${process.env.NEXT_PUBLIC_GA_TRACKING_ID}`}
-      />
-      <script
-        dangerouslySetInnerHTML={{
-          __html: `window.dataLayer = window.dataLayer || [];function gtag(){dataLayer.push(arguments);}gtag('js', new Date());gtag('config', '${process.env.NEXT_PUBLIC_GA_TRACKING_ID}');`,
-        }}
-      />
-      <body className="font-text font-medium antialiased text-lg bg-wash dark:bg-wash-dark text-secondary dark:text-secondary-dark leading-base">
-        <script
-          dangerouslySetInnerHTML={{
-            __html: `
-              (function () {
-                try {
-                  let logShown = false;
-                  function setUwu(isUwu) {
-                    try {
-                      if (isUwu) {
-                        localStorage.setItem('uwu', true);
-                        document.documentElement.classList.add('uwu');
-                        if (!logShown) {
-                          console.log('uwu mode! turn off with ?uwu=0');
-                          console.log('logo credit to @sawaratsuki1004 via https://github.com/SAWARATSUKI/ServiceLogos');
-                          logShown = true;
-                        }
-                      } else {
-                        localStorage.removeItem('uwu');
-                        document.documentElement.classList.remove('uwu');
-                        console.log('uwu mode off. turn on with ?uwu');
-                      }
-                    } catch (err) { }
-                  }
-                  window.__setUwu = setUwu;
-                  function checkQueryParam() {
-                    const params = new URLSearchParams(window.location.search);
-                    const value = params.get('uwu');
-                    switch(value) {
-                      case '':
-                      case 'true':
-                      case '1':
-                        return true;
-                      case 'false':
-                      case '0':
-                        return false;
-                      default:
-                        return null;
-                    }
-                  }
-                  function checkLocalStorage() {
-                    try {
-                      return localStorage.getItem('uwu') === 'true';
-                    } catch (err) {
-                      return false;
-                    }
-                  }
-                  const uwuQueryParam = checkQueryParam();
-                  if (uwuQueryParam != null) {
-                    setUwu(uwuQueryParam);
-                  } else if (checkLocalStorage()) {
-                    document.documentElement.classList.add('uwu');
-                  }
-                } catch (err) { }
-              })();
-            `,
-          }}
-        />
-        <script
-          dangerouslySetInnerHTML={{
-            __html: `
-                (function () {
-                  function setTheme(newTheme) {
-                    window.__theme = newTheme;
-                    if (newTheme === 'dark') {
-                      document.documentElement.classList.add('dark');
-                    } else if (newTheme === 'light') {
-                      document.documentElement.classList.remove('dark');
-                    }
-                  }
-
-                  var preferredTheme;
-                  try {
-                    preferredTheme = localStorage.getItem('theme');
-                  } catch (err) { }
-
-                  window.__setPreferredTheme = function(newTheme) {
-                    preferredTheme = newTheme;
-                    setTheme(newTheme);
-                    try {
-                      localStorage.setItem('theme', newTheme);
-                    } catch (err) { }
-                  };
-
-                  var initialTheme = preferredTheme;
-                  var darkQuery = window.matchMedia('(prefers-color-scheme: dark)');
-
-                  if (!initialTheme) {
-                    initialTheme = darkQuery.matches ? 'dark' : 'light';
-                  }
-                  setTheme(initialTheme);
-
-                  darkQuery.addEventListener('change', function (e) {
-                    if (!preferredTheme) {
-                      setTheme(e.matches ? 'dark' : 'light');
-                    }
-                  });
-
-                  // Detect whether the browser is Mac to display platform specific content
-                  // An example of such content can be the keyboard shortcut displayed in the search bar
-                  document.documentElement.classList.add(
-                      window.navigator.platform.includes('Mac')
-                      ? "platform-mac" 
-                      : "platform-win"
-                  );
-                })();
-              `,
-          }}
-        />
+      <SharedRootHead />
+      <SharedRootBody>
         <Main />
         <NextScript />
-      </body>
+      </SharedRootBody>
     </Html>
   );
 };

From 5ca8e8b3b6f0047d8d3abf5aa3aa9ef7c2bb3b53 Mon Sep 17 00:00:00 2001
From: SukkaW <isukkaw@gmail.com>
Date: Sat, 3 Jan 2026 18:45:26 +0800
Subject: [PATCH 4/7] Refactor: make more components cross compatible

---
 src/components/Layout/Feedback.tsx            |  9 +++--
 src/components/Layout/Page.tsx                | 38 +++++++++++++------
 .../Layout/Sidebar/SidebarRouteTree.tsx       |  4 +-
 src/components/MDX/ExpandableExample.tsx      | 22 +++++++++--
 4 files changed, 51 insertions(+), 22 deletions(-)

diff --git a/src/components/Layout/Feedback.tsx b/src/components/Layout/Feedback.tsx
index fe927251709..752cf5f30ee 100644
--- a/src/components/Layout/Feedback.tsx
+++ b/src/components/Layout/Feedback.tsx
@@ -1,3 +1,5 @@
+'use client';
+
 /**
  * Copyright (c) Meta Platforms, Inc. and affiliates.
  *
@@ -10,14 +12,13 @@
  */
 
 import {useState} from 'react';
-import {useRouter} from 'next/router';
+import {usePathname} from 'next/navigation';
 import cn from 'classnames';
 
 export function Feedback({onSubmit = () => {}}: {onSubmit?: () => void}) {
-  const {asPath} = useRouter();
-  const cleanedPath = asPath.split(/[\?\#]/)[0];
+  const pathname = usePathname();
   // Reset on route changes.
-  return <SendFeedback key={cleanedPath} onSubmit={onSubmit} />;
+  return <SendFeedback key={pathname} onSubmit={onSubmit} />;
 }
 
 const thumbsUpIcon = (
diff --git a/src/components/Layout/Page.tsx b/src/components/Layout/Page.tsx
index aa39fe5fc2b..50b03b31b2d 100644
--- a/src/components/Layout/Page.tsx
+++ b/src/components/Layout/Page.tsx
@@ -9,9 +9,11 @@
  * Copyright (c) Facebook, Inc. and its affiliates.
  */
 
+'use client';
+
 import {Suspense} from 'react';
 import * as React from 'react';
-import {useRouter} from 'next/router';
+import {useRouter} from 'next/compat/router';
 import {SidebarNav} from './SidebarNav';
 import {Footer} from './Footer';
 import {Toc} from './Toc';
@@ -28,6 +30,7 @@ import {HomeContent} from './HomeContent';
 import {TopNav} from './TopNav';
 import cn from 'classnames';
 import Head from 'next/head';
+import {usePathname} from 'next/navigation';
 
 import(/* webpackPrefetch: true */ '../MDX/CodeBlock/CodeBlock');
 
@@ -43,6 +46,8 @@ interface PageProps {
   };
   section: 'learn' | 'reference' | 'community' | 'blog' | 'home' | 'unknown';
   languages?: Languages | null;
+  /** Should this being used with the Next.js App Router? */
+  appRouter?: boolean;
 }
 
 export function Page({
@@ -52,9 +57,14 @@ export function Page({
   meta,
   section,
   languages = null,
+  appRouter = false,
 }: PageProps) {
-  const {asPath} = useRouter();
-  const cleanedPath = asPath.split(/[\?\#]/)[0];
+  const pagesRouter = useRouter();
+  const pathname = usePathname()!;
+  const cleanedPath = pagesRouter
+    ? pagesRouter.asPath.split(/[\?\#]/)[0]
+    : pathname;
+
   const {route, nextRoute, prevRoute, breadcrumbs, order} = getRouteMeta(
     cleanedPath,
     routeTree
@@ -125,13 +135,15 @@ export function Page({
 
   return (
     <>
-      <Seo
-        title={title}
-        titleForTitleTag={meta.titleForTitleTag}
-        isHomePage={isHomePage}
-        image={`/images/og-` + section + '.png'}
-        searchOrder={searchOrder}
-      />
+      {!appRouter && (
+        <Seo
+          title={title}
+          titleForTitleTag={meta.titleForTitleTag}
+          isHomePage={isHomePage}
+          image={`/images/og-` + section + '.png'}
+          searchOrder={searchOrder}
+        />
+      )}
       {(isHomePage || isBlogIndex) && (
         <Head>
           <link
@@ -169,7 +181,7 @@ export function Page({
           <main className="min-w-0 isolate">
             <article
               className="font-normal break-words text-primary dark:text-primary-dark"
-              key={asPath}>
+              key={cleanedPath}>
               {content}
             </article>
             <div
@@ -193,7 +205,9 @@ export function Page({
           </main>
         </Suspense>
         <div className="hidden -mt-16 lg:max-w-custom-xs 2xl:block">
-          {showToc && toc.length > 0 && <Toc headings={toc} key={asPath} />}
+          {showToc && toc.length > 0 && (
+            <Toc headings={toc} key={cleanedPath} />
+          )}
         </div>
       </div>
     </>
diff --git a/src/components/Layout/Sidebar/SidebarRouteTree.tsx b/src/components/Layout/Sidebar/SidebarRouteTree.tsx
index 863355bfdc8..e77fd2aac1c 100644
--- a/src/components/Layout/Sidebar/SidebarRouteTree.tsx
+++ b/src/components/Layout/Sidebar/SidebarRouteTree.tsx
@@ -12,12 +12,12 @@
 import {useRef, useLayoutEffect, Fragment} from 'react';
 
 import cn from 'classnames';
-import {useRouter} from 'next/router';
 import {SidebarLink} from './SidebarLink';
 import {useCollapse} from 'react-collapsed';
 import usePendingRoute from 'hooks/usePendingRoute';
 import type {RouteItem} from 'components/Layout/getRouteMeta';
 import {siteConfig} from 'siteConfig';
+import {usePathname} from 'next/navigation';
 
 interface SidebarRouteTreeProps {
   isForceExpanded: boolean;
@@ -84,7 +84,7 @@ export function SidebarRouteTree({
   routeTree,
   level = 0,
 }: SidebarRouteTreeProps) {
-  const slug = useRouter().asPath.split(/[\?\#]/)[0];
+  const slug = usePathname();
   const pendingRoute = usePendingRoute();
   const currentRoutes = routeTree.routes as RouteItem[];
   return (
diff --git a/src/components/MDX/ExpandableExample.tsx b/src/components/MDX/ExpandableExample.tsx
index c11cd6c3ccc..afe1fcfd277 100644
--- a/src/components/MDX/ExpandableExample.tsx
+++ b/src/components/MDX/ExpandableExample.tsx
@@ -1,3 +1,5 @@
+'use client';
+
 /**
  * Copyright (c) Meta Platforms, Inc. and affiliates.
  *
@@ -16,8 +18,20 @@ import {IconDeepDive} from '../Icon/IconDeepDive';
 import {IconCodeBlock} from '../Icon/IconCodeBlock';
 import {Button} from '../Button';
 import {H4} from './Heading';
-import {useRouter} from 'next/router';
-import {useEffect, useRef, useState} from 'react';
+import {useEffect, useRef, useState, useSyncExternalStore} from 'react';
+
+function useHash() {
+  return useSyncExternalStore(
+    (callback) => {
+      window.addEventListener('hashchange', callback);
+      return () => {
+        window.removeEventListener('hashchange', callback);
+      };
+    },
+    () => window.location.hash,
+    () => null
+  );
+}
 
 interface ExpandableExampleProps {
   children: React.ReactNode;
@@ -35,8 +49,8 @@ function ExpandableExample({children, excerpt, type}: ExpandableExampleProps) {
   const isExample = type === 'Example';
   const id = children[0].props.id;
 
-  const {asPath} = useRouter();
-  const shouldAutoExpand = id === asPath.split('#')[1];
+  const hash = useHash();
+  const shouldAutoExpand = !!hash && id === hash.split('#')[1];
   const queuedExpandRef = useRef<boolean>(shouldAutoExpand);
   const [isExpanded, setIsExpanded] = useState(false);
 

From eecf4288f13ed72ad9da70b7a7b99eea6de15dfd Mon Sep 17 00:00:00 2001
From: SukkaW <isukkaw@gmail.com>
Date: Sat, 3 Jan 2026 22:30:53 +0800
Subject: [PATCH 5/7] Refactor: migrate error decoder to App Router

---
 next-env.d.ts                                 |   4 +-
 next.config.js                                |   1 +
 package.json                                  |   2 +-
 .../[errorCode]/lib/fetch-error-codes.ts      |   9 +
 src/app/errors/[errorCode]/page.tsx           |  55 +++
 .../errors/components/error-decoder-page.tsx  |  64 +++
 src/app/errors/components/error-mdx.tsx       |  48 ++
 src/app/errors/page.tsx                       |  28 ++
 src/app/layout.tsx                            |  57 ++-
 .../Layout/Sidebar/SidebarRouteTree.tsx       |   2 +
 src/components/Layout/TopNav/TopNav.tsx       |   8 +-
 src/components/MDX/Sandpack/NavigationBar.tsx |   2 +
 src/components/MDX/Sandpack/runESLint.tsx     |   2 +
 .../MDX/Sandpack/useSandpackLint.tsx          |   2 +
 src/components/Search.tsx                     |  18 +-
 src/components/Seo.tsx                        | 306 ++++++------
 .../{ => _}/ErrorDecoderContext.tsx           |   4 +
 src/hooks/usePendingRoute.ts                  |  12 +-
 src/pages/errors/[errorCode].tsx              | 160 -------
 src/pages/errors/index.tsx                    |  10 -
 yarn.lock                                     | 448 +++++++++---------
 21 files changed, 668 insertions(+), 574 deletions(-)
 create mode 100644 src/app/errors/[errorCode]/lib/fetch-error-codes.ts
 create mode 100644 src/app/errors/[errorCode]/page.tsx
 create mode 100644 src/app/errors/components/error-decoder-page.tsx
 create mode 100644 src/app/errors/components/error-mdx.tsx
 create mode 100644 src/app/errors/page.tsx
 rename src/components/{ => _}/ErrorDecoderContext.tsx (92%)
 delete mode 100644 src/pages/errors/[errorCode].tsx
 delete mode 100644 src/pages/errors/index.tsx

diff --git a/next-env.d.ts b/next-env.d.ts
index 52e831b4342..36a4fe488ad 100644
--- a/next-env.d.ts
+++ b/next-env.d.ts
@@ -1,5 +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" />
 
 // NOTE: This file should not be edited
-// see https://nextjs.org/docs/pages/api-reference/config/typescript for more information.
+// see https://nextjs.org/docs/app/api-reference/config/typescript for more information.
diff --git a/next.config.js b/next.config.js
index d6ff921c50f..0dab6fe28cd 100644
--- a/next.config.js
+++ b/next.config.js
@@ -73,6 +73,7 @@ const nextConfig = {
     return config;
   },
   serverExternalPackages: [
+    'eslint',
     '@babel/core',
     '@babel/preset-react',
     '@babel/plugin-transform-modules-commonjs',
diff --git a/package.json b/package.json
index 55fcc0a5b71..8fab98f28aa 100644
--- a/package.json
+++ b/package.json
@@ -35,7 +35,7 @@
     "classnames": "^2.2.6",
     "debounce": "^1.2.1",
     "github-slugger": "^1.3.0",
-    "next": "15.1.11",
+    "next": "^15.4.0",
     "next-remote-watch": "^1.0.0",
     "parse-numeric-range": "^1.2.0",
     "react": "^19.0.0",
diff --git a/src/app/errors/[errorCode]/lib/fetch-error-codes.ts b/src/app/errors/[errorCode]/lib/fetch-error-codes.ts
new file mode 100644
index 00000000000..cedb99d90ca
--- /dev/null
+++ b/src/app/errors/[errorCode]/lib/fetch-error-codes.ts
@@ -0,0 +1,9 @@
+import {unstable_cache} from 'next/cache';
+
+export const fetchReactErrorCodes = unstable_cache(async () => {
+  return (
+    await fetch(
+      'https://raw.githubusercontent.com/facebook/react/main/scripts/error-codes/codes.json'
+    )
+  ).json() as Promise<{[key: string]: string}>;
+}, ['react-error-codes']);
diff --git a/src/app/errors/[errorCode]/page.tsx b/src/app/errors/[errorCode]/page.tsx
new file mode 100644
index 00000000000..1052da0e7de
--- /dev/null
+++ b/src/app/errors/[errorCode]/page.tsx
@@ -0,0 +1,55 @@
+import {unstable_cache} from 'next/cache';
+import {notFound} from 'next/navigation';
+import ErrorDecoderPage from '../components/error-decoder-page';
+import type {Metadata, ResolvingMetadata} from 'next';
+
+interface ErrorDecoderPageProps {
+  params: Promise<{errorCode: string}>;
+}
+
+export default async function ErrorPage({params}: ErrorDecoderPageProps) {
+  const {errorCode} = await params;
+  const errorCodes = await fetchReactErrorCodes();
+
+  if (errorCode && !(errorCode in errorCodes)) {
+    notFound();
+  }
+
+  return <ErrorDecoderPage errorCode={errorCode} errorCodes={errorCodes} />;
+}
+
+const fetchReactErrorCodes = unstable_cache(async () => {
+  return (
+    await fetch(
+      'https://raw.githubusercontent.com/facebook/react/main/scripts/error-codes/codes.json'
+    )
+  ).json() as Promise<{[key: string]: string}>;
+}, ['react-error-codes']);
+
+export async function generateStaticParams(): Promise<
+  Array<{errorCode: string}>
+> {
+  return Object.keys(await fetchReactErrorCodes()).map((code) => ({
+    errorCode: code,
+  }));
+}
+
+export async function generateMetadata(
+  {params}: ErrorDecoderPageProps,
+  parent?: ResolvingMetadata
+): Promise<Metadata> {
+  const {errorCode} = await params;
+  const resolvedParent = await parent;
+  const parentOpenGraph = resolvedParent ? resolvedParent.openGraph : {};
+
+  return {
+    title: `Minified React error #${errorCode}`,
+    alternates: {
+      canonical: `./`,
+    },
+    openGraph: {
+      ...parentOpenGraph,
+      title: `Minified React error #${errorCode}`,
+    },
+  };
+}
diff --git a/src/app/errors/components/error-decoder-page.tsx b/src/app/errors/components/error-decoder-page.tsx
new file mode 100644
index 00000000000..57cec2d65af
--- /dev/null
+++ b/src/app/errors/components/error-decoder-page.tsx
@@ -0,0 +1,64 @@
+import fsp from 'node:fs/promises';
+import fs from 'node:fs';
+import {Page} from '../../../components/Layout/Page';
+import sidebarLearn from 'sidebarLearn.json';
+import type {RouteItem} from '../../../components/Layout/getRouteMeta';
+import {notFound} from 'next/navigation';
+import {join} from 'node:path';
+import compileMDX from '../../../utils/compileMDX';
+import ErrorMDX from './error-mdx';
+
+export default async function ErrorDecoderPage({
+  errorCode,
+  errorCodes,
+}: {
+  errorCode: string | null;
+  errorCodes: {[key: string]: string};
+}) {
+  if (errorCode && !errorCodes[errorCode]) {
+    notFound();
+  }
+
+  const rootDir = join(process.cwd(), 'src', 'content', 'errors');
+  let path = errorCode || 'index';
+  let mdx;
+  if (fs.existsSync(join(rootDir, path + '.md'))) {
+    mdx = await fsp.readFile(join(rootDir, path + '.md'), 'utf8');
+  } else {
+    mdx = await fsp.readFile(join(rootDir, 'generic.md'), 'utf8');
+  }
+
+  const {content} = await compileMDX(mdx, path, {code: errorCode, errorCodes});
+  const errorMessage = errorCode ? errorCodes[errorCode] : null;
+
+  return (
+    <Page
+      toc={[]}
+      meta={{
+        title: errorCode
+          ? 'Minified React error #' + errorCode
+          : 'Minified Error Decoder',
+      }}
+      routeTree={sidebarLearn as RouteItem}
+      section="unknown"
+      appRouter>
+      <div>
+        <ErrorMDX
+          content={content}
+          errorCode={errorCode}
+          errorMessage={errorMessage}
+        />
+      </div>
+      {/* <MaxWidth>
+            <P>
+              We highly recommend using the development build locally when debugging
+              your app since it tracks additional debug info and provides helpful
+              warnings about potential problems in your apps, but if you encounter
+              an exception while using the production build, this page will
+              reassemble the original error message.
+            </P>
+            <ErrorDecoder />
+          </MaxWidth> */}
+    </Page>
+  );
+}
diff --git a/src/app/errors/components/error-mdx.tsx b/src/app/errors/components/error-mdx.tsx
new file mode 100644
index 00000000000..50a74d7a3f1
--- /dev/null
+++ b/src/app/errors/components/error-mdx.tsx
@@ -0,0 +1,48 @@
+'use client';
+
+import {Fragment} from 'react';
+import {ErrorDecoderProvider} from '../../../components/_/ErrorDecoderContext';
+import {MDXComponents} from '../../../components/MDX/MDXComponents';
+
+export default function ErrorMDX({
+  content,
+  errorCode,
+  errorMessage,
+}: {
+  content: string;
+  errorCode: string | null;
+  errorMessage: string | null;
+}) {
+  return (
+    <ErrorDecoderProvider value={{errorMessage, errorCode}}>
+      {JSON.parse(content, reviveNodeOnClient)}
+    </ErrorDecoderProvider>
+  );
+}
+
+// Deserialize a client React tree from JSON.
+function reviveNodeOnClient(parentPropertyName: unknown, val: any) {
+  if (Array.isArray(val) && val[0] == '$r') {
+    // Assume it's a React element.
+    let Type = val[1];
+    let key = val[2];
+    if (key == null) {
+      key = parentPropertyName; // Index within a parent.
+    }
+    let props = val[3];
+    if (Type === 'wrapper') {
+      Type = Fragment;
+      props = {children: props.children};
+    }
+    if (Type in MDXComponents) {
+      Type = MDXComponents[Type as keyof typeof MDXComponents];
+    }
+    if (!Type) {
+      console.error('Unknown type: ' + Type);
+      Type = Fragment;
+    }
+    return <Type key={key} {...props} />;
+  } else {
+    return val;
+  }
+}
diff --git a/src/app/errors/page.tsx b/src/app/errors/page.tsx
new file mode 100644
index 00000000000..6b07daf59f7
--- /dev/null
+++ b/src/app/errors/page.tsx
@@ -0,0 +1,28 @@
+import type {Metadata, ResolvingMetadata} from 'next';
+import {fetchReactErrorCodes} from './[errorCode]/lib/fetch-error-codes';
+import ErrorDecoderPage from './components/error-decoder-page';
+
+export default async function ErrorPage() {
+  const errorCodes = await fetchReactErrorCodes();
+
+  return <ErrorDecoderPage errorCode={null} errorCodes={errorCodes} />;
+}
+
+export async function generateMetadata(
+  _: unknown,
+  parent?: ResolvingMetadata
+): Promise<Metadata> {
+  const resolvedParent = await parent;
+  const parentOpenGraph = resolvedParent ? resolvedParent.openGraph : {};
+
+  return {
+    title: 'Minified Error Decoder',
+    alternates: {
+      canonical: `./`,
+    },
+    openGraph: {
+      ...parentOpenGraph,
+      title: 'Minified Error Decoder',
+    },
+  };
+}
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index a0bfd4aaa48..003887cf65d 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -1,9 +1,33 @@
+import type {Metadata, Viewport} from 'next';
 import {SharedRootBody, SharedRootHead} from '../components/_/root-layout';
 import {siteConfig} from '../siteConfig';
+import {preload} from 'react-dom';
+
+import '@docsearch/css';
+import '../styles/algolia.css';
+import '../styles/index.css';
+import '../styles/sandpack.css';
 
 export default function RootLayout({children}: React.PropsWithChildren) {
+  [
+    'https://react.dev/fonts/Source-Code-Pro-Regular.woff2',
+    'https://react.dev/fonts/Source-Code-Pro-Bold.woff2',
+    'https://react.dev/fonts/Optimistic_Display_W_Md.woff2',
+    'https://react.dev/fonts/Optimistic_Display_W_SBd.woff2',
+    'https://react.dev/fonts/Optimistic_Display_W_Bd.woff2',
+    'https://react.dev/fonts/Optimistic_Text_W_Md.woff2',
+    'https://react.dev/fonts/Optimistic_Text_W_Bd.woff2',
+    'https://react.dev/fonts/Optimistic_Text_W_Rg.woff2',
+    'https://react.dev/fonts/Optimistic_Text_W_It.woff2',
+  ].forEach((href) => {
+    preload(href, {as: 'font', type: 'font/woff2', crossOrigin: 'anonymous'});
+  });
+
   return (
-    <html lang={siteConfig.languageCode} dir={siteConfig.isRTL ? 'rtl' : 'ltr'}>
+    <html
+      lang={siteConfig.languageCode}
+      dir={siteConfig.isRTL ? 'rtl' : 'ltr'}
+      suppressHydrationWarning>
       <head>
         <SharedRootHead />
       </head>
@@ -11,3 +35,34 @@ export default function RootLayout({children}: React.PropsWithChildren) {
     </html>
   );
 }
+
+export const viewport: Viewport = {
+  width: 'device-width',
+  initialScale: 1,
+};
+
+export const metadata: Metadata = {
+  metadataBase: new URL('https://' + getDomain(siteConfig.languageCode)),
+  alternates: {
+    canonical: './',
+  },
+  openGraph: {
+    type: 'website',
+    url: './',
+    images: ['/images/og-default.png'],
+  },
+  twitter: {
+    card: 'summary_large_image',
+    site: '@reactjs',
+    creator: '@reactjs',
+    images: ['/images/og-default.png'],
+  },
+  facebook: {
+    appId: '623268441017527',
+  },
+};
+
+function getDomain(languageCode: string): string {
+  const subdomain = languageCode === 'en' ? '' : languageCode + '.';
+  return subdomain + 'react.dev';
+}
diff --git a/src/components/Layout/Sidebar/SidebarRouteTree.tsx b/src/components/Layout/Sidebar/SidebarRouteTree.tsx
index e77fd2aac1c..30480cbfcbe 100644
--- a/src/components/Layout/Sidebar/SidebarRouteTree.tsx
+++ b/src/components/Layout/Sidebar/SidebarRouteTree.tsx
@@ -1,3 +1,5 @@
+'use client';
+
 /**
  * Copyright (c) Meta Platforms, Inc. and affiliates.
  *
diff --git a/src/components/Layout/TopNav/TopNav.tsx b/src/components/Layout/TopNav/TopNav.tsx
index 148098933d5..cb2fe2ce8d9 100644
--- a/src/components/Layout/TopNav/TopNav.tsx
+++ b/src/components/Layout/TopNav/TopNav.tsx
@@ -1,3 +1,5 @@
+'use client';
+
 /**
  * Copyright (c) Meta Platforms, Inc. and affiliates.
  *
@@ -21,7 +23,6 @@ import Image from 'next/image';
 import * as React from 'react';
 import cn from 'classnames';
 import NextLink from 'next/link';
-import {useRouter} from 'next/router';
 import {disableBodyScroll, enableBodyScroll} from 'body-scroll-lock';
 
 import {IconClose} from 'components/Icon/IconClose';
@@ -34,6 +35,7 @@ import {SidebarRouteTree} from '../Sidebar';
 import type {RouteItem} from '../getRouteMeta';
 import {siteConfig} from 'siteConfig';
 import BrandMenu from './BrandMenu';
+import {usePathname} from 'next/navigation';
 
 declare global {
   interface Window {
@@ -169,7 +171,7 @@ export default function TopNav({
   const [showSearch, setShowSearch] = useState(false);
   const [isScrolled, setIsScrolled] = useState(false);
   const scrollParentRef = useRef<HTMLDivElement>(null);
-  const {asPath} = useRouter();
+  const pathname = usePathname();
 
   // HACK. Fix up the data structures instead.
   if ((routeTree as any).routes.length === 1) {
@@ -190,7 +192,7 @@ export default function TopNav({
   // Close the overlay on any navigation.
   useEffect(() => {
     setIsMenuOpen(false);
-  }, [asPath]);
+  }, [pathname]);
 
   // Also close the overlay if the window gets resized past mobile layout.
   // (This is also important because we don't want to keep the body locked!)
diff --git a/src/components/MDX/Sandpack/NavigationBar.tsx b/src/components/MDX/Sandpack/NavigationBar.tsx
index 3fe743a2d24..6b3ebb941f6 100644
--- a/src/components/MDX/Sandpack/NavigationBar.tsx
+++ b/src/components/MDX/Sandpack/NavigationBar.tsx
@@ -1,3 +1,5 @@
+'use client';
+
 /**
  * Copyright (c) Meta Platforms, Inc. and affiliates.
  *
diff --git a/src/components/MDX/Sandpack/runESLint.tsx b/src/components/MDX/Sandpack/runESLint.tsx
index 667b22d7eb2..7c7c908eafd 100644
--- a/src/components/MDX/Sandpack/runESLint.tsx
+++ b/src/components/MDX/Sandpack/runESLint.tsx
@@ -1,3 +1,5 @@
+'use client';
+
 /**
  * Copyright (c) Meta Platforms, Inc. and affiliates.
  *
diff --git a/src/components/MDX/Sandpack/useSandpackLint.tsx b/src/components/MDX/Sandpack/useSandpackLint.tsx
index 479b53ee0df..9113bb232bf 100644
--- a/src/components/MDX/Sandpack/useSandpackLint.tsx
+++ b/src/components/MDX/Sandpack/useSandpackLint.tsx
@@ -1,3 +1,5 @@
+'use client';
+
 /**
  * Copyright (c) Meta Platforms, Inc. and affiliates.
  *
diff --git a/src/components/Search.tsx b/src/components/Search.tsx
index 24b066d70f4..402f03bb722 100644
--- a/src/components/Search.tsx
+++ b/src/components/Search.tsx
@@ -9,12 +9,11 @@
  * Copyright (c) Facebook, Inc. and its affiliates.
  */
 
-import Head from 'next/head';
 import Link from 'next/link';
-import Router from 'next/router';
+import {useRouter} from 'next/navigation';
 import {lazy, useEffect} from 'react';
 import * as React from 'react';
-import {createPortal} from 'react-dom';
+import {createPortal, preconnect} from 'react-dom';
 import {siteConfig} from 'siteConfig';
 import type {ComponentType, PropsWithChildren} from 'react';
 import type {DocSearchModalProps} from '@docsearch/react/modal';
@@ -118,14 +117,13 @@ export function Search({
   },
 }: SearchProps) {
   useDocSearchKeyboardEvents({isOpen, onOpen, onClose});
+
+  const router = useRouter();
+
+  preconnect(`https://${options.appId}-dsn.algolia.net`);
+
   return (
     <>
-      <Head>
-        <link
-          rel="preconnect"
-          href={`https://${options.appId}-dsn.algolia.net`}
-        />
-      </Head>
       {isOpen &&
         createPortal(
           <DocSearchModal
@@ -134,7 +132,7 @@ export function Search({
             onClose={onClose}
             navigator={{
               navigate({itemUrl}: any) {
-                Router.push(itemUrl);
+                router.push(itemUrl);
               },
             }}
             transformItems={(items: any[]) => {
diff --git a/src/components/Seo.tsx b/src/components/Seo.tsx
index 90604102023..d9a1437ebb2 100644
--- a/src/components/Seo.tsx
+++ b/src/components/Seo.tsx
@@ -11,9 +11,9 @@
 
 import * as React from 'react';
 import Head from 'next/head';
-import {withRouter, Router} from 'next/router';
 import {siteConfig} from '../siteConfig';
 import {finishedTranslations} from 'utils/finishedTranslations';
+import {usePathname} from 'next/navigation';
 
 export interface SeoProps {
   title: string;
@@ -34,166 +34,158 @@ function getDomain(languageCode: string): string {
   return subdomain + 'react.dev';
 }
 
-export const Seo = withRouter(
-  ({
-    title,
-    titleForTitleTag,
-    image = '/images/og-default.png',
-    router,
-    children,
-    isHomePage,
-    searchOrder,
-  }: SeoProps & {router: Router}) => {
-    const siteDomain = getDomain(siteConfig.languageCode);
-    const canonicalUrl = `https://${siteDomain}${
-      router.asPath.split(/[\?\#]/)[0]
-    }`;
-    // Allow setting a different title for Google results
-    const pageTitle =
-      (titleForTitleTag ?? title) + (isHomePage ? '' : ' – React');
-    // Twitter's meta parser is not very good.
-    const twitterTitle = pageTitle.replace(/[<>]/g, '');
-    let description = isHomePage
-      ? 'React is the library for web and native user interfaces. Build user interfaces out of individual pieces called components written in JavaScript. React is designed to let you seamlessly combine components written by independent people, teams, and organizations.'
-      : 'The library for web and native user interfaces';
-    return (
-      <Head>
-        <meta name="viewport" content="width=device-width, initial-scale=1" />
-        {title != null && <title key="title">{pageTitle}</title>}
-        {isHomePage && (
-          // Let Google figure out a good description for each page.
-          <meta name="description" key="description" content={description} />
-        )}
-        <link rel="canonical" href={canonicalUrl} />
+export function Seo({
+  title,
+  titleForTitleTag,
+  image = '/images/og-default.png',
+  children,
+  isHomePage,
+  searchOrder,
+}: SeoProps) {
+  const pathname = usePathname();
+  const siteDomain = getDomain(siteConfig.languageCode);
+  const canonicalUrl = `https://${siteDomain}${pathname}`;
+  // Allow setting a different title for Google results
+  const pageTitle =
+    (titleForTitleTag ?? title) + (isHomePage ? '' : ' – React');
+  // Twitter's meta parser is not very good.
+  const twitterTitle = pageTitle.replace(/[<>]/g, '');
+  let description = isHomePage
+    ? 'React is the library for web and native user interfaces. Build user interfaces out of individual pieces called components written in JavaScript. React is designed to let you seamlessly combine components written by independent people, teams, and organizations.'
+    : 'The library for web and native user interfaces';
+  return (
+    <Head>
+      <meta name="viewport" content="width=device-width, initial-scale=1" />
+      {title != null && <title key="title">{pageTitle}</title>}
+      {isHomePage && (
+        // Let Google figure out a good description for each page.
+        <meta name="description" key="description" content={description} />
+      )}
+      <link rel="canonical" href={canonicalUrl} />
+      <link
+        rel="alternate"
+        href={canonicalUrl.replace(siteDomain, getDomain('en'))}
+        hrefLang="x-default"
+      />
+      {finishedTranslations.map((languageCode) => (
         <link
+          key={'alt-' + languageCode}
           rel="alternate"
-          href={canonicalUrl.replace(siteDomain, getDomain('en'))}
-          hrefLang="x-default"
+          hrefLang={languageCode}
+          href={canonicalUrl.replace(siteDomain, getDomain(languageCode))}
         />
-        {finishedTranslations.map((languageCode) => (
-          <link
-            key={'alt-' + languageCode}
-            rel="alternate"
-            hrefLang={languageCode}
-            href={canonicalUrl.replace(siteDomain, getDomain(languageCode))}
-          />
-        ))}
-        <meta property="fb:app_id" content="623268441017527" />
-        <meta property="og:type" key="og:type" content="website" />
-        <meta property="og:url" key="og:url" content={canonicalUrl} />
-        {title != null && (
-          <meta property="og:title" content={pageTitle} key="og:title" />
-        )}
-        {description != null && (
-          <meta
-            property="og:description"
-            key="og:description"
-            content={description}
-          />
-        )}
+      ))}
+      <meta property="fb:app_id" content="623268441017527" />
+      <meta property="og:type" key="og:type" content="website" />
+      <meta property="og:url" key="og:url" content={canonicalUrl} />
+      {title != null && (
+        <meta property="og:title" content={pageTitle} key="og:title" />
+      )}
+      {description != null && (
         <meta
-          property="og:image"
-          key="og:image"
-          content={`https://${siteDomain}${image}`}
+          property="og:description"
+          key="og:description"
+          content={description}
         />
+      )}
+      <meta
+        property="og:image"
+        key="og:image"
+        content={`https://${siteDomain}${image}`}
+      />
+      <meta
+        name="twitter:card"
+        key="twitter:card"
+        content="summary_large_image"
+      />
+      <meta name="twitter:site" key="twitter:site" content="@reactjs" />
+      <meta name="twitter:creator" key="twitter:creator" content="@reactjs" />
+      {title != null && (
+        <meta name="twitter:title" key="twitter:title" content={twitterTitle} />
+      )}
+      {description != null && (
         <meta
-          name="twitter:card"
-          key="twitter:card"
-          content="summary_large_image"
+          name="twitter:description"
+          key="twitter:description"
+          content={description}
         />
-        <meta name="twitter:site" key="twitter:site" content="@reactjs" />
-        <meta name="twitter:creator" key="twitter:creator" content="@reactjs" />
-        {title != null && (
-          <meta
-            name="twitter:title"
-            key="twitter:title"
-            content={twitterTitle}
-          />
-        )}
-        {description != null && (
-          <meta
-            name="twitter:description"
-            key="twitter:description"
-            content={description}
-          />
-        )}
-        <meta
-          name="twitter:image"
-          key="twitter:image"
-          content={`https://${siteDomain}${image}`}
-        />
-        <meta
-          name="google-site-verification"
-          content="sIlAGs48RulR4DdP95YSWNKZIEtCqQmRjzn-Zq-CcD0"
-        />
-        {searchOrder != null && (
-          <meta name="algolia-search-order" content={'' + searchOrder} />
-        )}
-        <link
-          rel="preload"
-          href="https://react.dev/fonts/Source-Code-Pro-Regular.woff2"
-          as="font"
-          type="font/woff2"
-          crossOrigin="anonymous"
-        />
-        <link
-          rel="preload"
-          href="https://react.dev/fonts/Source-Code-Pro-Bold.woff2"
-          as="font"
-          type="font/woff2"
-          crossOrigin="anonymous"
-        />
-        <link
-          rel="preload"
-          href="https://react.dev/fonts/Optimistic_Display_W_Md.woff2"
-          as="font"
-          type="font/woff2"
-          crossOrigin="anonymous"
-        />
-        <link
-          rel="preload"
-          href="https://react.dev/fonts/Optimistic_Display_W_SBd.woff2"
-          as="font"
-          type="font/woff2"
-          crossOrigin="anonymous"
-        />
-        <link
-          rel="preload"
-          href="https://react.dev/fonts/Optimistic_Display_W_Bd.woff2"
-          as="font"
-          type="font/woff2"
-          crossOrigin="anonymous"
-        />
-        <link
-          rel="preload"
-          href="https://react.dev/fonts/Optimistic_Text_W_Md.woff2"
-          as="font"
-          type="font/woff2"
-          crossOrigin="anonymous"
-        />
-        <link
-          rel="preload"
-          href="https://react.dev/fonts/Optimistic_Text_W_Bd.woff2"
-          as="font"
-          type="font/woff2"
-          crossOrigin="anonymous"
-        />
-        <link
-          rel="preload"
-          href="https://react.dev/fonts/Optimistic_Text_W_Rg.woff2"
-          as="font"
-          type="font/woff2"
-          crossOrigin="anonymous"
-        />
-        <link
-          rel="preload"
-          href="https://react.dev/fonts/Optimistic_Text_W_It.woff2"
-          as="font"
-          type="font/woff2"
-          crossOrigin="anonymous"
-        />
-        {children}
-      </Head>
-    );
-  }
-);
+      )}
+      <meta
+        name="twitter:image"
+        key="twitter:image"
+        content={`https://${siteDomain}${image}`}
+      />
+      <meta
+        name="google-site-verification"
+        content="sIlAGs48RulR4DdP95YSWNKZIEtCqQmRjzn-Zq-CcD0"
+      />
+      {searchOrder != null && (
+        <meta name="algolia-search-order" content={'' + searchOrder} />
+      )}
+      <link
+        rel="preload"
+        href="https://react.dev/fonts/Source-Code-Pro-Regular.woff2"
+        as="font"
+        type="font/woff2"
+        crossOrigin="anonymous"
+      />
+      <link
+        rel="preload"
+        href="https://react.dev/fonts/Source-Code-Pro-Bold.woff2"
+        as="font"
+        type="font/woff2"
+        crossOrigin="anonymous"
+      />
+      <link
+        rel="preload"
+        href="https://react.dev/fonts/Optimistic_Display_W_Md.woff2"
+        as="font"
+        type="font/woff2"
+        crossOrigin="anonymous"
+      />
+      <link
+        rel="preload"
+        href="https://react.dev/fonts/Optimistic_Display_W_SBd.woff2"
+        as="font"
+        type="font/woff2"
+        crossOrigin="anonymous"
+      />
+      <link
+        rel="preload"
+        href="https://react.dev/fonts/Optimistic_Display_W_Bd.woff2"
+        as="font"
+        type="font/woff2"
+        crossOrigin="anonymous"
+      />
+      <link
+        rel="preload"
+        href="https://react.dev/fonts/Optimistic_Text_W_Md.woff2"
+        as="font"
+        type="font/woff2"
+        crossOrigin="anonymous"
+      />
+      <link
+        rel="preload"
+        href="https://react.dev/fonts/Optimistic_Text_W_Bd.woff2"
+        as="font"
+        type="font/woff2"
+        crossOrigin="anonymous"
+      />
+      <link
+        rel="preload"
+        href="https://react.dev/fonts/Optimistic_Text_W_Rg.woff2"
+        as="font"
+        type="font/woff2"
+        crossOrigin="anonymous"
+      />
+      <link
+        rel="preload"
+        href="https://react.dev/fonts/Optimistic_Text_W_It.woff2"
+        as="font"
+        type="font/woff2"
+        crossOrigin="anonymous"
+      />
+      {children}
+    </Head>
+  );
+}
diff --git a/src/components/ErrorDecoderContext.tsx b/src/components/_/ErrorDecoderContext.tsx
similarity index 92%
rename from src/components/ErrorDecoderContext.tsx
rename to src/components/_/ErrorDecoderContext.tsx
index 77e9ebf7d5b..c4b209a058a 100644
--- a/src/components/ErrorDecoderContext.tsx
+++ b/src/components/_/ErrorDecoderContext.tsx
@@ -1,3 +1,5 @@
+'use client';
+
 /**
  * Copyright (c) Meta Platforms, Inc. and affiliates.
  *
@@ -19,6 +21,8 @@ export const ErrorDecoderContext = createContext<
   | typeof notInErrorDecoderContext
 >(notInErrorDecoderContext);
 
+export const ErrorDecoderProvider = ErrorDecoderContext.Provider;
+
 export const useErrorDecoderParams = () => {
   const params = useContext(ErrorDecoderContext);
 
diff --git a/src/hooks/usePendingRoute.ts b/src/hooks/usePendingRoute.ts
index 17d7525b4f8..5ea765b0e4b 100644
--- a/src/hooks/usePendingRoute.ts
+++ b/src/hooks/usePendingRoute.ts
@@ -9,14 +9,20 @@
  * Copyright (c) Facebook, Inc. and its affiliates.
  */
 
-import {useRouter} from 'next/router';
+import {useRouter} from 'next/compat/router';
 import {useState, useRef, useEffect} from 'react';
 
 const usePendingRoute = () => {
-  const {events} = useRouter();
+  const pagesRouter = useRouter();
   const [pendingRoute, setPendingRoute] = useState<string | null>(null);
   const currentRoute = useRef<string | null>(null);
   useEffect(() => {
+    if (!pagesRouter) {
+      return;
+    }
+
+    const {events} = pagesRouter;
+
     let routeTransitionTimer: any = null;
 
     const handleRouteChangeStart = (url: string) => {
@@ -40,7 +46,7 @@ const usePendingRoute = () => {
       events.off('routeChangeComplete', handleRouteChangeComplete);
       clearTimeout(routeTransitionTimer);
     };
-  }, [events]);
+  }, [pagesRouter]);
 
   return pendingRoute;
 };
diff --git a/src/pages/errors/[errorCode].tsx b/src/pages/errors/[errorCode].tsx
deleted file mode 100644
index 67466a1d991..00000000000
--- a/src/pages/errors/[errorCode].tsx
+++ /dev/null
@@ -1,160 +0,0 @@
-/**
- * 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 {Fragment, useMemo} 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';
-import {GetStaticPaths, GetStaticProps, InferGetStaticPropsType} from 'next';
-import {ErrorDecoderContext} from 'components/ErrorDecoderContext';
-import compileMDX from 'utils/compileMDX';
-
-interface ErrorDecoderProps {
-  errorCode: string | null;
-  errorMessage: string | null;
-  content: string;
-  toc: string;
-  meta: any;
-}
-
-export default function ErrorDecoderPage({
-  errorMessage,
-  errorCode,
-  content,
-}: InferGetStaticPropsType<typeof getStaticProps>) {
-  const parsedContent = useMemo<React.ReactNode>(
-    () => JSON.parse(content, reviveNodeOnClient),
-    [content]
-  );
-
-  return (
-    <ErrorDecoderContext value={{errorMessage, errorCode}}>
-      <Page
-        toc={[]}
-        meta={{
-          title: errorCode
-            ? `Minified React error #${errorCode}`
-            : 'Minified Error Decoder',
-        }}
-        routeTree={sidebarLearn as RouteItem}
-        section="unknown">
-        <div>{parsedContent}</div>
-        {/* <MaxWidth>
-          <P>
-            We highly recommend using the development build locally when debugging
-            your app since it tracks additional debug info and provides helpful
-            warnings about potential problems in your apps, but if you encounter
-            an exception while using the production build, this page will
-            reassemble the original error message.
-          </P>
-          <ErrorDecoder />
-        </MaxWidth> */}
-      </Page>
-    </ErrorDecoderContext>
-  );
-}
-
-// Deserialize a client React tree from JSON.
-function reviveNodeOnClient(parentPropertyName: unknown, val: any) {
-  if (Array.isArray(val) && val[0] == '$r') {
-    // Assume it's a React element.
-    let Type = val[1];
-    let key = val[2];
-    if (key == null) {
-      key = parentPropertyName; // Index within a parent.
-    }
-    let props = val[3];
-    if (Type === 'wrapper') {
-      Type = Fragment;
-      props = {children: props.children};
-    }
-    if (Type in MDXComponents) {
-      Type = MDXComponents[Type as keyof typeof MDXComponents];
-    }
-    if (!Type) {
-      console.error('Unknown type: ' + Type);
-      Type = Fragment;
-    }
-    return <Type key={key} {...props} />;
-  } else {
-    return val;
-  }
-}
-
-/**
- * Next.js Page Router doesn't have a way to cache specific data fetching request.
- * But since Next.js uses limited number of workers, keep "cachedErrorCodes" as a
- * module level memory cache can reduce the number of requests down to once per worker.
- *
- * TODO: use `next/unstable_cache` when migrating to Next.js App Router
- */
-let cachedErrorCodes: Record<string, string> | null = null;
-
-export const getStaticProps: GetStaticProps<ErrorDecoderProps> = async ({
-  params,
-}) => {
-  const errorCodes: {[key: string]: string} = (cachedErrorCodes ||= await (
-    await fetch(
-      'https://raw.githubusercontent.com/facebook/react/main/scripts/error-codes/codes.json'
-    )
-  ).json());
-
-  const code = typeof params?.errorCode === 'string' ? params?.errorCode : null;
-  if (code && !errorCodes[code]) {
-    return {
-      notFound: true,
-    };
-  }
-
-  const fs = require('fs');
-  const rootDir = process.cwd() + '/src/content/errors';
-
-  // Read MDX from the file.
-  let path = params?.errorCode || 'index';
-  let mdx;
-  try {
-    mdx = fs.readFileSync(rootDir + '/' + path + '.md', 'utf8');
-  } catch {
-    // if [errorCode].md is not found, fallback to generic.md
-    mdx = fs.readFileSync(rootDir + '/generic.md', 'utf8');
-  }
-
-  const {content, toc, meta} = await compileMDX(mdx, path, {code, errorCodes});
-
-  return {
-    props: {
-      content,
-      toc,
-      meta,
-      errorCode: code,
-      errorMessage: code ? errorCodes[code] : null,
-    },
-  };
-};
-
-export const getStaticPaths: GetStaticPaths = async () => {
-  /**
-   * Fetch error codes from GitHub
-   */
-  const errorCodes = (cachedErrorCodes ||= await (
-    await fetch(
-      'https://raw.githubusercontent.com/facebook/react/main/scripts/error-codes/codes.json'
-    )
-  ).json());
-
-  const paths = Object.keys(errorCodes).map((code) => ({
-    params: {
-      errorCode: code,
-    },
-  }));
-
-  return {
-    paths,
-    fallback: 'blocking',
-  };
-};
diff --git a/src/pages/errors/index.tsx b/src/pages/errors/index.tsx
deleted file mode 100644
index 0c154039cd7..00000000000
--- a/src/pages/errors/index.tsx
+++ /dev/null
@@ -1,10 +0,0 @@
-/**
- * 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 ErrorDecoderPage from './[errorCode]';
-export default ErrorDecoderPage;
-export {getStaticProps} from './[errorCode]';
diff --git a/yarn.lock b/yarn.lock
index a1ce77d1177..a13eea902a5 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -905,10 +905,10 @@
     "@docsearch/css" "3.8.3"
     algoliasearch "^5.14.2"
 
-"@emnapi/runtime@^1.2.0":
-  version "1.3.1"
-  resolved "https://registry.yarnpkg.com/@emnapi/runtime/-/runtime-1.3.1.tgz#0fcaa575afc31f455fd33534c19381cfce6c6f60"
-  integrity sha512-kEBmG8KyqtxJZv+ygbEim+KCGtIq1fC22Ms3S4ziXmYKm8uyoLX0MHONVKwp+9opg390VaKRNt4a7A9NwmpNhw==
+"@emnapi/runtime@^1.7.0":
+  version "1.7.1"
+  resolved "https://registry.yarnpkg.com/@emnapi/runtime/-/runtime-1.7.1.tgz#a73784e23f5d57287369c808197288b52276b791"
+  integrity sha512-PVtJr5CmLwYAU9PZDMITZoR5iAOShYREoR45EyyLrbntV50mdePTgUn4AmOw90Ifcj+x2kRjdzr1HP3RrNiHGA==
   dependencies:
     tslib "^2.4.0"
 
@@ -973,118 +973,152 @@
   resolved "https://registry.npmjs.org/@humanwhocodes/object-schema/-/object-schema-1.2.1.tgz"
   integrity sha512-ZnQMnLV4e7hDlUvw8H+U8ASL02SS2Gn6+9Ac3wGGLIe7+je2AeAOxPY+izIPJDfFDb7eDjev0Us8MO1iFRN8hA==
 
-"@img/sharp-darwin-arm64@0.33.5":
-  version "0.33.5"
-  resolved "https://registry.yarnpkg.com/@img/sharp-darwin-arm64/-/sharp-darwin-arm64-0.33.5.tgz#ef5b5a07862805f1e8145a377c8ba6e98813ca08"
-  integrity sha512-UT4p+iz/2H4twwAoLCqfA9UH5pI6DggwKEGuaPy7nCVQ8ZsiY5PIcrRvD1DzuY3qYL07NtIQcWnBSY/heikIFQ==
+"@img/colour@^1.0.0":
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/@img/colour/-/colour-1.0.0.tgz#d2fabb223455a793bf3bf9c70de3d28526aa8311"
+  integrity sha512-A5P/LfWGFSl6nsckYtjw9da+19jB8hkJ6ACTGcDfEJ0aE+l2n2El7dsVM7UVHZQ9s2lmYMWlrS21YLy2IR1LUw==
+
+"@img/sharp-darwin-arm64@0.34.5":
+  version "0.34.5"
+  resolved "https://registry.yarnpkg.com/@img/sharp-darwin-arm64/-/sharp-darwin-arm64-0.34.5.tgz#6e0732dcade126b6670af7aa17060b926835ea86"
+  integrity sha512-imtQ3WMJXbMY4fxb/Ndp6HBTNVtWCUI0WdobyheGf5+ad6xX8VIDO8u2xE4qc/fr08CKG/7dDseFtn6M6g/r3w==
   optionalDependencies:
-    "@img/sharp-libvips-darwin-arm64" "1.0.4"
+    "@img/sharp-libvips-darwin-arm64" "1.2.4"
 
-"@img/sharp-darwin-x64@0.33.5":
-  version "0.33.5"
-  resolved "https://registry.yarnpkg.com/@img/sharp-darwin-x64/-/sharp-darwin-x64-0.33.5.tgz#e03d3451cd9e664faa72948cc70a403ea4063d61"
-  integrity sha512-fyHac4jIc1ANYGRDxtiqelIbdWkIuQaI84Mv45KvGRRxSAa7o7d1ZKAOBaYbnepLC1WqxfpimdeWfvqqSGwR2Q==
+"@img/sharp-darwin-x64@0.34.5":
+  version "0.34.5"
+  resolved "https://registry.yarnpkg.com/@img/sharp-darwin-x64/-/sharp-darwin-x64-0.34.5.tgz#19bc1dd6eba6d5a96283498b9c9f401180ee9c7b"
+  integrity sha512-YNEFAF/4KQ/PeW0N+r+aVVsoIY0/qxxikF2SWdp+NRkmMB7y9LBZAVqQ4yhGCm/H3H270OSykqmQMKLBhBJDEw==
   optionalDependencies:
-    "@img/sharp-libvips-darwin-x64" "1.0.4"
+    "@img/sharp-libvips-darwin-x64" "1.2.4"
 
-"@img/sharp-libvips-darwin-arm64@1.0.4":
-  version "1.0.4"
-  resolved "https://registry.yarnpkg.com/@img/sharp-libvips-darwin-arm64/-/sharp-libvips-darwin-arm64-1.0.4.tgz#447c5026700c01a993c7804eb8af5f6e9868c07f"
-  integrity sha512-XblONe153h0O2zuFfTAbQYAX2JhYmDHeWikp1LM9Hul9gVPjFY427k6dFEcOL72O01QxQsWi761svJ/ev9xEDg==
+"@img/sharp-libvips-darwin-arm64@1.2.4":
+  version "1.2.4"
+  resolved "https://registry.yarnpkg.com/@img/sharp-libvips-darwin-arm64/-/sharp-libvips-darwin-arm64-1.2.4.tgz#2894c0cb87d42276c3889942e8e2db517a492c43"
+  integrity sha512-zqjjo7RatFfFoP0MkQ51jfuFZBnVE2pRiaydKJ1G/rHZvnsrHAOcQALIi9sA5co5xenQdTugCvtb1cuf78Vf4g==
 
-"@img/sharp-libvips-darwin-x64@1.0.4":
-  version "1.0.4"
-  resolved "https://registry.yarnpkg.com/@img/sharp-libvips-darwin-x64/-/sharp-libvips-darwin-x64-1.0.4.tgz#e0456f8f7c623f9dbfbdc77383caa72281d86062"
-  integrity sha512-xnGR8YuZYfJGmWPvmlunFaWJsb9T/AO2ykoP3Fz/0X5XV2aoYBPkX6xqCQvUTKKiLddarLaxpzNe+b1hjeWHAQ==
+"@img/sharp-libvips-darwin-x64@1.2.4":
+  version "1.2.4"
+  resolved "https://registry.yarnpkg.com/@img/sharp-libvips-darwin-x64/-/sharp-libvips-darwin-x64-1.2.4.tgz#e63681f4539a94af9cd17246ed8881734386f8cc"
+  integrity sha512-1IOd5xfVhlGwX+zXv2N93k0yMONvUlANylbJw1eTah8K/Jtpi15KC+WSiaX/nBmbm2HxRM1gZ0nSdjSsrZbGKg==
 
-"@img/sharp-libvips-linux-arm64@1.0.4":
-  version "1.0.4"
-  resolved "https://registry.yarnpkg.com/@img/sharp-libvips-linux-arm64/-/sharp-libvips-linux-arm64-1.0.4.tgz#979b1c66c9a91f7ff2893556ef267f90ebe51704"
-  integrity sha512-9B+taZ8DlyyqzZQnoeIvDVR/2F4EbMepXMc/NdVbkzsJbzkUjhXv/70GQJ7tdLA4YJgNP25zukcxpX2/SueNrA==
+"@img/sharp-libvips-linux-arm64@1.2.4":
+  version "1.2.4"
+  resolved "https://registry.yarnpkg.com/@img/sharp-libvips-linux-arm64/-/sharp-libvips-linux-arm64-1.2.4.tgz#b1b288b36864b3bce545ad91fa6dadcf1a4ad318"
+  integrity sha512-excjX8DfsIcJ10x1Kzr4RcWe1edC9PquDRRPx3YVCvQv+U5p7Yin2s32ftzikXojb1PIFc/9Mt28/y+iRklkrw==
 
-"@img/sharp-libvips-linux-arm@1.0.5":
-  version "1.0.5"
-  resolved "https://registry.yarnpkg.com/@img/sharp-libvips-linux-arm/-/sharp-libvips-linux-arm-1.0.5.tgz#99f922d4e15216ec205dcb6891b721bfd2884197"
-  integrity sha512-gvcC4ACAOPRNATg/ov8/MnbxFDJqf/pDePbBnuBDcjsI8PssmjoKMAz4LtLaVi+OnSb5FK/yIOamqDwGmXW32g==
+"@img/sharp-libvips-linux-arm@1.2.4":
+  version "1.2.4"
+  resolved "https://registry.yarnpkg.com/@img/sharp-libvips-linux-arm/-/sharp-libvips-linux-arm-1.2.4.tgz#b9260dd1ebe6f9e3bdbcbdcac9d2ac125f35852d"
+  integrity sha512-bFI7xcKFELdiNCVov8e44Ia4u2byA+l3XtsAj+Q8tfCwO6BQ8iDojYdvoPMqsKDkuoOo+X6HZA0s0q11ANMQ8A==
 
-"@img/sharp-libvips-linux-s390x@1.0.4":
-  version "1.0.4"
-  resolved "https://registry.yarnpkg.com/@img/sharp-libvips-linux-s390x/-/sharp-libvips-linux-s390x-1.0.4.tgz#f8a5eb1f374a082f72b3f45e2fb25b8118a8a5ce"
-  integrity sha512-u7Wz6ntiSSgGSGcjZ55im6uvTrOxSIS8/dgoVMoiGE9I6JAfU50yH5BoDlYA1tcuGS7g/QNtetJnxA6QEsCVTA==
+"@img/sharp-libvips-linux-ppc64@1.2.4":
+  version "1.2.4"
+  resolved "https://registry.yarnpkg.com/@img/sharp-libvips-linux-ppc64/-/sharp-libvips-linux-ppc64-1.2.4.tgz#4b83ecf2a829057222b38848c7b022e7b4d07aa7"
+  integrity sha512-FMuvGijLDYG6lW+b/UvyilUWu5Ayu+3r2d1S8notiGCIyYU/76eig1UfMmkZ7vwgOrzKzlQbFSuQfgm7GYUPpA==
 
-"@img/sharp-libvips-linux-x64@1.0.4":
-  version "1.0.4"
-  resolved "https://registry.yarnpkg.com/@img/sharp-libvips-linux-x64/-/sharp-libvips-linux-x64-1.0.4.tgz#d4c4619cdd157774906e15770ee119931c7ef5e0"
-  integrity sha512-MmWmQ3iPFZr0Iev+BAgVMb3ZyC4KeFc3jFxnNbEPas60e1cIfevbtuyf9nDGIzOaW9PdnDciJm+wFFaTlj5xYw==
+"@img/sharp-libvips-linux-riscv64@1.2.4":
+  version "1.2.4"
+  resolved "https://registry.yarnpkg.com/@img/sharp-libvips-linux-riscv64/-/sharp-libvips-linux-riscv64-1.2.4.tgz#880b4678009e5a2080af192332b00b0aaf8a48de"
+  integrity sha512-oVDbcR4zUC0ce82teubSm+x6ETixtKZBh/qbREIOcI3cULzDyb18Sr/Wcyx7NRQeQzOiHTNbZFF1UwPS2scyGA==
 
-"@img/sharp-libvips-linuxmusl-arm64@1.0.4":
-  version "1.0.4"
-  resolved "https://registry.yarnpkg.com/@img/sharp-libvips-linuxmusl-arm64/-/sharp-libvips-linuxmusl-arm64-1.0.4.tgz#166778da0f48dd2bded1fa3033cee6b588f0d5d5"
-  integrity sha512-9Ti+BbTYDcsbp4wfYib8Ctm1ilkugkA/uscUn6UXK1ldpC1JjiXbLfFZtRlBhjPZ5o1NCLiDbg8fhUPKStHoTA==
+"@img/sharp-libvips-linux-s390x@1.2.4":
+  version "1.2.4"
+  resolved "https://registry.yarnpkg.com/@img/sharp-libvips-linux-s390x/-/sharp-libvips-linux-s390x-1.2.4.tgz#74f343c8e10fad821b38f75ced30488939dc59ec"
+  integrity sha512-qmp9VrzgPgMoGZyPvrQHqk02uyjA0/QrTO26Tqk6l4ZV0MPWIW6LTkqOIov+J1yEu7MbFQaDpwdwJKhbJvuRxQ==
 
-"@img/sharp-libvips-linuxmusl-x64@1.0.4":
-  version "1.0.4"
-  resolved "https://registry.yarnpkg.com/@img/sharp-libvips-linuxmusl-x64/-/sharp-libvips-linuxmusl-x64-1.0.4.tgz#93794e4d7720b077fcad3e02982f2f1c246751ff"
-  integrity sha512-viYN1KX9m+/hGkJtvYYp+CCLgnJXwiQB39damAO7WMdKWlIhmYTfHjwSbQeUK/20vY154mwezd9HflVFM1wVSw==
+"@img/sharp-libvips-linux-x64@1.2.4":
+  version "1.2.4"
+  resolved "https://registry.yarnpkg.com/@img/sharp-libvips-linux-x64/-/sharp-libvips-linux-x64-1.2.4.tgz#df4183e8bd8410f7d61b66859a35edeab0a531ce"
+  integrity sha512-tJxiiLsmHc9Ax1bz3oaOYBURTXGIRDODBqhveVHonrHJ9/+k89qbLl0bcJns+e4t4rvaNBxaEZsFtSfAdquPrw==
+
+"@img/sharp-libvips-linuxmusl-arm64@1.2.4":
+  version "1.2.4"
+  resolved "https://registry.yarnpkg.com/@img/sharp-libvips-linuxmusl-arm64/-/sharp-libvips-linuxmusl-arm64-1.2.4.tgz#c8d6b48211df67137541007ee8d1b7b1f8ca8e06"
+  integrity sha512-FVQHuwx1IIuNow9QAbYUzJ+En8KcVm9Lk5+uGUQJHaZmMECZmOlix9HnH7n1TRkXMS0pGxIJokIVB9SuqZGGXw==
+
+"@img/sharp-libvips-linuxmusl-x64@1.2.4":
+  version "1.2.4"
+  resolved "https://registry.yarnpkg.com/@img/sharp-libvips-linuxmusl-x64/-/sharp-libvips-linuxmusl-x64-1.2.4.tgz#be11c75bee5b080cbee31a153a8779448f919f75"
+  integrity sha512-+LpyBk7L44ZIXwz/VYfglaX/okxezESc6UxDSoyo2Ks6Jxc4Y7sGjpgU9s4PMgqgjj1gZCylTieNamqA1MF7Dg==
+
+"@img/sharp-linux-arm64@0.34.5":
+  version "0.34.5"
+  resolved "https://registry.yarnpkg.com/@img/sharp-linux-arm64/-/sharp-linux-arm64-0.34.5.tgz#7aa7764ef9c001f15e610546d42fce56911790cc"
+  integrity sha512-bKQzaJRY/bkPOXyKx5EVup7qkaojECG6NLYswgktOZjaXecSAeCWiZwwiFf3/Y+O1HrauiE3FVsGxFg8c24rZg==
+  optionalDependencies:
+    "@img/sharp-libvips-linux-arm64" "1.2.4"
+
+"@img/sharp-linux-arm@0.34.5":
+  version "0.34.5"
+  resolved "https://registry.yarnpkg.com/@img/sharp-linux-arm/-/sharp-linux-arm-0.34.5.tgz#5fb0c3695dd12522d39c3ff7a6bc816461780a0d"
+  integrity sha512-9dLqsvwtg1uuXBGZKsxem9595+ujv0sJ6Vi8wcTANSFpwV/GONat5eCkzQo/1O6zRIkh0m/8+5BjrRr7jDUSZw==
+  optionalDependencies:
+    "@img/sharp-libvips-linux-arm" "1.2.4"
 
-"@img/sharp-linux-arm64@0.33.5":
-  version "0.33.5"
-  resolved "https://registry.yarnpkg.com/@img/sharp-linux-arm64/-/sharp-linux-arm64-0.33.5.tgz#edb0697e7a8279c9fc829a60fc35644c4839bb22"
-  integrity sha512-JMVv+AMRyGOHtO1RFBiJy/MBsgz0x4AWrT6QoEVVTyh1E39TrCUpTRI7mx9VksGX4awWASxqCYLCV4wBZHAYxA==
+"@img/sharp-linux-ppc64@0.34.5":
+  version "0.34.5"
+  resolved "https://registry.yarnpkg.com/@img/sharp-linux-ppc64/-/sharp-linux-ppc64-0.34.5.tgz#9c213a81520a20caf66978f3d4c07456ff2e0813"
+  integrity sha512-7zznwNaqW6YtsfrGGDA6BRkISKAAE1Jo0QdpNYXNMHu2+0dTrPflTLNkpc8l7MUP5M16ZJcUvysVWWrMefZquA==
   optionalDependencies:
-    "@img/sharp-libvips-linux-arm64" "1.0.4"
+    "@img/sharp-libvips-linux-ppc64" "1.2.4"
 
-"@img/sharp-linux-arm@0.33.5":
-  version "0.33.5"
-  resolved "https://registry.yarnpkg.com/@img/sharp-linux-arm/-/sharp-linux-arm-0.33.5.tgz#422c1a352e7b5832842577dc51602bcd5b6f5eff"
-  integrity sha512-JTS1eldqZbJxjvKaAkxhZmBqPRGmxgu+qFKSInv8moZ2AmT5Yib3EQ1c6gp493HvrvV8QgdOXdyaIBrhvFhBMQ==
+"@img/sharp-linux-riscv64@0.34.5":
+  version "0.34.5"
+  resolved "https://registry.yarnpkg.com/@img/sharp-linux-riscv64/-/sharp-linux-riscv64-0.34.5.tgz#cdd28182774eadbe04f62675a16aabbccb833f60"
+  integrity sha512-51gJuLPTKa7piYPaVs8GmByo7/U7/7TZOq+cnXJIHZKavIRHAP77e3N2HEl3dgiqdD/w0yUfiJnII77PuDDFdw==
   optionalDependencies:
-    "@img/sharp-libvips-linux-arm" "1.0.5"
+    "@img/sharp-libvips-linux-riscv64" "1.2.4"
 
-"@img/sharp-linux-s390x@0.33.5":
-  version "0.33.5"
-  resolved "https://registry.yarnpkg.com/@img/sharp-linux-s390x/-/sharp-linux-s390x-0.33.5.tgz#f5c077926b48e97e4a04d004dfaf175972059667"
-  integrity sha512-y/5PCd+mP4CA/sPDKl2961b+C9d+vPAveS33s6Z3zfASk2j5upL6fXVPZi7ztePZ5CuH+1kW8JtvxgbuXHRa4Q==
+"@img/sharp-linux-s390x@0.34.5":
+  version "0.34.5"
+  resolved "https://registry.yarnpkg.com/@img/sharp-linux-s390x/-/sharp-linux-s390x-0.34.5.tgz#93eac601b9f329bb27917e0e19098c722d630df7"
+  integrity sha512-nQtCk0PdKfho3eC5MrbQoigJ2gd1CgddUMkabUj+rBevs8tZ2cULOx46E7oyX+04WGfABgIwmMC0VqieTiR4jg==
   optionalDependencies:
-    "@img/sharp-libvips-linux-s390x" "1.0.4"
+    "@img/sharp-libvips-linux-s390x" "1.2.4"
 
-"@img/sharp-linux-x64@0.33.5":
-  version "0.33.5"
-  resolved "https://registry.yarnpkg.com/@img/sharp-linux-x64/-/sharp-linux-x64-0.33.5.tgz#d806e0afd71ae6775cc87f0da8f2d03a7c2209cb"
-  integrity sha512-opC+Ok5pRNAzuvq1AG0ar+1owsu842/Ab+4qvU879ippJBHvyY5n2mxF1izXqkPYlGuP/M556uh53jRLJmzTWA==
+"@img/sharp-linux-x64@0.34.5":
+  version "0.34.5"
+  resolved "https://registry.yarnpkg.com/@img/sharp-linux-x64/-/sharp-linux-x64-0.34.5.tgz#55abc7cd754ffca5002b6c2b719abdfc846819a8"
+  integrity sha512-MEzd8HPKxVxVenwAa+JRPwEC7QFjoPWuS5NZnBt6B3pu7EG2Ge0id1oLHZpPJdn3OQK+BQDiw9zStiHBTJQQQQ==
   optionalDependencies:
-    "@img/sharp-libvips-linux-x64" "1.0.4"
+    "@img/sharp-libvips-linux-x64" "1.2.4"
 
-"@img/sharp-linuxmusl-arm64@0.33.5":
-  version "0.33.5"
-  resolved "https://registry.yarnpkg.com/@img/sharp-linuxmusl-arm64/-/sharp-linuxmusl-arm64-0.33.5.tgz#252975b915894fb315af5deea174651e208d3d6b"
-  integrity sha512-XrHMZwGQGvJg2V/oRSUfSAfjfPxO+4DkiRh6p2AFjLQztWUuY/o8Mq0eMQVIY7HJ1CDQUJlxGGZRw1a5bqmd1g==
+"@img/sharp-linuxmusl-arm64@0.34.5":
+  version "0.34.5"
+  resolved "https://registry.yarnpkg.com/@img/sharp-linuxmusl-arm64/-/sharp-linuxmusl-arm64-0.34.5.tgz#d6515ee971bb62f73001a4829b9d865a11b77086"
+  integrity sha512-fprJR6GtRsMt6Kyfq44IsChVZeGN97gTD331weR1ex1c1rypDEABN6Tm2xa1wE6lYb5DdEnk03NZPqA7Id21yg==
   optionalDependencies:
-    "@img/sharp-libvips-linuxmusl-arm64" "1.0.4"
+    "@img/sharp-libvips-linuxmusl-arm64" "1.2.4"
 
-"@img/sharp-linuxmusl-x64@0.33.5":
-  version "0.33.5"
-  resolved "https://registry.yarnpkg.com/@img/sharp-linuxmusl-x64/-/sharp-linuxmusl-x64-0.33.5.tgz#3f4609ac5d8ef8ec7dadee80b560961a60fd4f48"
-  integrity sha512-WT+d/cgqKkkKySYmqoZ8y3pxx7lx9vVejxW/W4DOFMYVSkErR+w7mf2u8m/y4+xHe7yY9DAXQMWQhpnMuFfScw==
+"@img/sharp-linuxmusl-x64@0.34.5":
+  version "0.34.5"
+  resolved "https://registry.yarnpkg.com/@img/sharp-linuxmusl-x64/-/sharp-linuxmusl-x64-0.34.5.tgz#d97978aec7c5212f999714f2f5b736457e12ee9f"
+  integrity sha512-Jg8wNT1MUzIvhBFxViqrEhWDGzqymo3sV7z7ZsaWbZNDLXRJZoRGrjulp60YYtV4wfY8VIKcWidjojlLcWrd8Q==
   optionalDependencies:
-    "@img/sharp-libvips-linuxmusl-x64" "1.0.4"
+    "@img/sharp-libvips-linuxmusl-x64" "1.2.4"
 
-"@img/sharp-wasm32@0.33.5":
-  version "0.33.5"
-  resolved "https://registry.yarnpkg.com/@img/sharp-wasm32/-/sharp-wasm32-0.33.5.tgz#6f44f3283069d935bb5ca5813153572f3e6f61a1"
-  integrity sha512-ykUW4LVGaMcU9lu9thv85CbRMAwfeadCJHRsg2GmeRa/cJxsVY9Rbd57JcMxBkKHag5U/x7TSBpScF4U8ElVzg==
+"@img/sharp-wasm32@0.34.5":
+  version "0.34.5"
+  resolved "https://registry.yarnpkg.com/@img/sharp-wasm32/-/sharp-wasm32-0.34.5.tgz#2f15803aa626f8c59dd7c9d0bbc766f1ab52cfa0"
+  integrity sha512-OdWTEiVkY2PHwqkbBI8frFxQQFekHaSSkUIJkwzclWZe64O1X4UlUjqqqLaPbUpMOQk6FBu/HtlGXNblIs0huw==
   dependencies:
-    "@emnapi/runtime" "^1.2.0"
+    "@emnapi/runtime" "^1.7.0"
 
-"@img/sharp-win32-ia32@0.33.5":
-  version "0.33.5"
-  resolved "https://registry.yarnpkg.com/@img/sharp-win32-ia32/-/sharp-win32-ia32-0.33.5.tgz#1a0c839a40c5351e9885628c85f2e5dfd02b52a9"
-  integrity sha512-T36PblLaTwuVJ/zw/LaH0PdZkRz5rd3SmMHX8GSmR7vtNSP5Z6bQkExdSK7xGWyxLw4sUknBuugTelgw2faBbQ==
+"@img/sharp-win32-arm64@0.34.5":
+  version "0.34.5"
+  resolved "https://registry.yarnpkg.com/@img/sharp-win32-arm64/-/sharp-win32-arm64-0.34.5.tgz#3706e9e3ac35fddfc1c87f94e849f1b75307ce0a"
+  integrity sha512-WQ3AgWCWYSb2yt+IG8mnC6Jdk9Whs7O0gxphblsLvdhSpSTtmu69ZG1Gkb6NuvxsNACwiPV6cNSZNzt0KPsw7g==
 
-"@img/sharp-win32-x64@0.33.5":
-  version "0.33.5"
-  resolved "https://registry.yarnpkg.com/@img/sharp-win32-x64/-/sharp-win32-x64-0.33.5.tgz#56f00962ff0c4e0eb93d34a047d29fa995e3e342"
-  integrity sha512-MpY/o8/8kj+EcnxwvrP4aTJSWw/aZ7JIGR4aBeZkZw5B7/Jn+tY9/VNwtcoGmdT7GfggGIU4kygOMSbYnOrAbg==
+"@img/sharp-win32-ia32@0.34.5":
+  version "0.34.5"
+  resolved "https://registry.yarnpkg.com/@img/sharp-win32-ia32/-/sharp-win32-ia32-0.34.5.tgz#0b71166599b049e032f085fb9263e02f4e4788de"
+  integrity sha512-FV9m/7NmeCmSHDD5j4+4pNI8Cp3aW+JvLoXcTUo0IqyjSfAZJ8dIUmijx1qaJsIiU+Hosw6xM5KijAWRJCSgNg==
+
+"@img/sharp-win32-x64@0.34.5":
+  version "0.34.5"
+  resolved "https://registry.yarnpkg.com/@img/sharp-win32-x64/-/sharp-win32-x64-0.34.5.tgz#a81ffb00e69267cd0a1d626eaedb8a8430b2b2f8"
+  integrity sha512-+29YMsqY2/9eFEiW93eqWnuLcWcufowXewwSNIT6UwZdUUCrM3oFjMWH/Z6/TMmb4hlFenmfAVbpWeup2jryCw==
 
 "@jridgewell/gen-mapping@^0.1.0":
   version "0.1.1"
@@ -1225,10 +1259,10 @@
     unist-util-visit "^4.0.0"
     vfile "^5.0.0"
 
-"@next/env@15.1.11":
-  version "15.1.11"
-  resolved "https://registry.yarnpkg.com/@next/env/-/env-15.1.11.tgz#599a126f7ce56decc39cea46668cb60d96b66bc6"
-  integrity sha512-yp++FVldfLglEG5LoS2rXhGypPyoSOyY0kxZQJ2vnlYJeP8o318t5DrDu5Tqzr03qAhDWllAID/kOCsXNLcwKw==
+"@next/env@15.5.9":
+  version "15.5.9"
+  resolved "https://registry.yarnpkg.com/@next/env/-/env-15.5.9.tgz#53c2c34dc17cd87b61f70c6cc211e303123b2ab8"
+  integrity sha512-4GlTZ+EJM7WaW2HEZcyU317tIQDjkQIyENDLxYJfSWlfqguN+dHkZgyQTV/7ykvobU7yEH5gKvreNrH4B6QgIg==
 
 "@next/eslint-plugin-next@12.0.3":
   version "12.0.3"
@@ -1237,45 +1271,45 @@
   dependencies:
     glob "7.1.7"
 
-"@next/swc-darwin-arm64@15.1.9":
-  version "15.1.9"
-  resolved "https://registry.yarnpkg.com/@next/swc-darwin-arm64/-/swc-darwin-arm64-15.1.9.tgz#7b95fc3b2cd5108b514c949c3bddb3a9b42a714e"
-  integrity sha512-sQF6MfW4nk0PwMYYq8xNgqyxZJGIJV16QqNDgaZ5ze9YoVzm4/YNx17X0exZudayjL9PF0/5RGffDtzXapch0Q==
-
-"@next/swc-darwin-x64@15.1.9":
-  version "15.1.9"
-  resolved "https://registry.yarnpkg.com/@next/swc-darwin-x64/-/swc-darwin-x64-15.1.9.tgz#bda6b37e0deeb64f4139cc70b37e370bd3367be8"
-  integrity sha512-fp0c1rB6jZvdSDhprOur36xzQvqelAkNRXM/An92sKjjtaJxjlqJR8jiQLQImPsClIu8amQn+ZzFwl1lsEf62w==
-
-"@next/swc-linux-arm64-gnu@15.1.9":
-  version "15.1.9"
-  resolved "https://registry.yarnpkg.com/@next/swc-linux-arm64-gnu/-/swc-linux-arm64-gnu-15.1.9.tgz#546717f65de5fa610cd211183bd1be63050ab1c4"
-  integrity sha512-77rYykF6UtaXvxh9YyRIKoaYPI6/YX6cy8j1DL5/1XkjbfOwFDfTEhH7YGPqG/ePl+emBcbDYC2elgEqY2e+ag==
-
-"@next/swc-linux-arm64-musl@15.1.9":
-  version "15.1.9"
-  resolved "https://registry.yarnpkg.com/@next/swc-linux-arm64-musl/-/swc-linux-arm64-musl-15.1.9.tgz#3594f47a94fd52e1aba00f59793171de9386f71a"
-  integrity sha512-uZ1HazKcyWC7RA6j+S/8aYgvxmDqwnG+gE5S9MhY7BTMj7ahXKunpKuX8/BA2M7OvINLv7LTzoobQbw928p3WA==
-
-"@next/swc-linux-x64-gnu@15.1.9":
-  version "15.1.9"
-  resolved "https://registry.yarnpkg.com/@next/swc-linux-x64-gnu/-/swc-linux-x64-gnu-15.1.9.tgz#77cc834636688e44fea4c9cee800649a4ed92b0d"
-  integrity sha512-gQIX1d3ct2RBlgbbWOrp+SHExmtmFm/HSW1Do5sSGMDyzbkYhS2sdq5LRDJWWsQu+/MqpgJHqJT6ORolKp/U1g==
-
-"@next/swc-linux-x64-musl@15.1.9":
-  version "15.1.9"
-  resolved "https://registry.yarnpkg.com/@next/swc-linux-x64-musl/-/swc-linux-x64-musl-15.1.9.tgz#88783a8968d0c0e4f274b68569b73c19ee2feecb"
-  integrity sha512-fJOwxAbCeq6Vo7pXZGDP6iA4+yIBGshp7ie2Evvge7S7lywyg7b/SGqcvWq/jYcmd0EbXdb7hBfdqSQwTtGTPg==
-
-"@next/swc-win32-arm64-msvc@15.1.9":
-  version "15.1.9"
-  resolved "https://registry.yarnpkg.com/@next/swc-win32-arm64-msvc/-/swc-win32-arm64-msvc-15.1.9.tgz#1b7024cee3eefe4bcf8f81e7cbffe6aeb15d32ea"
-  integrity sha512-crfbUkAd9PVg9nGfyjSzQbz82dPvc4pb1TeP0ZaAdGzTH6OfTU9kxidpFIogw0DYIEadI7hRSvuihy2NezkaNQ==
-
-"@next/swc-win32-x64-msvc@15.1.9":
-  version "15.1.9"
-  resolved "https://registry.yarnpkg.com/@next/swc-win32-x64-msvc/-/swc-win32-x64-msvc-15.1.9.tgz#92044825d0f9e017d6a27ab69fc8c8f5ca9dc239"
-  integrity sha512-SBB0oA4E2a0axUrUwLqXlLkSn+bRx9OWU6LheqmRrO53QEAJP7JquKh3kF0jRzmlYOWFZtQwyIWJMEJMtvvDcQ==
+"@next/swc-darwin-arm64@15.5.7":
+  version "15.5.7"
+  resolved "https://registry.yarnpkg.com/@next/swc-darwin-arm64/-/swc-darwin-arm64-15.5.7.tgz#f0c9ccfec2cd87cbd4b241ce4c779a7017aed958"
+  integrity sha512-IZwtxCEpI91HVU/rAUOOobWSZv4P2DeTtNaCdHqLcTJU4wdNXgAySvKa/qJCgR5m6KI8UsKDXtO2B31jcaw1Yw==
+
+"@next/swc-darwin-x64@15.5.7":
+  version "15.5.7"
+  resolved "https://registry.yarnpkg.com/@next/swc-darwin-x64/-/swc-darwin-x64-15.5.7.tgz#18009e9fcffc5c0687cc9db24182ddeac56280d9"
+  integrity sha512-UP6CaDBcqaCBuiq/gfCEJw7sPEoX1aIjZHnBWN9v9qYHQdMKvCKcAVs4OX1vIjeE+tC5EIuwDTVIoXpUes29lg==
+
+"@next/swc-linux-arm64-gnu@15.5.7":
+  version "15.5.7"
+  resolved "https://registry.yarnpkg.com/@next/swc-linux-arm64-gnu/-/swc-linux-arm64-gnu-15.5.7.tgz#fe7c7e08264cf522d4e524299f6d3e63d68d579a"
+  integrity sha512-NCslw3GrNIw7OgmRBxHtdWFQYhexoUCq+0oS2ccjyYLtcn1SzGzeM54jpTFonIMUjNbHmpKpziXnpxhSWLcmBA==
+
+"@next/swc-linux-arm64-musl@15.5.7":
+  version "15.5.7"
+  resolved "https://registry.yarnpkg.com/@next/swc-linux-arm64-musl/-/swc-linux-arm64-musl-15.5.7.tgz#94228fe293475ec34a5a54284e1056876f43a3cf"
+  integrity sha512-nfymt+SE5cvtTrG9u1wdoxBr9bVB7mtKTcj0ltRn6gkP/2Nu1zM5ei8rwP9qKQP0Y//umK+TtkKgNtfboBxRrw==
+
+"@next/swc-linux-x64-gnu@15.5.7":
+  version "15.5.7"
+  resolved "https://registry.yarnpkg.com/@next/swc-linux-x64-gnu/-/swc-linux-x64-gnu-15.5.7.tgz#078c71201dfe7fcfb8fa6dc92aae6c94bc011cdc"
+  integrity sha512-hvXcZvCaaEbCZcVzcY7E1uXN9xWZfFvkNHwbe/n4OkRhFWrs1J1QV+4U1BN06tXLdaS4DazEGXwgqnu/VMcmqw==
+
+"@next/swc-linux-x64-musl@15.5.7":
+  version "15.5.7"
+  resolved "https://registry.yarnpkg.com/@next/swc-linux-x64-musl/-/swc-linux-x64-musl-15.5.7.tgz#72947f5357f9226292353e0bb775643da3c7a182"
+  integrity sha512-4IUO539b8FmF0odY6/SqANJdgwn1xs1GkPO5doZugwZ3ETF6JUdckk7RGmsfSf7ws8Qb2YB5It33mvNL/0acqA==
+
+"@next/swc-win32-arm64-msvc@15.5.7":
+  version "15.5.7"
+  resolved "https://registry.yarnpkg.com/@next/swc-win32-arm64-msvc/-/swc-win32-arm64-msvc-15.5.7.tgz#397b912cd51c6a80e32b9c0507ecd82514353941"
+  integrity sha512-CpJVTkYI3ZajQkC5vajM7/ApKJUOlm6uP4BknM3XKvJ7VXAvCqSjSLmM0LKdYzn6nBJVSjdclx8nYJSa3xlTgQ==
+
+"@next/swc-win32-x64-msvc@15.5.7":
+  version "15.5.7"
+  resolved "https://registry.yarnpkg.com/@next/swc-win32-x64-msvc/-/swc-win32-x64-msvc-15.5.7.tgz#e02b543d9dc6c1631d4ac239cb1177245dfedfe4"
+  integrity sha512-gMzgBX164I6DN+9/PGA+9dQiwmTkE4TloBNx8Kv9UiGARsr9Nba7IpcBRA1iTV9vwlYnrE3Uy6I7Aj6qLjQuqw==
 
 "@nodelib/fs.scandir@2.1.5":
   version "2.1.5"
@@ -1572,11 +1606,6 @@
   resolved "https://registry.npmjs.org/@stitches/core/-/core-1.2.8.tgz"
   integrity sha512-Gfkvwk9o9kE9r9XNBmJRfV8zONvXThnm1tcuojL04Uy5uRyqg93DC83lDebl0rocZCfKSjUv+fWYtMQmEDJldg==
 
-"@swc/counter@0.1.3":
-  version "0.1.3"
-  resolved "https://registry.yarnpkg.com/@swc/counter/-/counter-0.1.3.tgz#cc7463bd02949611c6329596fccd2b0ec782b0e9"
-  integrity sha512-e2BR4lsJkkRlKZ/qCHPw9ZaSxc0MVUd7gtbtaB7aMvHeJVYe8sOB8DBZkP2DtISHGSku9sCK6T6cnY0CtXrOCQ==
-
 "@swc/helpers@0.5.15":
   version "0.5.15"
   resolved "https://registry.yarnpkg.com/@swc/helpers/-/helpers-0.5.15.tgz#79efab344c5819ecf83a43f3f9f811fc84b516d7"
@@ -2382,13 +2411,6 @@ buffer@^6.0.3:
     base64-js "^1.3.1"
     ieee754 "^1.2.1"
 
-busboy@1.6.0:
-  version "1.6.0"
-  resolved "https://registry.npmjs.org/busboy/-/busboy-1.6.0.tgz"
-  integrity sha512-8SFQbg/0hQ9xy3UNTB0YEnsNBbWfhf7RtnzpL7TkBiTBRfrQ9Fxcnz7VJsleJpyp6rVLvXiuORqjlHi5q+PYuA==
-  dependencies:
-    streamsearch "^1.1.0"
-
 bytes@3.1.2:
   version "3.1.2"
   resolved "https://registry.npmjs.org/bytes/-/bytes-3.1.2.tgz"
@@ -2587,27 +2609,11 @@ color-name@1.1.3:
   resolved "https://registry.npmjs.org/color-name/-/color-name-1.1.3.tgz"
   integrity sha1-p9BVi9icQveV3UIyj3QIMcpTvCU=
 
-color-name@^1.0.0, color-name@~1.1.4:
+color-name@~1.1.4:
   version "1.1.4"
   resolved "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz"
   integrity sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==
 
-color-string@^1.9.0:
-  version "1.9.1"
-  resolved "https://registry.yarnpkg.com/color-string/-/color-string-1.9.1.tgz#4467f9146f036f855b764dfb5bf8582bf342c7a4"
-  integrity sha512-shrVawQFojnZv6xM40anx4CkoDP+fZsw/ZerEMsW/pyzsRbElpsL/DBVW7q3ExxwusdNXI3lXpuhEZkzs8p5Eg==
-  dependencies:
-    color-name "^1.0.0"
-    simple-swizzle "^0.2.2"
-
-color@^4.2.3:
-  version "4.2.3"
-  resolved "https://registry.yarnpkg.com/color/-/color-4.2.3.tgz#d781ecb5e57224ee43ea9627560107c0e0c6463a"
-  integrity sha512-1rXeuUUiGGrykh+CeBdu5Ie7OJwinCgQY0bc7GCRxy5xVHy+moaqkpL/jqQq0MtQOeYcrqEz4abc5f0KtU7W4A==
-  dependencies:
-    color-convert "^2.0.1"
-    color-string "^1.9.0"
-
 colorette@^2.0.16:
   version "2.0.16"
   resolved "https://registry.npmjs.org/colorette/-/colorette-2.0.16.tgz"
@@ -2923,10 +2929,10 @@ destroy@1.2.0:
   resolved "https://registry.npmjs.org/destroy/-/destroy-1.2.0.tgz"
   integrity sha512-2sJGJTaXIIaR1w4iJSNoN0hnMY7Gpc/n8D4qSCJw8QqFWXf7cuAgnEHxBpweaVcPevC2l3KpjYCx3NypQQgaJg==
 
-detect-libc@^2.0.3:
-  version "2.0.3"
-  resolved "https://registry.yarnpkg.com/detect-libc/-/detect-libc-2.0.3.tgz#f0cd503b40f9939b894697d19ad50895e30cf700"
-  integrity sha512-bwy0MGW55bG41VqxxypOsdSdGqLwXPI/focwgTYCFMbdUiBAxLg9CFzG08sz2aqzknwiX7Hkl0bQENjg8iLByw==
+detect-libc@^2.1.2:
+  version "2.1.2"
+  resolved "https://registry.yarnpkg.com/detect-libc/-/detect-libc-2.1.2.tgz#689c5dcdc1900ef5583a4cb9f6d7b473742074ad"
+  integrity sha512-Btj2BOOO83o3WyH59e8MgXsxEQVcarkUOpEYrubB0urwnN10yQ364rsiByU11nZlqWYZm05i/of7io4mzihBtQ==
 
 detect-node-es@^1.1.0:
   version "1.1.0"
@@ -4414,11 +4420,6 @@ is-arrayish@^0.2.1:
   resolved "https://registry.npmjs.org/is-arrayish/-/is-arrayish-0.2.1.tgz"
   integrity sha1-d8mYQFJ6qOyxqLppe4BkWnqSap0=
 
-is-arrayish@^0.3.1:
-  version "0.3.2"
-  resolved "https://registry.yarnpkg.com/is-arrayish/-/is-arrayish-0.3.2.tgz#4574a2ae56f7ab206896fb431eaeed066fdf8f03"
-  integrity sha512-eVRqCvVlZbuw3GrM63ovNSNAeA1K16kaR/LRY/92w0zxQ5/1YzwblUX652i4Xs9RwAGjW9d9y6X88t8OaAJfWQ==
-
 is-async-function@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/is-async-function/-/is-async-function-2.0.0.tgz#8e4418efd3e5d3a6ebb0164c05ef5afb69aa9646"
@@ -5797,28 +5798,26 @@ next-tick@^1.1.0:
   resolved "https://registry.npmjs.org/next-tick/-/next-tick-1.1.0.tgz"
   integrity sha512-CXdUiJembsNjuToQvxayPZF9Vqht7hewsvy2sOWafLvi2awflj9mOC6bHIg50orX8IJvWKY9wYQ/zB2kogPslQ==
 
-next@15.1.11:
-  version "15.1.11"
-  resolved "https://registry.yarnpkg.com/next/-/next-15.1.11.tgz#8a70a236e02d8dd62fb0569bedfd5e4290e7af55"
-  integrity sha512-UiVJaOGhKST58AadwbFUZThlNBmYhKqaCs8bVtm4plTxsgKq0mJ0zTsp7t7j/rzsbAEj9WcAMdZCztjByi4EoQ==
+next@^15.4.0:
+  version "15.5.9"
+  resolved "https://registry.yarnpkg.com/next/-/next-15.5.9.tgz#1b80d05865cc27e710fb4dcfc6fd9e726ed12ad4"
+  integrity sha512-agNLK89seZEtC5zUHwtut0+tNrc0Xw4FT/Dg+B/VLEo9pAcS9rtTKpek3V6kVcVwsB2YlqMaHdfZL4eLEVYuCg==
   dependencies:
-    "@next/env" "15.1.11"
-    "@swc/counter" "0.1.3"
+    "@next/env" "15.5.9"
     "@swc/helpers" "0.5.15"
-    busboy "1.6.0"
     caniuse-lite "^1.0.30001579"
     postcss "8.4.31"
     styled-jsx "5.1.6"
   optionalDependencies:
-    "@next/swc-darwin-arm64" "15.1.9"
-    "@next/swc-darwin-x64" "15.1.9"
-    "@next/swc-linux-arm64-gnu" "15.1.9"
-    "@next/swc-linux-arm64-musl" "15.1.9"
-    "@next/swc-linux-x64-gnu" "15.1.9"
-    "@next/swc-linux-x64-musl" "15.1.9"
-    "@next/swc-win32-arm64-msvc" "15.1.9"
-    "@next/swc-win32-x64-msvc" "15.1.9"
-    sharp "^0.33.5"
+    "@next/swc-darwin-arm64" "15.5.7"
+    "@next/swc-darwin-x64" "15.5.7"
+    "@next/swc-linux-arm64-gnu" "15.5.7"
+    "@next/swc-linux-arm64-musl" "15.5.7"
+    "@next/swc-linux-x64-gnu" "15.5.7"
+    "@next/swc-linux-x64-musl" "15.5.7"
+    "@next/swc-win32-arm64-msvc" "15.5.7"
+    "@next/swc-win32-x64-msvc" "15.5.7"
+    sharp "^0.34.3"
 
 nice-try@^1.0.4:
   version "1.0.5"
@@ -7238,10 +7237,10 @@ semver@^7.3.7:
   dependencies:
     lru-cache "^6.0.0"
 
-semver@^7.6.3:
-  version "7.6.3"
-  resolved "https://registry.yarnpkg.com/semver/-/semver-7.6.3.tgz#980f7b5550bc175fb4dc09403085627f9eb33143"
-  integrity sha512-oVekP1cKtI+CTDvHWYFUcMtsK/00wmAEfyqKfNdARm8u1wNVhSgaX7A8d4UuIlUI5e84iEwOhs7ZPYRmzU9U6A==
+semver@^7.7.3:
+  version "7.7.3"
+  resolved "https://registry.yarnpkg.com/semver/-/semver-7.7.3.tgz#4b5f4143d007633a8dc671cd0a6ef9147b8bb946"
+  integrity sha512-SdsKMrI9TdgjdweUSR9MweHA4EJ8YxHn8DFaDisvhVlUOe4BF1tLD7GAj0lIqWVl+dPb/rExr0Btby5loQm20Q==
 
 send@0.18.0:
   version "0.18.0"
@@ -7299,34 +7298,39 @@ setprototypeof@1.2.0:
   resolved "https://registry.npmjs.org/setprototypeof/-/setprototypeof-1.2.0.tgz"
   integrity sha512-E5LDX7Wrp85Kil5bhZv46j8jOeboKq5JMmYM3gVGdGH8xFpPWXUMsNrlODCrkoxMEeNi/XZIwuRvY4XNwYMJpw==
 
-sharp@^0.33.5:
-  version "0.33.5"
-  resolved "https://registry.yarnpkg.com/sharp/-/sharp-0.33.5.tgz#13e0e4130cc309d6a9497596715240b2ec0c594e"
-  integrity sha512-haPVm1EkS9pgvHrQ/F3Xy+hgcuMV0Wm9vfIBSiwZ05k+xgb0PkBQpGsAA/oWdDobNaZTH5ppvHtzCFbnSEwHVw==
+sharp@^0.34.3:
+  version "0.34.5"
+  resolved "https://registry.yarnpkg.com/sharp/-/sharp-0.34.5.tgz#b6f148e4b8c61f1797bde11a9d1cfebbae2c57b0"
+  integrity sha512-Ou9I5Ft9WNcCbXrU9cMgPBcCK8LiwLqcbywW3t4oDV37n1pzpuNLsYiAV8eODnjbtQlSDwZ2cUEeQz4E54Hltg==
   dependencies:
-    color "^4.2.3"
-    detect-libc "^2.0.3"
-    semver "^7.6.3"
+    "@img/colour" "^1.0.0"
+    detect-libc "^2.1.2"
+    semver "^7.7.3"
   optionalDependencies:
-    "@img/sharp-darwin-arm64" "0.33.5"
-    "@img/sharp-darwin-x64" "0.33.5"
-    "@img/sharp-libvips-darwin-arm64" "1.0.4"
-    "@img/sharp-libvips-darwin-x64" "1.0.4"
-    "@img/sharp-libvips-linux-arm" "1.0.5"
-    "@img/sharp-libvips-linux-arm64" "1.0.4"
-    "@img/sharp-libvips-linux-s390x" "1.0.4"
-    "@img/sharp-libvips-linux-x64" "1.0.4"
-    "@img/sharp-libvips-linuxmusl-arm64" "1.0.4"
-    "@img/sharp-libvips-linuxmusl-x64" "1.0.4"
-    "@img/sharp-linux-arm" "0.33.5"
-    "@img/sharp-linux-arm64" "0.33.5"
-    "@img/sharp-linux-s390x" "0.33.5"
-    "@img/sharp-linux-x64" "0.33.5"
-    "@img/sharp-linuxmusl-arm64" "0.33.5"
-    "@img/sharp-linuxmusl-x64" "0.33.5"
-    "@img/sharp-wasm32" "0.33.5"
-    "@img/sharp-win32-ia32" "0.33.5"
-    "@img/sharp-win32-x64" "0.33.5"
+    "@img/sharp-darwin-arm64" "0.34.5"
+    "@img/sharp-darwin-x64" "0.34.5"
+    "@img/sharp-libvips-darwin-arm64" "1.2.4"
+    "@img/sharp-libvips-darwin-x64" "1.2.4"
+    "@img/sharp-libvips-linux-arm" "1.2.4"
+    "@img/sharp-libvips-linux-arm64" "1.2.4"
+    "@img/sharp-libvips-linux-ppc64" "1.2.4"
+    "@img/sharp-libvips-linux-riscv64" "1.2.4"
+    "@img/sharp-libvips-linux-s390x" "1.2.4"
+    "@img/sharp-libvips-linux-x64" "1.2.4"
+    "@img/sharp-libvips-linuxmusl-arm64" "1.2.4"
+    "@img/sharp-libvips-linuxmusl-x64" "1.2.4"
+    "@img/sharp-linux-arm" "0.34.5"
+    "@img/sharp-linux-arm64" "0.34.5"
+    "@img/sharp-linux-ppc64" "0.34.5"
+    "@img/sharp-linux-riscv64" "0.34.5"
+    "@img/sharp-linux-s390x" "0.34.5"
+    "@img/sharp-linux-x64" "0.34.5"
+    "@img/sharp-linuxmusl-arm64" "0.34.5"
+    "@img/sharp-linuxmusl-x64" "0.34.5"
+    "@img/sharp-wasm32" "0.34.5"
+    "@img/sharp-win32-arm64" "0.34.5"
+    "@img/sharp-win32-ia32" "0.34.5"
+    "@img/sharp-win32-x64" "0.34.5"
 
 shebang-command@^1.2.0:
   version "1.2.0"
@@ -7381,13 +7385,6 @@ signal-exit@^3.0.2, signal-exit@^3.0.3:
   resolved "https://registry.npmjs.org/signal-exit/-/signal-exit-3.0.6.tgz"
   integrity sha512-sDl4qMFpijcGw22U5w63KmD3cZJfBuFlVNbVMKje2keoKML7X2UzWbc4XrmEbDwg0NXJc3yv4/ox7b+JWb57kQ==
 
-simple-swizzle@^0.2.2:
-  version "0.2.2"
-  resolved "https://registry.yarnpkg.com/simple-swizzle/-/simple-swizzle-0.2.2.tgz#a4da6b635ffcccca33f70d17cb92592de95e557a"
-  integrity sha512-JA//kQgZtbuY83m+xT+tXJkmJncGMTFT+C+g2h2R9uxkYIrE2yy9sgmcLhCnw57/WSD+Eh3J97FPEDFnbXnDUg==
-  dependencies:
-    is-arrayish "^0.3.1"
-
 sirv@^1.0.7:
   version "1.0.19"
   resolved "https://registry.npmjs.org/sirv/-/sirv-1.0.19.tgz"
@@ -7516,11 +7513,6 @@ stop-iteration-iterator@^1.0.0:
   dependencies:
     internal-slot "^1.0.4"
 
-streamsearch@^1.1.0:
-  version "1.1.0"
-  resolved "https://registry.npmjs.org/streamsearch/-/streamsearch-1.1.0.tgz"
-  integrity sha512-Mcc5wHehp9aXz1ax6bZUyY5afg9u2rv5cqQI3mRrYkGC8rW2hM02jWuwjtL++LS5qinSyhj2QfLyNsuc+VsExg==
-
 strict-event-emitter@^0.4.3:
   version "0.4.6"
   resolved "https://registry.npmjs.org/strict-event-emitter/-/strict-event-emitter-0.4.6.tgz"

From 90edab84a203c64b4584f3b0704a3ab3df02c20b Mon Sep 17 00:00:00 2001
From: SukkaW <isukkaw@gmail.com>
Date: Sat, 3 Jan 2026 22:52:18 +0800
Subject: [PATCH 6/7] Refactor: re-use `useHash`, fix types

---
 src/app/errors/[errorCode]/page.tsx          |  2 +-
 src/components/MDX/Challenges/Challenges.tsx |  6 +++---
 src/components/MDX/ExpandableExample.tsx     | 16 ++--------------
 src/hooks/useHash.ts                         | 14 ++++++++++++++
 4 files changed, 20 insertions(+), 18 deletions(-)
 create mode 100644 src/hooks/useHash.ts

diff --git a/src/app/errors/[errorCode]/page.tsx b/src/app/errors/[errorCode]/page.tsx
index 1052da0e7de..b329021a154 100644
--- a/src/app/errors/[errorCode]/page.tsx
+++ b/src/app/errors/[errorCode]/page.tsx
@@ -36,7 +36,7 @@ export async function generateStaticParams(): Promise<
 
 export async function generateMetadata(
   {params}: ErrorDecoderPageProps,
-  parent?: ResolvingMetadata
+  parent: Promise<ResolvingMetadata | undefined>
 ): Promise<Metadata> {
   const {errorCode} = await params;
   const resolvedParent = await parent;
diff --git a/src/components/MDX/Challenges/Challenges.tsx b/src/components/MDX/Challenges/Challenges.tsx
index eb6fec19d41..ec12ac19fff 100644
--- a/src/components/MDX/Challenges/Challenges.tsx
+++ b/src/components/MDX/Challenges/Challenges.tsx
@@ -16,7 +16,7 @@ import {H2} from 'components/MDX/Heading';
 import {H4} from 'components/MDX/Heading';
 import {Challenge} from './Challenge';
 import {Navigation} from './Navigation';
-import {useRouter} from 'next/compat/router';
+import {useHash} from '../../../hooks/useHash';
 
 interface ChallengesProps {
   children: React.ReactElement[];
@@ -97,12 +97,12 @@ export function Challenges({
   const queuedScrollRef = useRef<undefined | QueuedScroll>(QueuedScroll.INIT);
   const [activeIndex, setActiveIndex] = useState(0);
   const currentChallenge = challenges[activeIndex];
-  const {asPath} = useRouter();
+  const hash = useHash();
 
   useEffect(() => {
     if (queuedScrollRef.current === QueuedScroll.INIT) {
       const initIndex = challenges.findIndex(
-        (challenge) => challenge.id === asPath.split('#')[1]
+        (challenge) => challenge.id === hash
       );
       if (initIndex === -1) {
         queuedScrollRef.current = undefined;
diff --git a/src/components/MDX/ExpandableExample.tsx b/src/components/MDX/ExpandableExample.tsx
index afe1fcfd277..528aac92084 100644
--- a/src/components/MDX/ExpandableExample.tsx
+++ b/src/components/MDX/ExpandableExample.tsx
@@ -18,20 +18,8 @@ import {IconDeepDive} from '../Icon/IconDeepDive';
 import {IconCodeBlock} from '../Icon/IconCodeBlock';
 import {Button} from '../Button';
 import {H4} from './Heading';
-import {useEffect, useRef, useState, useSyncExternalStore} from 'react';
-
-function useHash() {
-  return useSyncExternalStore(
-    (callback) => {
-      window.addEventListener('hashchange', callback);
-      return () => {
-        window.removeEventListener('hashchange', callback);
-      };
-    },
-    () => window.location.hash,
-    () => null
-  );
-}
+import {useEffect, useRef, useState} from 'react';
+import {useHash} from '../../hooks/useHash';
 
 interface ExpandableExampleProps {
   children: React.ReactNode;
diff --git a/src/hooks/useHash.ts b/src/hooks/useHash.ts
new file mode 100644
index 00000000000..a64e670b802
--- /dev/null
+++ b/src/hooks/useHash.ts
@@ -0,0 +1,14 @@
+import {useSyncExternalStore} from 'react';
+
+export function useHash() {
+  return useSyncExternalStore(
+    (onChange) => {
+      window.addEventListener('hashchange', onChange);
+      return () => {
+        window.removeEventListener('hashchange', onChange);
+      };
+    },
+    () => window.location.hash,
+    () => null
+  );
+}

From 3910aaec8615d46991eea086ab91c389f8ebea92 Mon Sep 17 00:00:00 2001
From: SukkaW <isukkaw@gmail.com>
Date: Sat, 3 Jan 2026 22:54:25 +0800
Subject: [PATCH 7/7] Make ESLint Happy

---
 src/components/MDX/Challenges/Challenges.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/MDX/Challenges/Challenges.tsx b/src/components/MDX/Challenges/Challenges.tsx
index ec12ac19fff..5135f763135 100644
--- a/src/components/MDX/Challenges/Challenges.tsx
+++ b/src/components/MDX/Challenges/Challenges.tsx
@@ -119,7 +119,7 @@ export function Challenges({
       });
       queuedScrollRef.current = undefined;
     }
-  }, [activeIndex, asPath, challenges]);
+  }, [activeIndex, challenges, hash]);
 
   const handleChallengeChange = (index: number) => {
     setActiveIndex(index);