docs: small tweaks (#59638)

Just some random cleanup I wanted to do.
This commit is contained in:
Lee Robinson 2023-12-16 14:13:17 -06:00 committed by GitHub
parent 2e14537fc1
commit 565c5b20b0
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
4 changed files with 48 additions and 10 deletions

View file

@ -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 | Changes |

View file

@ -11,7 +11,7 @@ description: API Reference for the useParams hook.
import { useParams } from 'next/navigation'
export default function ExampleClientComponent() {
const params = useParams()
const params = useParams<{ tag: string; item: string }>()
// Route -> /shop/[tag]/[item]
// URL -> /shop/shoes/nike-air-max-97

View file

@ -1,6 +1,6 @@
---
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.
source: app/building-your-application/testing/vitest
---

View file

@ -10,23 +10,59 @@ The `redirect` value returned from your `getStaticProps` or `getServerSideProps`
Make sure you return the proper values for the `redirect` value.
```js filename="pages/blog/[slug].js"
export const getStaticProps = ({ params }) => {
if (params.slug === 'deleted-post') {
```tsx filename="pages/index.tsx" switcher
import type { InferGetStaticPropsType, GetStaticProps } from 'next'
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 {
redirect: {
permanent: true, // or false
destination: '/some-location',
permanent: false, // or true
destination: '/404',
},
}
}
return { props: { repo } }
}) 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 {
props: {},
redirect: {
permanent: false, // or true
destination: '/404',
},
}
}
export default function Page(props) {}
return { props: { repo } }
}
export default function Page({ repo }) {
return repo.stargazers_count
}
```
## Useful Links