Convert api-routes-rest example to TypeScript

examples/api-routes-rest/.gitignore

@@ -32,3 +32,6 @@ yarn-error.log*
 
 # vercel
 .vercel
+
+# typescript
+*.tsbuildinfo

examples/api-routes-rest/interfaces/index.ts

@@ -0,0 +1,4 @@
+export type User = {
+  id: number
+  name?: string
+}

examples/api-routes-rest/next-env.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="next" />
+/// <reference types="next/image-types/global" />
+
+// NOTE: This file should not be edited
+// see https://nextjs.org/docs/basic-features/typescript for more information.

examples/api-routes-rest/package.json

@@ -7,8 +7,14 @@
   },
   "dependencies": {
     "next": "latest",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2",
-    "swr": "^0.1.18"
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "swr": "^1.3.0"
+  },
+  "devDependencies": {
+    "@types/node": "^18.0.3",
+    "@types/react": "^18.0.15",
+    "@types/react-dom": "^18.0.6",
+    "typescript": "^4.7.4"
   }
 }

examples/api-routes-rest/pages/api/user/[id].js → examples/api-routes-rest/pages/api/user/[id].ts

@@ -1,4 +1,6 @@
-export default function userHandler(req, res) {
+import type { NextApiRequest, NextApiResponse } from 'next'
+
+export default function userHandler(req: NextApiRequest, res: NextApiResponse) {
   const {
     query: { id, name },
     method,

examples/api-routes-rest/pages/api/users.ts

@@ -0,0 +1,10 @@
+import type { NextApiRequest, NextApiResponse } from 'next'
+import type { User } from '../../interfaces'
+
+// Fake users data
+const users: User[] = [{ id: 1 }, { id: 2 }, { id: 3 }]
+
+export default function handler(_req: NextApiRequest, res: NextApiResponse) {
+  // Get data from your database
+  res.status(200).json(users)
+}

examples/api-routes-rest/pages/index.js → examples/api-routes-rest/pages/index.tsx

@@ -1,10 +1,11 @@
+import type { User } from '../interfaces'
 import useSwr from 'swr'
 import Link from 'next/link'
 
-const fetcher = (url) => fetch(url).then((res) => res.json())
+const fetcher = (url: string) => fetch(url).then((res) => res.json())
 
 export default function Index() {
-  const { data, error } = useSwr('/api/users', fetcher)
+  const { data, error } = useSwr<User[]>('/api/users', fetcher)
 
   if (error) return <div>Failed to load users</div>
   if (!data) return <div>Loading...</div>
@@ -14,7 +15,7 @@ export default function Index() {
       {data.map((user) => (
         <li key={user.id}>
           <Link href="/user/[id]" as={`/user/${user.id}`}>
-            <a>{`User ${user.id}`}</a>
+            {`User ${user.id}`}
           </Link>
         </li>
       ))}

examples/api-routes-rest/pages/user/[id].js → examples/api-routes-rest/pages/user/[id].tsx

@@ -1,11 +1,12 @@
+import type { User } from '../../interfaces'
 import { useRouter } from 'next/router'
 import useSwr from 'swr'
 
-const fetcher = (url) => fetch(url).then((res) => res.json())
+const fetcher = (url: string) => fetch(url).then((res) => res.json())
 
-export default function User() {
+export default function UserPage() {
   const router = useRouter()
-  const { data, error } = useSwr(
+  const { data, error } = useSwr<User>(
     router.query.id ? `/api/user/${router.query.id}` : null,
     fetcher
   )

examples/api-routes-rest/tsconfig.json

@@ -0,0 +1,20 @@
+{
+  "compilerOptions": {
+    "target": "es5",
+    "lib": ["dom", "dom.iterable", "esnext"],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "strict": false,
+    "forceConsistentCasingInFileNames": true,
+    "noEmit": true,
+    "esModuleInterop": true,
+    "module": "esnext",
+    "moduleResolution": "node",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "jsx": "preserve",
+    "incremental": true
+  },
+  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
+  "exclude": ["node_modules"]
+}