diff --git a/next.config.ts b/next.config.ts index 060d71c3..6d49089f 100644 --- a/next.config.ts +++ b/next.config.ts @@ -4,6 +4,8 @@ const nextConfig: NextConfig = { reactStrictMode: true, reactCompiler: true, serverExternalPackages: ["libnpmdiff", "npm-package-arg", "pacote"], + // Enable Cache Components (moved to root level in 16.1.1) + cacheComponents: true, }; export default nextConfig; diff --git a/src/app/[...parts]/page.tsx b/src/app/[...parts]/page.tsx index 1465f887..17e419b6 100644 --- a/src/app/[...parts]/page.tsx +++ b/src/app/[...parts]/page.tsx @@ -1,5 +1,6 @@ import { type Metadata } from "next"; import { redirect } from "next/navigation"; +import { connection } from "next/server"; import { type JSX } from "react"; import { type ViewType } from "react-diff-view"; import { createSimplePackageSpec } from "^/lib/createSimplePackageSpec"; @@ -39,6 +40,9 @@ const DiffPage = async ({ params, searchParams, }: DiffPageProps): Promise => { + // Cache Components: Mark this route as dynamic since it uses params/searchParams + await connection(); + const { parts } = await params; const { diffFiles, ...optionsQuery } = await searchParams; diff --git a/src/app/about/api/page.tsx b/src/app/about/api/page.tsx index c1f11c3e..8460bd79 100644 --- a/src/app/about/api/page.tsx +++ b/src/app/about/api/page.tsx @@ -23,8 +23,8 @@ export const metadata = { description: "API documentation for npm-diff.app", } satisfies Metadata; -// We need nodejs since we use Npm libs https://beta.nextjs.org/docs/api-reference/segment-config#runtime -export const runtime = "nodejs"; +// MIGRATED from: export const runtime = "nodejs" +// → Removed (nodejs is the default, no need to specify with Cache Components) const AboutApiPage = async () => { const specsOrVersions = splitParts(EXAMPLE_QUERY); const { canonicalSpecs: specs } = await destination(specsOrVersions); diff --git a/src/app/api/-/versions/route.ts b/src/app/api/-/versions/route.ts index a279679e..ada9eccf 100644 --- a/src/app/api/-/versions/route.ts +++ b/src/app/api/-/versions/route.ts @@ -2,7 +2,10 @@ import { NextResponse } from "next/server"; import getVersionData from "^/lib/api/npm/getVersionData"; import { type Version, VERSIONS_PARAMETER_PACKAGE } from "./types"; -export const runtime = "edge"; +// MIGRATED from: export const runtime = "edge" +// → Route Segment Config is incompatible with Cache Components +// → Edge runtime support requires different approach with Cache Components +// → Switched to default nodejs runtime for Cache Components compatibility export async function GET(request: Request) { const start = Date.now(); diff --git a/src/app/layout.tsx b/src/app/layout.tsx index e2e43b7a..962ab9e8 100644 --- a/src/app/layout.tsx +++ b/src/app/layout.tsx @@ -1,5 +1,5 @@ import { type Metadata, type Viewport } from "next"; -import { type ReactNode } from "react"; +import { type ReactNode, Suspense } from "react"; import { ThemeProvider } from "^/components/ThemeProvider"; import Stack from "^/components/ui/Stack"; import { TooltipProvider } from "^/components/ui/Tooltip"; @@ -31,18 +31,24 @@ export default function RootLayout({ children }: { children: ReactNode }) { - - - -
- {children} -