vercel · samcx · Aug 13, 2024 · Aug 11, 2024 · Aug 13, 2024 · Aug 13, 2024
diff --git a/examples/api-routes/package.json b/examples/api-routes/package.json
diff --git a/examples/api-routes/pages/api/people/[id].ts b/examples/api-routes/pages/api/people/[id].ts
diff --git a/examples/api-routes/pages/api/people/index.ts b/examples/api-routes/pages/api/people/index.ts
diff --git a/examples/api-routes/.gitignore → examples/route-handlers/.gitignore b/examples/api-routes/.gitignore → examples/route-handlers/.gitignore
diff --git a/examples/api-routes/README.md → examples/route-handlers/README.md b/examples/api-routes/README.md → examples/route-handlers/README.md
@@ -1,6 +1,6 @@
 # Basic API routes example
 
-Next.js ships with [API routes](https://nextjs.org/docs/api-routes/introduction) which provides an easy solution to build your own `API`. This example shows how to create multiple `API` endpoints with serverless functions, which can execute independently.
+Next.js ships with [Route Handlers](https://nextjs.org/docs/app/building-your-application/routing/route-handlers) which provides an easy solution to build your own `API`. This example shows how to create multiple `API` endpoints with serverless functions, which can execute independently.
 
 ## Deploy your own
 

diff --git a/examples/route-handlers/app/api/people/[id]/route.ts b/examples/route-handlers/app/api/people/[id]/route.ts
@@ -0,0 +1,20 @@
+import { NextResponse } from "next/server";
+import { people } from "../../../../data";
+import type { Person, ResponseError } from "../../../../interfaces";
+
+export async function GET(
+  request: Request,
+  { params }: { params: { id: string } },
+): Promise<NextResponse<Person | ResponseError>> {
+  const { id } = params;
+  const person = people.find((p) => p.id === id);
+
+  if (person) {
+    return NextResponse.json(person);
+  } else {
+    return NextResponse.json(
+      { message: `User with id: ${id} not found.` },
+      { status: 404 },
+    );
+  }
+}
diff --git a/examples/route-handlers/app/api/people/route.ts b/examples/route-handlers/app/api/people/route.ts
@@ -0,0 +1,7 @@
+import { NextResponse } from "next/server";
+import { people } from "../../../data";
+import { Person } from "../../../interfaces";
+
+export async function GET(): Promise<NextResponse<Person[]>> {
+  return NextResponse.json(people);
+}
diff --git a/examples/route-handlers/app/layout.tsx b/examples/route-handlers/app/layout.tsx
@@ -0,0 +1,18 @@
+import type { Metadata } from "next";
+
+export const metadata: Metadata = {
+  title: "Home",
+  description: "Welcome to Next.js",
+};
+
+export default function RootLayout({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  return (
+    <html lang="en">
+      <body>{children}</body>
+    </html>
+  );
+}
diff --git a/examples/api-routes/pages/index.tsx → examples/route-handlers/app/page.tsx b/examples/api-routes/pages/index.tsx → examples/route-handlers/app/page.tsx
@@ -1,3 +1,4 @@
+"use client";
 import useSWR from "swr";
 import PersonComponent from "../components/Person";
 import type { Person } from "../interfaces";
@@ -6,7 +7,6 @@ const fetcher = (url: string) => fetch(url).then((res) => res.json());
 
 export default function Index() {
   const { data, error, isLoading } = useSWR<Person[]>("/api/people", fetcher);
-
   if (error) return <div>Failed to load</div>;
   if (isLoading) return <div>Loading...</div>;
   if (!data) return null;

diff --git a/examples/api-routes/pages/person/[id].tsx → ...s/route-handlers/app/person/[id]/page.tsx b/examples/api-routes/pages/person/[id].tsx → ...s/route-handlers/app/person/[id]/page.tsx
@@ -1,6 +1,8 @@
-import { useRouter } from "next/router";
+"use client";
+
+import { useParams } from "next/navigation";
 import useSWR from "swr";
-import type { Person, ResponseError } from "../../interfaces";
+import type { Person, ResponseError } from "../../../interfaces";
 
 const fetcher = async (url: string) => {
   const res = await fetch(url);
@@ -13,11 +15,11 @@ const fetcher = async (url: string) => {
 };
 
 export default function PersonPage() {
-  const { query } = useRouter();
+  const query = useParams();
   const { data, error, isLoading, isValidating } = useSWR<
     Person,
     ResponseError
-  >(() => (query.id ? `/api/people/${query.id}` : null), fetcher);
+  >(() => (query?.id ? `/api/people/${query.id}` : null), fetcher);
 
   if (error) return <div>{error.message}</div>;
   if (isLoading) return <div>Loading...</div>;

diff --git a/examples/api-routes/components/Person.tsx → ...ples/route-handlers/components/Person.tsx b/examples/api-routes/components/Person.tsx → ...ples/route-handlers/components/Person.tsx
diff --git a/examples/api-routes/data.ts → examples/route-handlers/data.ts b/examples/api-routes/data.ts → examples/route-handlers/data.ts
diff --git a/examples/api-routes/interfaces/index.ts → examples/route-handlers/interfaces/index.ts b/examples/api-routes/interfaces/index.ts → examples/route-handlers/interfaces/index.ts
diff --git a/examples/api-routes/next-env.d.ts → examples/route-handlers/next-env.d.ts b/examples/api-routes/next-env.d.ts → examples/route-handlers/next-env.d.ts
@@ -2,4 +2,4 @@
 /// <reference types="next/image-types/global" />
 
 // NOTE: This file should not be edited
-// see https://nextjs.org/docs/pages/building-your-application/configuring/typescript for more information.
+// see https://nextjs.org/docs/app/building-your-application/configuring/typescript for more information.
diff --git a/examples/route-handlers/package.json b/examples/route-handlers/package.json
@@ -0,0 +1,20 @@
+{
+  "private": true,
+  "scripts": {
+    "dev": "next dev",
+    "build": "next build",
+    "start": "next start"
+  },
+  "dependencies": {
+    "next": "latest",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "swr": "^2.2.5"
+  },
+  "devDependencies": {
+    "@types/node": "^22.2.0",
+    "@types/react": "^18.3.3",
+    "@types/react-dom": "^18.3.0",
+    "typescript": "^5.5.4"
+  }
+}
diff --git a/examples/api-routes/tsconfig.json → examples/route-handlers/tsconfig.json b/examples/api-routes/tsconfig.json → examples/route-handlers/tsconfig.json
@@ -13,8 +13,13 @@
     "resolveJsonModule": true,
     "isolatedModules": true,
     "jsx": "preserve",
-    "incremental": true
+    "incremental": true,
+    "plugins": [
+      {
+        "name": "next"
+      }
+    ]
   },
-  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
+  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
   "exclude": ["node_modules"]
 }