Convert api-routes-rest
example to TypeScript (#38394)
Converted `api-routes-rest` example to TypeScript to match Contribution docs. ## Documentation / Examples - [X] Make sure the linting passes by running `pnpm lint` - [X] The examples guidelines are followed from [our contributing doc](https://github.com/vercel/next.js/blob/canary/contributing.md#adding-examples) Co-authored-by: Balázs Orbán <18369201+balazsorban44@users.noreply.github.com>
This commit is contained in:
parent
65ea43f6d5
commit
b8efd80c16
10 changed files with 62 additions and 17 deletions
3
examples/api-routes-rest/.gitignore
vendored
3
examples/api-routes-rest/.gitignore
vendored
|
@ -32,3 +32,6 @@ yarn-error.log*
|
|||
|
||||
# vercel
|
||||
.vercel
|
||||
|
||||
# typescript
|
||||
*.tsbuildinfo
|
||||
|
|
4
examples/api-routes-rest/interfaces/index.ts
Normal file
4
examples/api-routes-rest/interfaces/index.ts
Normal file
|
@ -0,0 +1,4 @@
|
|||
export type User = {
|
||||
id: number
|
||||
name?: string
|
||||
}
|
5
examples/api-routes-rest/next-env.d.ts
vendored
Normal file
5
examples/api-routes-rest/next-env.d.ts
vendored
Normal file
|
@ -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.
|
|
@ -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"
|
||||
}
|
||||
}
|
||||
|
|
|
@ -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,
|
|
@ -1,7 +0,0 @@
|
|||
// Fake users data
|
||||
const users = [{ id: 1 }, { id: 2 }, { id: 3 }]
|
||||
|
||||
export default function handler(req, res) {
|
||||
// Get data from your database
|
||||
res.status(200).json(users)
|
||||
}
|
10
examples/api-routes-rest/pages/api/users.ts
Normal file
10
examples/api-routes-rest/pages/api/users.ts
Normal file
|
@ -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)
|
||||
}
|
|
@ -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>
|
||||
))}
|
|
@ -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
|
||||
)
|
20
examples/api-routes-rest/tsconfig.json
Normal file
20
examples/api-routes-rest/tsconfig.json
Normal file
|
@ -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"]
|
||||
}
|
Loading…
Reference in a new issue