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>,
   );
 }