parent
2e14537fc1
commit
565c5b20b0
4 changed files with 48 additions and 10 deletions
|
@ -83,6 +83,8 @@ export default async function NotFound() {
|
||||||
}
|
}
|
||||||
```
|
```
|
||||||
|
|
||||||
|
If you need to use Client Component hooks like `usePathname` to display content based on the path, you must fetch data on the client-side instead.
|
||||||
|
|
||||||
## Version History
|
## Version History
|
||||||
|
|
||||||
| Version | Changes |
|
| Version | Changes |
|
||||||
|
|
|
@ -11,7 +11,7 @@ description: API Reference for the useParams hook.
|
||||||
import { useParams } from 'next/navigation'
|
import { useParams } from 'next/navigation'
|
||||||
|
|
||||||
export default function ExampleClientComponent() {
|
export default function ExampleClientComponent() {
|
||||||
const params = useParams()
|
const params = useParams<{ tag: string; item: string }>()
|
||||||
|
|
||||||
// Route -> /shop/[tag]/[item]
|
// Route -> /shop/[tag]/[item]
|
||||||
// URL -> /shop/shoes/nike-air-max-97
|
// URL -> /shop/shoes/nike-air-max-97
|
||||||
|
|
|
@ -1,6 +1,6 @@
|
||||||
---
|
---
|
||||||
title: Setting up Vitest with Next.js
|
title: Setting up Vitest with Next.js
|
||||||
nav_title: Jest
|
nav_title: Vitest
|
||||||
description: Learn how to set up Next.js with Vitest and React Testing Library - two popular unit testing libraries.
|
description: Learn how to set up Next.js with Vitest and React Testing Library - two popular unit testing libraries.
|
||||||
source: app/building-your-application/testing/vitest
|
source: app/building-your-application/testing/vitest
|
||||||
---
|
---
|
||||||
|
|
|
@ -10,23 +10,59 @@ The `redirect` value returned from your `getStaticProps` or `getServerSideProps`
|
||||||
|
|
||||||
Make sure you return the proper values for the `redirect` value.
|
Make sure you return the proper values for the `redirect` value.
|
||||||
|
|
||||||
```js filename="pages/blog/[slug].js"
|
```tsx filename="pages/index.tsx" switcher
|
||||||
export const getStaticProps = ({ params }) => {
|
import type { InferGetStaticPropsType, GetStaticProps } from 'next'
|
||||||
if (params.slug === 'deleted-post') {
|
|
||||||
|
type Repo = {
|
||||||
|
name: string
|
||||||
|
stargazers_count: number
|
||||||
|
}
|
||||||
|
|
||||||
|
export const getStaticProps = (async (context) => {
|
||||||
|
const res = await fetch('https://api.github.com/repos/vercel/next.js')
|
||||||
|
const repo = await res.json()
|
||||||
|
|
||||||
|
if (!repo) {
|
||||||
return {
|
return {
|
||||||
redirect: {
|
redirect: {
|
||||||
permanent: true, // or false
|
permanent: false, // or true
|
||||||
destination: '/some-location',
|
destination: '/404',
|
||||||
},
|
},
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
return {
|
return { props: { repo } }
|
||||||
props: {},
|
}) satisfies GetStaticProps<{
|
||||||
|
repo: Repo
|
||||||
|
}>
|
||||||
|
|
||||||
|
export default function Page({
|
||||||
|
repo,
|
||||||
|
}: InferGetStaticPropsType<typeof getStaticProps>) {
|
||||||
|
return repo.stargazers_count
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
```jsx filename="pages/index.js" switcher
|
||||||
|
export async function getStaticPaths() {
|
||||||
|
const res = await fetch('https://api.github.com/repos/vercel/next.js')
|
||||||
|
const repo = await res.json()
|
||||||
|
|
||||||
|
if (!repo) {
|
||||||
|
return {
|
||||||
|
redirect: {
|
||||||
|
permanent: false, // or true
|
||||||
|
destination: '/404',
|
||||||
|
},
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
return { props: { repo } }
|
||||||
}
|
}
|
||||||
|
|
||||||
export default function Page(props) {}
|
export default function Page({ repo }) {
|
||||||
|
return repo.stargazers_count
|
||||||
|
}
|
||||||
```
|
```
|
||||||
|
|
||||||
## Useful Links
|
## Useful Links
|
||||||
|
|
Loading…
Reference in a new issue