archive/rsnext
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

[docs] Migrate dynamic routing example to typescript (#39806)

Browse source 
Changelog

Migrated example to typescript
Remove obsolete Link->as prop
Normalize Module exports

Documentation / Examples

 Make sure the linting passes by running pnpm lint
 The examples guidelines are followed from our contributing doc

Co-authored-by: JJ Kasper <jj@jjsweb.site>
This commit is contained in:
Henrik Wenz 2022-08-22 15:37:36 +02:00 committed by GitHub
parent 628d72fb03
commit 827e120740
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
10 changed files with 85 additions and 63 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

30
examples/dynamic-routing/components/header.js
View file

@ -1,30 +0,0 @@
import Link from 'next/link'
const Header = () => (
<header>
<ul>
<li>
<Link href="/">
<a>Home</a>
</Link>
</li>
<li>
<Link href="/about">
<a>About</a>
</Link>
</li>
<li>
<Link href="/post/first">
<a>First Post</a>
</Link>
</li>
<li>
<Link href="/post/second">
<a>Second Post</a>
</Link>
</li>
</ul>
</header>
)
export default Header

30
examples/dynamic-routing/components/header.tsx Normal file
View file

@ -0,0 +1,30 @@
import Link from 'next/link'
export default function Header() {
return (
<header>
<ul>
<li>
<Link href="/">
<a>Home</a>
</Link>
</li>
<li>
<Link href="/about">
<a>About</a>
</Link>
</li>
<li>
<Link href="/post/first">
<a>First Post</a>
</Link>
</li>
<li>
<Link href="/post/second">
<a>Second Post</a>
</Link>
</li>
</ul>
</header>
)
}

11
examples/dynamic-routing/package.json
View file

@ -6,8 +6,13 @@
"start": "next start"
},
"dependencies": {
"next": "latest",
"react": "^17.0.2",
"react-dom": "^17.0.2"
"next": "12.2.5",
"react": "^18.2.0",
"react-dom": "^18.2.0"
},
"devDependencies": {
"@types/node": "18.7.9",
"@types/react": "18.0.17",
"typescript": "4.7.4"
}
}

10
examples/dynamic-routing/pages/about.js
View file

@ -1,10 +0,0 @@
import Header from '../components/header'
const About = () => (
<>
<Header />
<h1>About page</h1>
</>
)
export default About

10
examples/dynamic-routing/pages/about.tsx Normal file
View file

@ -0,0 +1,10 @@
import Header from '../components/header'
export default function AboutPage() {
return (
<>
<Header />
<h1>About page</h1>
</>
)
}

10
examples/dynamic-routing/pages/index.js
View file

@ -1,10 +0,0 @@
import Header from '../components/header'
const Home = () => (
<>
<Header />
<h1>Hello World!</h1>
</>
)
export default Home

10
examples/dynamic-routing/pages/index.tsx Normal file
View file

@ -0,0 +1,10 @@
import Header from '../components/header'
export default function IndexPage() {
return (
<>
<Header />
<h1>Hello World!</h1>
</>
)
}

7
examples/dynamic-routing/pages/post/[id]/[comment].js → examples/dynamic-routing/pages/post/[id]/[comment].tsx
View file

@ -1,9 +1,10 @@
import { useRouter } from 'next/router'
import Header from '../../../components/header'
const Comment = () => {
export default function CommentPage() {
const router = useRouter()
const { id, comment } = router.query
const id = router.query.id as string
const comment = router.query.comment as string
return (
<>
@ -13,5 +14,3 @@ const Comment = () => {
</>
)
}
export default Comment

10
examples/dynamic-routing/pages/post/[id]/index.js → examples/dynamic-routing/pages/post/[id]/index.tsx
View file

@ -2,9 +2,9 @@ import { useRouter } from 'next/router'
import Link from 'next/link'
import Header from '../../../components/header'
const Post = () => {
export default function PostPage() {
const router = useRouter()
const { id } = router.query
const id = router.query.id as string
return (
<>
@ -12,12 +12,12 @@ const Post = () => {
<h1>Post: {id}</h1>
<ul>
<li>
<Link href="/post/[id]/[comment]" as={`/post/${id}/first-comment`}>
<Link href={`/post/${id}/first-comment`}>
<a>First comment</a>
</Link>
</li>
<li>
<Link href="/post/[id]/[comment]" as={`/post/${id}/second-comment`}>
<Link href={`/post/${id}/second-comment`}>
<a>Second comment</a>
</Link>
</li>
@ -25,5 +25,3 @@ const Post = () => {
</>
)
}
export default Post

20
examples/dynamic-routing/tsconfig.json Normal file
View file

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