Skip to content

Commit 5044cd6

Browse files
authored
Convert catch-all-routes example to TypeScript (vercel#38188)
Converted Catch All Routes example over to TypeScript to match the Contribution guidelines. ## 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)
1 parent 8f707d4 commit 5044cd6

File tree

7 files changed

+38
-11
lines changed

7 files changed

+38
-11
lines changed

examples/catch-all-routes/components/header.js renamed to examples/catch-all-routes/components/header.tsx

Lines changed: 4 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -4,29 +4,25 @@ const Header = () => (
44
<header>
55
<ul>
66
<li>
7-
<Link href="/">
8-
<a>Home</a>
9-
</Link>
7+
<Link href="/">Home</Link>
108
</li>
119
<li>
12-
<Link href="/about">
13-
<a>About</a>
14-
</Link>
10+
<Link href="/about">About</Link>
1511
</li>
1612
<li>
1713
<Link
1814
href="/post/[...slug]"
1915
as="/post/2020/first-post/with/catch/all/routes"
2016
>
21-
<a>First Post</a>
17+
First Post
2218
</Link>
2319
</li>
2420
<li>
2521
<Link
2622
href="/post/[...slug]"
2723
as="/post/2020/second-post/with/catch/all/routes"
2824
>
29-
<a>Second Post</a>
25+
Second Post
3026
</Link>
3127
</li>
3228
</ul>
Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
/// <reference types="next" />
2+
/// <reference types="next/image-types/global" />
3+
4+
// NOTE: This file should not be edited
5+
// see https://nextjs.org/docs/basic-features/typescript for more information.

examples/catch-all-routes/package.json

Lines changed: 8 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,13 @@
77
},
88
"dependencies": {
99
"next": "latest",
10-
"react": "^17.0.2",
11-
"react-dom": "^17.0.2"
10+
"react": "^18.2.0",
11+
"react-dom": "^18.2.0"
12+
},
13+
"devDependencies": {
14+
"@types/node": "^18.0.0",
15+
"@types/react": "^18.0.14",
16+
"@types/react-dom": "^18.0.5",
17+
"typescript": "^4.7.4"
1218
}
1319
}

examples/catch-all-routes/pages/post/[...slug].js renamed to examples/catch-all-routes/pages/post/[...slug].tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import Header from '../../components/header'
33

44
const Comment = () => {
55
const router = useRouter()
6-
const slug = router.query.slug || []
6+
const slug = (router.query.slug as string[]) || []
77

88
return (
99
<>
Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
{
2+
"compilerOptions": {
3+
"target": "es5",
4+
"lib": ["dom", "dom.iterable", "esnext"],
5+
"allowJs": true,
6+
"skipLibCheck": true,
7+
"strict": false,
8+
"forceConsistentCasingInFileNames": true,
9+
"noEmit": true,
10+
"esModuleInterop": true,
11+
"module": "esnext",
12+
"moduleResolution": "node",
13+
"resolveJsonModule": true,
14+
"isolatedModules": true,
15+
"jsx": "preserve",
16+
"incremental": true
17+
},
18+
"include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
19+
"exclude": ["node_modules"]
20+
}

0 commit comments

Comments
 (0)