Skip to content

Commit f6c6094

Browse files
authored
Clarify rewrites and other docs cleanup. (vercel#24890)
Based on user feedback, this clarifies the difference between rewrites and redirects, as well as follows the new pattern for showing version history with a collapsible table.
1 parent 4bc87e4 commit f6c6094

File tree

6 files changed

+71
-34
lines changed

6 files changed

+71
-34
lines changed

docs/api-reference/next.config.js/basepath.md

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,14 @@ description: Learn more about setting a base path in Next.js
44

55
# Base Path
66

7-
> This feature was introduced in [Next.js 9.5](https://nextjs.org/blog/next-9-5) and up. If you’re using older versions of Next.js, please upgrade before trying it out.
7+
<details>
8+
<summary><b>Version History</b></summary>
9+
10+
| Version | Changes |
11+
| -------- | ---------------- |
12+
| `v9.5.0` | Base Path added. |
13+
14+
</details>
815

916
To deploy a Next.js application under a sub-path of a domain you can use the `basePath` config option.
1017

docs/api-reference/next.config.js/headers.md

Lines changed: 4 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -4,8 +4,6 @@ description: Add custom HTTP headers to your Next.js app.
44

55
# Headers
66

7-
> This feature was introduced in [Next.js 9.5](https://nextjs.org/blog/next-9-5) and up. If you’re using older versions of Next.js, please upgrade before trying it out.
8-
97
<details open>
108
<summary><b>Examples</b></summary>
119
<ul>
@@ -16,9 +14,10 @@ description: Add custom HTTP headers to your Next.js app.
1614
<details>
1715
<summary><b>Version History</b></summary>
1816

19-
| Version | Changes |
20-
| --------- | ------------ |
21-
| `v10.2.0` | `has` added. |
17+
| Version | Changes |
18+
| --------- | -------------- |
19+
| `v10.2.0` | `has` added. |
20+
| `v9.5.0` | Headers added. |
2221

2322
</details>
2423

docs/api-reference/next.config.js/redirects.md

Lines changed: 4 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -4,8 +4,6 @@ description: Add redirects to your Next.js app.
44

55
# Redirects
66

7-
> This feature was introduced in [Next.js 9.5](https://nextjs.org/blog/next-9-5) and up. If you’re using older versions of Next.js, please upgrade before trying it out.
8-
97
<details open>
108
<summary><b>Examples</b></summary>
119
<ul>
@@ -16,9 +14,10 @@ description: Add redirects to your Next.js app.
1614
<details>
1715
<summary><b>Version History</b></summary>
1816

19-
| Version | Changes |
20-
| --------- | ------------ |
21-
| `v10.2.0` | `has` added. |
17+
| Version | Changes |
18+
| --------- | ---------------- |
19+
| `v10.2.0` | `has` added. |
20+
| `v9.5.0` | Redirects added. |
2221

2322
</details>
2423

docs/api-reference/next.config.js/rewrites.md

Lines changed: 7 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -4,8 +4,6 @@ description: Add rewrites to your Next.js app.
44

55
# Rewrites
66

7-
> This feature was introduced in [Next.js 9.5](https://nextjs.org/blog/next-9-5) and up. If you’re using older versions of Next.js, please upgrade before trying it out.
8-
97
<details open>
108
<summary><b>Examples</b></summary>
119
<ul>
@@ -16,14 +14,17 @@ description: Add rewrites to your Next.js app.
1614
<details>
1715
<summary><b>Version History</b></summary>
1816

19-
| Version | Changes |
20-
| --------- | ------------ |
21-
| `v10.2.0` | `has` added. |
17+
| Version | Changes |
18+
| --------- | --------------- |
19+
| `v10.2.0` | `has` added. |
20+
| `v9.5.0` | Rewrites added. |
2221

2322
</details>
2423

2524
Rewrites allow you to map an incoming request path to a different destination path.
2625

26+
Rewrites act as a URL proxy and mask the destination path, making it appear the user hasn't changed their location on the site. In contrast, [redirects](/docs/api-reference/next.config.js/redirects.md) will reroute to a new page a show the URL changes.
27+
2728
Rewrites are only available on the Node.js environment and do not affect client-side routing.
2829

2930
To use rewrites you can use the `rewrites` key in `next.config.js`:
@@ -326,7 +327,7 @@ module.exports = {
326327
}
327328
```
328329

329-
See additional information on incremental adoption [in the docs here](https://nextjs.org/docs/migrating/incremental-adoption).
330+
See additional information on incremental adoption [in the docs here](/docs/migrating/incremental-adoption.md).
330331

331332
### Rewrites with basePath support
332333

docs/api-reference/next.config.js/trailing-slash.md

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,14 @@ description: Configure Next.js pages to resolve with or without a trailing slash
44

55
# Trailing Slash
66

7-
> This feature was introduced in [Next.js 9.5](https://nextjs.org/blog/next-9-5) and up. If you’re using older versions of Next.js, please upgrade before trying it out.
7+
<details>
8+
<summary><b>Version History</b></summary>
9+
10+
| Version | Changes |
11+
| -------- | --------------------- |
12+
| `v9.5.0` | Trailing Slash added. |
13+
14+
</details>
815

916
By default Next.js will redirect urls with trailing slashes to their counterpart without a trailing slash. For example `/about/` will redirect to `/about`. You can configure this behavior to act the opposite way, where urls without trailing slashes are redirected to their counterparts with trailing slashes.
1017

docs/basic-features/data-fetching.md

Lines changed: 40 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -222,20 +222,27 @@ export default Blog
222222

223223
### Incremental Static Regeneration
224224

225-
> This feature was introduced in [Next.js 9.5](https://nextjs.org/blog/next-9-5#stable-incremental-static-regeneration) and up. If you’re using older versions of Next.js, please upgrade before trying Incremental Static Regeneration.
226-
227225
<details open>
228226
<summary><b>Examples</b></summary>
229227
<ul>
230-
<li><a href="https://reactions-demo.vercel.app/">Static Reactions Demo</a></li>
228+
<li><a href="https://nextjs.org/commerce">Next.js Commerce</a></li>
229+
<li><a href="https://reactions-demo.vercel.app/">GitHub Reactions Demo</a></li>
230+
<li><a href="https://static-tweet.vercel.app/">Static Tweet Demo</a></li>
231231
</ul>
232232
</details>
233233

234-
With [`getStaticProps`](#getstaticprops-static-generation) you don't have to stop relying on dynamic content, as **static content can also be dynamic**. Incremental Static Regeneration allows you to update _existing_ pages by re-rendering them in the background as traffic comes in.
234+
<details>
235+
<summary><b>Version History</b></summary>
236+
237+
| Version | Changes |
238+
| -------- | ---------------- |
239+
| `v9.5.0` | Base Path added. |
235240

236-
Inspired by [stale-while-revalidate](https://tools.ietf.org/html/rfc5861), background regeneration ensures traffic is served uninterruptedly, always from static storage, and the newly built page is pushed only after it's done generating.
241+
</details>
237242

238-
Consider our previous [`getStaticProps` example](#simple-example), but now with regeneration enabled:
243+
Next.js allows you to create or update static pages _after_ you’ve built your site. Incremental Static Regeneration (ISR) enables you to use static-generation on a per-page basis, **without needing to rebuild the entire site**. With ISR, you can retain the benefits of static while scaling to millions of pages.
244+
245+
Consider our previous [`getStaticProps` example](#simple-example), but now with Incremental Static Regeneration enabled through the `revalidate` property:
239246

240247
```jsx
241248
function Blog({ posts }) {
@@ -261,25 +268,42 @@ export async function getStaticProps() {
261268
},
262269
// Next.js will attempt to re-generate the page:
263270
// - When a request comes in
264-
// - At most once every second
265-
revalidate: 1, // In seconds
271+
// - At most once every 10 seconds
272+
revalidate: 10, // In seconds
266273
}
267274
}
268275

276+
// This function gets called at build time on server-side.
277+
// It may be called again, on a serverless function, if
278+
// the path has not been generated.
279+
export async function getStaticPaths() {
280+
const res = await fetch('https://.../posts')
281+
const posts = await res.json()
282+
283+
// Get the paths we want to pre-render based on posts
284+
const paths = posts.map((post) => ({
285+
params: { id: post.id },
286+
}))
287+
288+
// We'll pre-render only these paths at build time.
289+
// { fallback: blocking } will server-render pages
290+
// on-demand if the path doesn't exist.
291+
return { paths, fallback: 'blocking' }
292+
}
293+
269294
export default Blog
270295
```
271296

272-
Now the list of blog posts will be revalidated once per second; if you add a new blog post it will be available almost immediately, without having to re-build your app or make a new deployment.
273-
274-
This works perfectly with [`fallback: true`](#fallback-true). Because now you can have a list of posts that's always up to date with the latest posts, and have a [blog post page](#fallback-pages) that generates blog posts on-demand, no matter how many posts you add or update.
297+
When a request is made to a page that was pre-rendered at build time, it will initially show the cached page.
275298

276-
#### Static content at scale
299+
- Any requests to the page after the initial request and before 10 seconds are also cached and instantaneous.
300+
- After the 10-second window, the next request will still show the cached (stale) page
301+
- Next.js triggers a regeneration of the page in the background.
302+
- Once the page has been successfully generated, Next.js will invalidate the cache and show the updated product page. If the background regeneration fails, the old page remains unaltered.
277303

278-
Unlike traditional SSR, [Incremental Static Regeneration](#incremental-static-regeneration) ensures you retain the benefits of static:
304+
When a request is made to a path that hasn’t been generated, Next.js will server-render the page on the first request. Future requests will serve the static file from the cache.
279305

280-
- No spikes in latency. Pages are served consistently fast
281-
- Pages never go offline. If the background page re-generation fails, the old page remains unaltered
282-
- Low database and backend load. Pages are re-computed at most once concurrently
306+
To learn how to persist the cache globally and handle rollbacks, learn more about [Incremental Static Regeneration](https://vercel.com/docs/next.js/incremental-static-regeneration).
283307

284308
### Reading files: Use `process.cwd()`
285309

0 commit comments

Comments
 (0)