chore(deps): update nextjs monorepo to v15 (major) (#270)

Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>
Co-authored-by: Yuta Hiroto <[email protected]>

Author: renovate[bot]

next.config.js

@@ -8,6 +8,7 @@ const nextConfig = {
   transpilePackages: ["shiki"],
   experimental: {
     taint: true,
+    // typedRoutes: true,
   },
   async redirects() {
     return [

package.json

@@ -15,11 +15,11 @@
     "check": "biome check --apply ."
   },
   "dependencies": {
-    "@next/third-parties": "^14.2.16",
+    "@next/third-parties": "^15.0.1",
     "@shikijs/transformers": "^1.22.2",
     "algoliasearch": "^4.24.0",
     "instantsearch.js": "^4.75.3",
-    "next": "14.2.16",
+    "next": "15.0.1",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-instantsearch": "^7.13.6",

pnpm-lock.yaml

@@ -44,7 +44,7 @@ export function FileTree({ exampleName, filePaths, code, isIframe }: Props) {
   const initialCandidate = `${exampleName}/page.tsx`;
   const initialPath =
     filePathFromParams ??
-    (paths.includes(initialCandidate) ? initialCandidate : paths[0] ?? "");
+    (paths.includes(initialCandidate) ? initialCandidate : (paths[0] ?? ""));
   const [selectedPath, setSelectedPath] = useState(initialPath);
   const tree = createTree(paths);
 

src/app/_components/fileTree.tsx

@@ -1,7 +1,7 @@
 import NextLink, { type LinkProps } from "next/link";
 import type { PropsWithChildren } from "react";
 
-type Props = PropsWithChildren<LinkProps>;
+type Props = PropsWithChildren<LinkProps<unknown>>;
 
 export function Link({ children, ...rest }: Props) {
   return (

src/app/_components/link.tsx

@@ -4,13 +4,14 @@ import { notFound } from "next/navigation";
 import { TITLES } from "../constants";
 
 type Props = {
-  params: {
+  params: Promise<{
     id: string;
-  };
+  }>;
 };
 
-export default function Page({ params }: Props) {
-  const title = TITLES[Number(params.id)];
+export default async function Page({ params }: Props) {
+  const { id } = await params;
+  const title = TITLES[Number(id)];
 
   if (!title) {
     return notFound();

src/app/examples/(caching)/router-cache/[id]/page.tsx

@@ -1,15 +1,17 @@
 import { Link } from "@/app/_components/link";
 
 type Props = {
-  params: {
+  params: Promise<{
     slug: string[];
-  };
+  }>;
 };
 
-export default function Page({ params }: Props) {
+export default async function Page({ params }: Props) {
+  const { slug } = await params;
+
   return (
     <div className="flex flex-col gap-4">
-      <span>slug: {JSON.stringify(params.slug)}</span>
+      <span>slug: {JSON.stringify(slug)}</span>
       <Link href="/examples/dynamic-optional-multiple/one">
         👍 /dynamic-optional-multiple/one
       </Link>

src/app/examples/(dynamic-routes)/dynamic-optional-multiple/[[...slug]]/page.tsx

@@ -1,15 +1,17 @@
 import { Link } from "@/app/_components/link";
 
 type Props = {
-  params: {
+  params: Promise<{
     slug: string[];
-  };
+  }>;
 };
 
-export default function Page({ params }: Props) {
+export default async function Page({ params }: Props) {
+  const { slug } = await params;
+
   return (
     <div className="flex flex-col gap-4">
-      <span>slug: {JSON.stringify(params.slug)}</span>
+      <span>slug: {JSON.stringify(slug)}</span>
       <Link href="/examples/dynamic-required-multiple/one">
         👍 /dynamic-required-multiple/one
       </Link>

src/app/examples/(dynamic-routes)/dynamic-required-multiple/[...slug]/page.tsx

@@ -1,9 +1,11 @@
 type Props = {
-  params: {
+  params: Promise<{
     slug: string;
-  };
+  }>;
 };
 
-export default function Page({ params }: Props) {
-  return <span>slug: {params.slug}</span>;
+export default async function Page({ params }: Props) {
+  const { slug } = await params;
+
+  return <span>slug: {slug}</span>;
 }

src/app/examples/(dynamic-routes)/dynamic-required-single/[slug]/page.tsx

@@ -8,12 +8,14 @@ export const size = {
 export const contentType = "image/png";
 
 type Props = {
-  params: {
+  params: Promise<{
     slug: string;
-  };
+  }>;
 };
 
 export default async function Image({ params }: Props) {
+  const { slug } = await params;
+
   return new ImageResponse(
     <div
       style={{
@@ -26,7 +28,7 @@ export default async function Image({ params }: Props) {
         justifyContent: "center",
       }}
     >
-      {alt} {params.slug}
+      {alt} {slug}
     </div>,
   );
 }

src/app/examples/(metadata)/generating-opengraph-image/[slug]/opengraph-image.tsx

@@ -5,13 +5,15 @@ import { MetaList } from "../../_components/metaList";
 const path = "generating-opengraph-image/foo";
 
 type Props = {
-  params: {
+  params: Promise<{
     slug: string;
-  };
+  }>;
 };
 
-export default function Page({ params }: Props) {
-  if (params.slug !== "foo") {
+export default async function Page({ params }: Props) {
+  const { slug } = await params;
+
+  if (slug !== "foo") {
     return notFound();
   }
 

src/app/examples/(metadata)/generating-opengraph-image/[slug]/page.tsx

@@ -8,9 +8,6 @@ export const size = {
 export const contentType = "image/png";
 
 export default async function Image() {
-  // when you want to return an image when only bots
-  // const { isBot } = userAgent({ headers: headers() });
-
   return new ImageResponse(
     <div
       style={{

src/app/examples/(metadata)/generating-opengraph-image/opengraph-image.tsx

@@ -6,8 +6,10 @@ import { MetaList } from "../../_components/metaList";
 const path = "overwriting-meta/dynamic";
 
 type Params = {
-  params: { id: string };
-  searchParams: Record<string, string | string[] | undefined>;
+  params: Promise<{
+    id: string;
+  }>;
+  searchParams: Promise<Record<string, string | string[] | undefined>>;
 };
 
 export async function generateMetadata(

src/app/examples/(metadata)/overwriting-meta/dynamic/page.tsx

@@ -8,7 +8,7 @@ export default function Page() {
   async function logOut() {
     "use server";
 
-    cookies().delete(COOKIE_NAME);
+    (await cookies()).delete(COOKIE_NAME);
   }
 
   return (

src/app/examples/(parallel-routes)/parallel-condition/@dashboard/page.tsx

@@ -8,7 +8,7 @@ export default function Page() {
   async function login() {
     "use server";
 
-    cookies().set(COOKIE_NAME, "true");
+    (await cookies()).set(COOKIE_NAME, "true");
   }
 
   return (

src/app/examples/(parallel-routes)/parallel-condition/@login/page.tsx

@@ -8,8 +8,8 @@ type Props = PropsWithChildren<{
   login: React.ReactNode;
 }>;
 
-export default function Layout({ dashboard, login, children }: Props) {
-  const isLoggedIn = cookies().get(COOKIE_NAME)?.value === "true";
+export default async function Layout({ dashboard, login, children }: Props) {
+  const isLoggedIn = (await cookies()).get(COOKIE_NAME)?.value === "true";
 
   return (
     <Boundary label="Layout" filePath="layout.tsx">

src/app/examples/(parallel-routes)/parallel-condition/layout.tsx

@@ -2,10 +2,10 @@ import { performance } from "node:perf_hooks";
 import { Boundary } from "@/app/_components/boundary";
 import { cookies, headers } from "next/headers";
 
-export function Dynamic() {
-  const headersList = headers();
+export async function Dynamic() {
+  const headersList = await headers();
   // or
-  const cookiesList = cookies();
+  const cookiesList = await cookies();
   // or
   // searchParams
 

src/app/examples/(rendering)/server-components/_components/dynamic.tsx

@@ -1,8 +1,16 @@
 import { type NextRequest, NextResponse } from "next/server";
 
+type Props = {
+  params: Promise<{
+    slug: string;
+  }>
+}
+
 export async function GET(
   req: NextRequest,
-  { params }: { params: { slug: string } },
+  { params }: Props,
 ) {
-  return NextResponse.json({ msg: params.slug });
+  const { slug } = await params;
+
+  return NextResponse.json({ msg: slug });
 }

src/app/examples/(route-handlers)/dynamic-route-segments/api/[slug]/route.ts

@@ -4,11 +4,10 @@ import { type NextRequest, NextResponse } from "next/server";
 const COOKIE_NAME = "example-route-handlers";
 
 // when use headers or cookies or searchParams, this response will be dynamic
-export async function GET(req: NextRequest, res: NextResponse) {
-  const referer = headers().get("referer");
-  const cookie = cookies().get(COOKIE_NAME);
-
-  req.nextUrl.searchParams;
+export async function GET(req: NextRequest) {
+  // const referer = (await headers()).get("referer");
+  // const cookie = (await cookies()).get(COOKIE_NAME);
+  // req.nextUrl.searchParams;
 
   return NextResponse.json({ msg: Date.now() });
 }

src/app/examples/(route-handlers)/route-handlers/api/dynamic/route.ts

@@ -1,7 +1,7 @@
 import type { NowResponse } from "@/constants";
 import { type NextRequest, NextResponse } from "next/server";
 
-export async function GET(req: NextRequest, res: NextResponse) {
+export async function GET(req: NextRequest) {
   const { now }: NowResponse = await (
     await fetch(`${process.env.NEXT_PUBLIC_EXTERNAL_URL}/api/now`, {
       next: {

src/app/examples/(route-handlers)/route-handlers/api/revalidate/route.ts

@@ -1,5 +1,5 @@
 import { type NextRequest, NextResponse } from "next/server";
 
-export async function GET(req: NextRequest, res: NextResponse) {
+export async function GET(req: NextRequest) {
   return NextResponse.json({ msg: Date.now() });
 }

src/app/examples/(route-handlers)/route-handlers/api/static/route.ts

@@ -5,16 +5,18 @@ import { Suspense } from "react";
 import { Dialog } from "../../_components/dialog";
 
 type Props = {
-  params: {
+  params: Promise<{
     itemId: string;
-  };
+  }>;
 };
 
-export default function Page({ params }: Props) {
+export default async function Page({ params }: Props) {
+  const { itemId } = await params;
+
   return (
     <Dialog>
       <Suspense fallback={<Loading />}>
-        <Main id={params.itemId} />
+        <Main id={itemId} />
       </Suspense>
     </Dialog>
   );

src/app/examples/(showcases)/shopping/(public)/@dialog/(.)foods/[itemId]/page.tsx

@@ -2,13 +2,14 @@ import { notFound } from "next/navigation";
 import { getItem } from "../../../_utils/items";
 
 type Props = {
-  params: {
+  params: Promise<{
     itemId: string;
-  };
+  }>;
 };
 
 export default async function Page({ params }: Props) {
-  const item = await getItem(params.itemId);
+  const { itemId } = await params;
+  const item = await getItem(itemId);
 
   if (item === undefined) {
     return notFound();

src/app/examples/(showcases)/shopping/(public)/foods/[itemId]/page.tsx

@@ -10,14 +10,14 @@ export async function signIn() {
   // e.g. simulate a request to the server
   await new Promise((resolve) => setTimeout(resolve, 1000));
 
-  cookies().set(COOKIE_NAME, "true");
+  (await cookies()).set(COOKIE_NAME, "true");
   redirect("/examples/shopping");
 }
 
 export async function signout() {
-  cookies().delete(COOKIE_NAME);
+  (await cookies()).delete(COOKIE_NAME);
 }
 
 export async function isSignIn() {
-  return cookies().get(COOKIE_NAME)?.value === "true";
+  return (await cookies()).get(COOKIE_NAME)?.value === "true";
 }