feat: add x-next-router-type cookie

xiaoyu2er · xiaoyu2er · commit 92d159d6e40e · 2025-05-21T21:30:51.000-07:00
diff --git a/apps/docs/src/app/[locale]/docs/[[...slug]]/page.tsx b/apps/docs/src/app/[locale]/docs/[[...slug]]/page.tsx
@@ -1,4 +1,5 @@
 import { DocsLayout } from '@/components/layout';
+import { type RouterType, routerTypeCookie } from '@/lib/const';
 import { getPage } from '@/lib/page';
 import { getDocsLayoutTree, getPageTreePeers } from '@/lib/pageTree';
 import { type Page, type Source, sourceMap } from '@/lib/source';
@@ -10,11 +11,14 @@ import { Card, Cards } from 'fumadocs-ui/components/card';
 import { createRelativeLink } from 'fumadocs-ui/mdx';
 import { DocsBody, DocsPage, DocsTitle } from 'fumadocs-ui/page';
 import { type Locale, useLocale } from 'next-intl';
+import { cookies } from 'next/headers';
 import { notFound } from 'next/navigation';
 
 export default async function Docs(props: {
   params: Promise<{ locale: Locale; slug?: string[] }>;
 }) {
+  const routerType = (await cookies()).get(routerTypeCookie)
+    ?.value as RouterType;
   const params = await props.params;
   const slug = params.slug || [];
   const locale = params.locale;
@@ -44,8 +48,9 @@ export default async function Docs(props: {
 
   return (
     <DocsLayout
+      routerType={routerType}
       docId={docId}
-      pageTree={getDocsLayoutTree(source.pageTree, slug)}
+      pageTree={getDocsLayoutTree(source.pageTree, docId, routerType)}
     >
       <DocsPage
         toc={toc}
diff --git a/apps/docs/src/components/layout.tsx b/apps/docs/src/components/layout.tsx
@@ -1,6 +1,7 @@
 'use client';
 
 import { useBaseOptions } from '@/hooks/useLayoutOptions';
+import type { RouterType } from '@/lib/const';
 import { parseDocId } from '@/lib/utils';
 import {
   NextAppIcon,
@@ -20,13 +21,32 @@ export function DocsLayout({
   children,
   pageTree,
   docId,
+  routerType,
 }: {
   children: ReactNode;
   pageTree: PageTree.Root;
   docId: string;
+  routerType: RouterType;
 }) {
   const baseOptions = useBaseOptions();
-  const { appDocsRoot, pagesDocsRoot, docsRoot } = parseDocId(docId);
+  const { appDocsRoot, pagesDocsRoot, docsRoot, docUrl, isPages } =
+    parseDocId(docId);
+  const options = [
+    {
+      title: 'Using App Router',
+      description: 'Features available in /app',
+      icon: <NextAppIcon />,
+      url: appDocsRoot,
+      ...(routerType !== 'pages' ? { urls: new Set([docUrl]) } : {}),
+    },
+    {
+      title: 'Using Pages Router',
+      description: 'Features available in /pages',
+      icon: <NextPagesIcon />,
+      url: pagesDocsRoot,
+      ...(routerType === 'pages' ? { urls: new Set([docUrl]) } : {}),
+    },
+  ];
 
   const docsLayout: DocsLayoutProps = {
     ...baseOptions,
@@ -35,23 +55,7 @@ export function DocsLayout({
     sidebar: {
       banner: (
         <>
-          <RootToggle
-            options={[
-              {
-                title: 'Using App Router',
-                description: 'Features available in /app',
-                icon: <NextAppIcon />,
-                url: appDocsRoot,
-                urls: new Set([docsRoot, appDocsRoot]),
-              },
-              {
-                title: 'Using Pages Router',
-                description: 'Features available in /pages',
-                icon: <NextPagesIcon />,
-                url: pagesDocsRoot,
-              },
-            ]}
-          />
+          <RootToggle options={options} />
           <RootToggle
             options={[
               {
diff --git a/apps/docs/src/lib/const.ts b/apps/docs/src/lib/const.ts
@@ -0,0 +1,2 @@
+export type RouterType = 'app' | 'pages' | undefined;
+export const routerTypeCookie = 'x-next-router-type';
diff --git a/apps/docs/src/lib/pageTree.ts b/apps/docs/src/lib/pageTree.ts
@@ -1,4 +1,6 @@
 import type { PageTree } from 'fumadocs-core/server';
+import type { RouterType } from './const';
+import { parseDocId } from './utils';
 
 /**
  * Get other page tree nodes that lives under the same parent
@@ -49,25 +51,34 @@ export function cloneRoot(tree: PageTree.Root) {
   };
 }
 
-export function getDocsLayoutTree(tree: PageTree.Root, slug: string[]) {
-  const isV14 = slug[0] === '14';
-  const isV13 = slug[0] === '13';
-  const isLatest = !isV14 && !isV13;
+export function getDocsLayoutTree(
+  tree: PageTree.Root,
+  docId: string,
+  routerType: RouterType,
+) {
+  const { isV13, isV14, isVLatest, isPages, version } = parseDocId(docId);
 
   const root = cloneRoot(tree);
   for (const node of tree.children) {
-    if (isLatest) {
-      const isPages = slug[0] === 'pages';
+    if (isVLatest) {
       // App
-      if (!isPages && node.$id === '01-app' && node.type === 'folder') {
+      if (
+        routerType !== 'pages' &&
+        node.$id === '01-app' &&
+        node.type === 'folder'
+      ) {
         const children = node.children;
         if (children[0].type === 'folder') {
           children[0].defaultOpen = true;
         }
         root.children.push(...children);
       }
       // Pages
-      if (isPages && node.$id === '02-pages' && node.type === 'folder') {
+      if (
+        routerType === 'pages' &&
+        node.$id === '02-pages' &&
+        node.type === 'folder'
+      ) {
         const children = node.children;
         if (children[0].type === 'folder') {
           children[0].defaultOpen = true;
@@ -86,14 +97,12 @@ export function getDocsLayoutTree(tree: PageTree.Root, slug: string[]) {
     }
 
     if (isV13 || isV14) {
-      const version = isV14 ? '14' : '13';
       const gettingStarted = `${version}/01-getting-started`;
       const appFolder = `${version}/02-app`;
       const pagesFolder = `${version}/03-pages`;
       if (node.$id === version && node.type === 'folder') {
         const children = node.children;
 
-        const isPages = slug[1] === 'pages';
         for (const child of children) {
           const expandChildren = [appFolder, pagesFolder];
           if (
@@ -105,10 +114,18 @@ export function getDocsLayoutTree(tree: PageTree.Root, slug: string[]) {
               if (item.type === 'folder') item.defaultOpen = true;
             }
           }
-          if (!isPages && child.$id === appFolder && child.type === 'folder') {
+          if (
+            routerType !== 'pages' &&
+            child.$id === appFolder &&
+            child.type === 'folder'
+          ) {
             root.children.push(...child.children);
           }
-          if (isPages && child.$id === pagesFolder && child.type === 'folder') {
+          if (
+            routerType === 'pages' &&
+            child.$id === pagesFolder &&
+            child.type === 'folder'
+          ) {
             root.children.push(...child.children);
           }
 
diff --git a/apps/docs/src/lib/utils.ts b/apps/docs/src/lib/utils.ts
@@ -55,7 +55,11 @@ export const getDocTags = (id: string) => {
  * @returns
  */
 export const getDocId = (locale: Locale, docUrl: string) => {
-  return `${locale}${docUrl}`;
+  const id = `${locale}${docUrl}`;
+  if (id.endsWith('/')) {
+    return id.slice(0, -1);
+  }
+  return id;
 };
 
 /**
@@ -67,6 +71,9 @@ export const getDocId = (locale: Locale, docUrl: string) => {
  */
 export const parseDocId = (id: string) => {
   const paths = id.split('/');
+  if (paths[paths.length - 1] === '') {
+    paths.pop();
+  }
   const locale = paths[0];
   // const tags = paths.slice(0, 2);
   const slugs = paths.slice(2);
@@ -95,16 +102,18 @@ export const parseDocId = (id: string) => {
   const whereTag = !isVLatest ? `${locale}/docs/${version}` : `${locale}/docs`;
 
   return {
+    slugs,
     locale: paths[0],
     version,
     isApp,
     isPages,
     isV13,
     isV14,
     isVLatest,
-    docsRoot: isVLatest ? '/docs' : `/docs/${slugs[0]}`,
-    appDocsRoot: isVLatest ? '/docs/app' : `/docs/${slugs[0]}/app`,
-    pagesDocsRoot: isVLatest ? '/docs/pages' : `/docs/${slugs[0]}/pages`,
+    docUrl: `/${paths.slice(1).join('/')}`,
+    docsRoot: isVLatest ? '/docs' : `/docs/${version}`,
+    appDocsRoot: isVLatest ? '/docs/app' : `/docs/${version}/app`,
+    pagesDocsRoot: isVLatest ? '/docs/pages' : `/docs/${version}/pages`,
     docTag,
     appTag,
     pagesTag,
diff --git a/apps/docs/src/middleware.ts b/apps/docs/src/middleware.ts
@@ -1,7 +1,34 @@
 import createMiddleware from 'next-intl/middleware';
+import type { NextRequest } from 'next/server';
 import { routing } from './i18n/routing';
+import { routerTypeCookie } from './lib/const';
+import { parseDocId } from './lib/utils';
 
-export default createMiddleware(routing);
+export default async function middleware(request: NextRequest) {
+  const url = new URL(request.url);
+  const isDocs = url.pathname.startsWith('/docs');
+  if (isDocs) {
+    const docId = `en${url.pathname}`;
+    const { isPages, isApp } = parseDocId(docId);
+    if (isPages || isApp) {
+      // Set the cookie so we could get this in the server
+      request.cookies.set(routerTypeCookie, isPages ? 'pages' : 'app');
+    }
+  }
+
+  const handleI18nRouting = createMiddleware(routing);
+  const response = handleI18nRouting(request);
+
+  if (isDocs) {
+    const docId = `en${url.pathname}`;
+    const { isPages, isApp } = parseDocId(docId);
+    if (isPages || isApp) {
+      response.cookies.set(routerTypeCookie, isPages ? 'pages' : 'app');
+    }
+  }
+
+  return response;
+}
 
 export const config = {
   // Match all pathnames except for

Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,2 @@`
	`1`	`+export type RouterType = 'app' \| 'pages' \| undefined;`
	`2`	`+export const routerTypeCookie = 'x-next-router-type';`