docs: pages -> app router

Author: segunadebayo

examples/next-ts/package.json

@@ -96,7 +96,7 @@
     "image-conversion": "2.1.1",
     "lucide-react": "0.548.0",
     "match-sorter": "8.1.0",
-    "next": "16.0.1",
+    "next": "16.0.6",
     "next-cloudinary": "6.17.0",
     "react": "19.2.0",
     "react-dom": "19.2.0",
@@ -106,7 +106,7 @@
     "virtua": "^0.46.4"
   },
   "devDependencies": {
-    "@next/eslint-plugin-next": "16.0.1",
+    "@next/eslint-plugin-next": "16.0.6",
     "@types/form-serialize": "0.7.4",
     "@types/node": "24.9.2",
     "@types/react": "^19",

examples/preact-ts/package.json

@@ -95,7 +95,7 @@
   },
   "devDependencies": {
     "@preact/preset-vite": "2.10.2",
-    "eslint": "9.38.0",
+    "eslint": "9.39.1",
     "eslint-config-preact": "2.0.0",
     "typescript": "5.9.3",
     "vite": "7.1.12"

package.json

@@ -69,21 +69,21 @@
     "@changesets/cli": "2.29.7",
     "@commitlint/cli": "20.1.0",
     "@commitlint/config-conventional": "20.0.0",
-    "@eslint/eslintrc": "3.3.1",
+    "@eslint/eslintrc": "3.3.3",
     "@internationalized/date": "3.10.0",
     "@octokit/rest": "22.0.1",
     "@playwright/test": "1.56.1",
     "@swc/core": "1.15.0",
     "@types/jsdom": "^27.0.0",
     "@types/node": "24.10.0",
     "@types/signale": "1.4.7",
-    "@typescript-eslint/eslint-plugin": "8.46.3",
-    "@typescript-eslint/parser": "8.46.3",
+    "@typescript-eslint/eslint-plugin": "8.48.0",
+    "@typescript-eslint/parser": "8.48.0",
     "axe-core": "4.11.0",
     "commitlint": "20.1.0",
     "cross-env": "^10.1.0",
     "dotenv": "17.2.3",
-    "eslint": "9.38.0",
+    "eslint": "9.39.1",
     "eslint-config-prettier": "10.1.8",
     "eslint-plugin-import": "2.32.0",
     "eslint-plugin-prettier": "5.5.4",

pnpm-lock.yaml

@@ -71,18 +71,18 @@
     "form-serialize": "0.7.2",
     "match-sorter": "8.1.0",
     "lucide-react": "0.548.0",
-    "next": "16.0.1",
+    "next": "16.0.6",
     "react": "19.2.0",
     "react-dom": "19.2.0",
     "react-spinners": "0.17.0"
   },
   "devDependencies": {
-    "@next/eslint-plugin-next": "16.0.1",
+    "@next/eslint-plugin-next": "16.0.6",
     "@types/node": "24.9.2",
     "@types/react": "^19",
     "@types/react-dom": "^19",
-    "eslint": "9.38.0",
-    "eslint-config-next": "16.0.1",
+    "eslint": "9.39.1",
+    "eslint-config-next": "16.0.6",
     "typescript": "5.9.3"
   }
 }

starters/react/package.json

@@ -0,0 +1,22 @@
+import { getComponentDemo } from "../../../lib/demo-utils"
+import { NextRequest, NextResponse } from "next/server"
+
+export async function POST(request: NextRequest) {
+  try {
+    const body = await request.json()
+    const { component, defaultProps } = body
+
+    console.log("[demo] component", component)
+    console.log("[demo] defaultProps", defaultProps)
+
+    const demo = await getComponentDemo(component, defaultProps)
+    console.log("[demo] response", demo)
+
+    return NextResponse.json({ success: true, demo })
+  } catch (error) {
+    return NextResponse.json(
+      { success: false, error: (error as Error).message },
+      { status: 500 },
+    )
+  }
+}

website/app/api/demo/route.ts

@@ -0,0 +1,25 @@
+"use client"
+
+import type { Component } from ".velite"
+import { FrameworkProvider } from "components/framework"
+import { useMDX } from "components/mdx-components"
+import DocsLayout from "../../docs-layout"
+import type { Framework } from "lib/framework-utils"
+
+type ComponentPageClientProps = {
+  doc: Component
+  framework: Framework
+}
+
+export default function ComponentPageClient({
+  doc,
+  framework,
+}: ComponentPageClientProps) {
+  const mdx = useMDX(doc.body.code)
+
+  return (
+    <FrameworkProvider value={framework}>
+      <DocsLayout doc={doc}>{mdx}</DocsLayout>
+    </FrameworkProvider>
+  )
+}

website/app/components/[...slug]/client.tsx

@@ -0,0 +1,38 @@
+import {
+  extractParams,
+  getComponentDoc,
+  getComponentPaths,
+} from "lib/contentlayer-utils"
+import type { Metadata } from "next"
+import ComponentPageClient from "./client"
+
+type PageProps = {
+  params: Promise<{ slug: string[] }>
+}
+
+export async function generateMetadata({
+  params,
+}: PageProps): Promise<Metadata> {
+  const { slug } = await params
+  const { slug: componentSlug } = extractParams(slug)
+  const doc = getComponentDoc(componentSlug)
+
+  return {
+    title: doc.title,
+    description: doc.description,
+  }
+}
+
+export async function generateStaticParams() {
+  return getComponentPaths().map((path) => ({
+    slug: path.params.slug,
+  }))
+}
+
+export default async function ComponentPage({ params }: PageProps) {
+  const { slug } = await params
+  const { framework, slug: componentSlug } = extractParams(slug)
+  const doc = getComponentDoc(componentSlug)
+
+  return <ComponentPageClient doc={doc} framework={framework} />
+}

website/app/components/[...slug]/page.tsx

@@ -0,0 +1,100 @@
+"use client"
+
+import { FrameworkSelect } from "components/framework-select"
+import { MdxFooter } from "components/mdx-footer"
+import { EditPageLink } from "components/mdx/edit-page-link"
+import { Search } from "components/search-dialog"
+import { Sidebar } from "components/sidebar"
+import { SkipNavContent, SkipNavLink } from "components/skip-nav"
+import { TableOfContents } from "components/toc"
+import { TopNavigation } from "components/top-navigation"
+import { Box, Spacer, styled } from "styled-system/jsx"
+
+type DocsLayoutProps = {
+  children: React.ReactNode
+  doc: any
+  toc?: {
+    title?: string
+    data?: any[]
+    getSlug?: (slug: string) => string
+  }
+}
+
+export default function DocsLayout(props: DocsLayoutProps) {
+  const { children, doc, toc } = props
+  const tableOfContent = toc?.data ?? doc.frontmatter?.toc ?? []
+  const hideToc = tableOfContent.length < 2
+
+  return (
+    <Box>
+      <SkipNavLink>Skip to main content</SkipNavLink>
+      <TopNavigation />
+      <styled.div pt="10">
+        <SkipNavContent />
+        <Box maxW="8xl" mx="auto" px={{ sm: "6", base: "4", md: "8" }}>
+          <Box
+            display={{ base: "none", lg: "block" }}
+            position="fixed"
+            zIndex={20}
+            bottom="0"
+            top="4rem"
+            left="max(0px, calc(50% - 45rem - calc(var(--scrollbar-width, 0px) / 2)))"
+            right="auto"
+            width="19.5rem"
+            pb="10"
+            px="8"
+            overflowY="auto"
+            overscrollBehavior="contain"
+          >
+            <Box position="relative">
+              <Box position="sticky" top="0" bg="bg.subtle" pb="8">
+                <Spacer height="10" bg="transparent" />
+                <Search />
+                <Spacer mt="px" height="5" bg="transparent" />
+                <FrameworkSelect />
+              </Box>
+              <Sidebar />
+            </Box>
+          </Box>
+
+          <Box
+            as="main"
+            className="mdx-content"
+            pl={{ lg: "19.5rem" }}
+            pt="4"
+            pr={{ xl: "16" }}
+          >
+            <Box mr={{ xl: "15.5rem" }}>
+              {children}
+              {doc?.editUrl && (
+                <EditPageLink href={doc.editUrl}>
+                  Edit this page on GitHub
+                </EditPageLink>
+              )}
+              <MdxFooter />
+            </Box>
+          </Box>
+
+          <Box
+            py="10"
+            px="8"
+            overflowY="auto"
+            position="fixed"
+            top="3.8rem"
+            bottom="0"
+            right="max(0px,calc(50% - 45rem + calc(var(--scrollbar-width, 0px) / 2)))"
+            display={{ base: "none", xl: "block" }}
+            width="19.5rem"
+            visibility={hideToc ? "hidden" : undefined}
+          >
+            <TableOfContents
+              title={toc?.title}
+              data={tableOfContent}
+              getSlug={toc?.getSlug}
+            />
+          </Box>
+        </Box>
+      </styled.div>
+    </Box>
+  )
+}

website/app/docs-layout.tsx

@@ -0,0 +1,15 @@
+"use client"
+
+import type { Guide } from ".velite"
+import { useMDX } from "components/mdx-components"
+import DocsLayout from "../../docs-layout"
+
+type GuidePageClientProps = {
+  doc: Guide
+}
+
+export default function GuidePageClient({ doc }: GuidePageClientProps) {
+  const mdx = useMDX(doc.body.code)
+
+  return <DocsLayout doc={doc}>{mdx}</DocsLayout>
+}