feat: use next-cookie for the pages/app router type

Author: xiaoyu2er

apps/docs/package.json

@@ -13,6 +13,7 @@
   },
   "dependencies": {
     "@fumadocs/mdx-remote": "^1.3.0",
+    "cookies-next": "^5.1.0",
     "fumadocs-core": "15.2.15",
     "fumadocs-mdx": "11.6.2",
     "fumadocs-ui": "15.2.15",

apps/docs/src/app/docs/[[...slug]]/page.tsx

@@ -1,7 +1,6 @@
 import { DocsLayout } from '@/components/layout';
-import { type RouterType, routerTypeCookie } from '@/lib/const';
 import { getPage } from '@/lib/page';
-import { getDocsLayoutTree, getPageTreePeers } from '@/lib/pageTree';
+import { getPageTreePeers } from '@/lib/pageTree';
 import { type Page, type Source, source } from '@/lib/source';
 import { getDocId, getDocUrl, parseDocId } from '@/lib/utils';
 import { getMDXComponents } from '@/mdx-components';
@@ -12,15 +11,12 @@ import { createRelativeLink } from 'fumadocs-ui/mdx';
 import { DocsBody, DocsPage, DocsTitle } from 'fumadocs-ui/page';
 import { type Locale, useLocale } from 'next-intl';
 import { getLocale } from 'next-intl/server';
-import { cookies } from 'next/headers';
 import { notFound } from 'next/navigation';
 
 export default async function Docs(props: {
   params: Promise<{ slug: string[] }>;
 }) {
   const locale: Locale = await getLocale();
-  const routerType = (await cookies()).get(routerTypeCookie)
-    ?.value as RouterType;
   const params = await props.params;
   const slug = params.slug || [];
   const docUrl = getDocUrl(slug);
@@ -54,11 +50,7 @@ export default async function Docs(props: {
   const isIndex = page.file.name === 'index';
 
   return (
-    <DocsLayout
-      routerType={routerType}
-      docId={docId}
-      pageTree={getDocsLayoutTree(source.pageTree, docId, routerType)}
-    >
+    <DocsLayout docId={docId} pageTree={source.pageTree}>
       <DocsPage
         toc={toc}
         full={page.data.full}

apps/docs/src/components/layout.tsx

@@ -1,7 +1,9 @@
 'use client';
 
 import { useBaseOptions } from '@/hooks/useLayoutOptions';
+import { useRouterType } from '@/hooks/useRouterType';
 import type { RouterType } from '@/lib/const';
+import { getDocsLayoutTree } from '@/lib/pageTree';
 import { parseDocId } from '@/lib/utils';
 import {
   NextAppIcon,
@@ -22,15 +24,15 @@ export function DocsLayout({
   children,
   pageTree,
   docId,
-  routerType,
 }: {
   children: ReactNode;
   pageTree: PageTree.Root;
   docId: string;
-  routerType: RouterType;
 }) {
+  const routerType = useRouterType();
   const baseOptions = useBaseOptions();
   const t = useTranslations('sidebar');
+  const tree = getDocsLayoutTree(pageTree, docId, routerType);
   const { appDocsRoot, pagesDocsRoot, docsRoot, docUrl, isPages } =
     parseDocId(docId);
   const options = [
@@ -53,7 +55,7 @@ export function DocsLayout({
   const docsLayout: DocsLayoutProps = {
     ...baseOptions,
     links: [],
-    tree: pageTree,
+    tree,
     sidebar: {
       banner: (
         <>

apps/docs/src/hooks/useRouterType.tsx

@@ -0,0 +1,37 @@
+'use client';
+
+import { type RouterType, routerTypeCookie } from '@/lib/const';
+import { parseDocId } from '@/lib/utils';
+import { getCookie, setCookie } from 'cookies-next';
+import { usePathname } from 'next/navigation';
+import { useEffect, useState } from 'react';
+
+export function useRouterType() {
+  const pathname = usePathname();
+  const [routerType, setRouterType] = useState<RouterType>(() => {
+    const docId = `en${pathname}`;
+    const { isPages, isApp } = parseDocId(docId);
+    if (isPages) {
+      return 'pages';
+    }
+    if (isApp) {
+      return 'app';
+    }
+    return (getCookie(routerTypeCookie) as RouterType) || 'app';
+  });
+
+  useEffect(() => {
+    const docId = `en${pathname}`;
+    const { isPages, isApp } = parseDocId(docId);
+    if (isPages) {
+      setCookie(routerTypeCookie, 'pages');
+      setRouterType('pages');
+    }
+    if (isApp) {
+      setCookie(routerTypeCookie, 'app');
+      setRouterType('app');
+    }
+  }, [pathname]);
+
+  return routerType;
+}