You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
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.
Copy file name to clipboardExpand all lines: docs/api-reference/next.config.js/basepath.md
+8-1Lines changed: 8 additions & 1 deletion
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -4,7 +4,14 @@ description: Learn more about setting a base path in Next.js
4
4
5
5
# Base Path
6
6
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>
8
15
9
16
To deploy a Next.js application under a sub-path of a domain you can use the `basePath` config option.
Copy file name to clipboardExpand all lines: docs/api-reference/next.config.js/headers.md
+4-5Lines changed: 4 additions & 5 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -4,8 +4,6 @@ description: Add custom HTTP headers to your Next.js app.
4
4
5
5
# Headers
6
6
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
-
9
7
<detailsopen>
10
8
<summary><b>Examples</b></summary>
11
9
<ul>
@@ -16,9 +14,10 @@ description: Add custom HTTP headers to your Next.js app.
Copy file name to clipboardExpand all lines: docs/api-reference/next.config.js/redirects.md
+4-5Lines changed: 4 additions & 5 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -4,8 +4,6 @@ description: Add redirects to your Next.js app.
4
4
5
5
# Redirects
6
6
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
-
9
7
<detailsopen>
10
8
<summary><b>Examples</b></summary>
11
9
<ul>
@@ -16,9 +14,10 @@ description: Add redirects to your Next.js app.
Copy file name to clipboardExpand all lines: docs/api-reference/next.config.js/rewrites.md
+7-6Lines changed: 7 additions & 6 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -4,8 +4,6 @@ description: Add rewrites to your Next.js app.
4
4
5
5
# Rewrites
6
6
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
-
9
7
<detailsopen>
10
8
<summary><b>Examples</b></summary>
11
9
<ul>
@@ -16,14 +14,17 @@ description: Add rewrites to your Next.js app.
16
14
<details>
17
15
<summary><b>Version History</b></summary>
18
16
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. |
22
21
23
22
</details>
24
23
25
24
Rewrites allow you to map an incoming request path to a different destination path.
26
25
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
+
27
28
Rewrites are only available on the Node.js environment and do not affect client-side routing.
28
29
29
30
To use rewrites you can use the `rewrites` key in `next.config.js`:
@@ -326,7 +327,7 @@ module.exports = {
326
327
}
327
328
```
328
329
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).
Copy file name to clipboardExpand all lines: docs/api-reference/next.config.js/trailing-slash.md
+8-1Lines changed: 8 additions & 1 deletion
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -4,7 +4,14 @@ description: Configure Next.js pages to resolve with or without a trailing slash
4
4
5
5
# Trailing Slash
6
6
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>
8
15
9
16
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.
Copy file name to clipboardExpand all lines: docs/basic-features/data-fetching.md
+40-16Lines changed: 40 additions & 16 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -222,20 +222,27 @@ export default Blog
222
222
223
223
### Incremental Static Regeneration
224
224
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.
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. |
235
240
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>
237
242
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:
239
246
240
247
```jsx
241
248
functionBlog({ posts }) {
@@ -261,25 +268,42 @@ export async function getStaticProps() {
261
268
},
262
269
// Next.js will attempt to re-generate the page:
263
270
// - 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
266
273
}
267
274
}
268
275
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
+
exportasyncfunctiongetStaticPaths() {
280
+
constres=awaitfetch('https://.../posts')
281
+
constposts=awaitres.json()
282
+
283
+
// Get the paths we want to pre-render based on posts
284
+
constpaths=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
+
269
294
exportdefaultBlog
270
295
```
271
296
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.
275
298
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.
277
303
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.
279
305
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).
0 commit comments