Skip to content

Commit debb967

Browse files
authored
Merge branch 'canary' into cms-builder-io-example
2 parents fb7ed6e + a9da48d commit debb967

File tree

151 files changed

+64549
-64406
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

151 files changed

+64549
-64406
lines changed

bench/instrument.js

Lines changed: 0 additions & 39 deletions
This file was deleted.

docs/advanced-features/custom-error-page.md

Lines changed: 15 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -25,9 +25,22 @@ export default function Custom404() {
2525
2626
## 500 Page
2727

28-
By default Next.js provides a 500 error page that matches the default 404 page’s style. This page is not statically optimized as it allows server-side errors to be reported. This is why 404 and 500 (other errors) are separated.
28+
Server-rendering an error page for every visit adds complexity to responding to errors. To help users get responses to errors as fast as possible, Next.js provides a static 500 page by default without having to add any additional files.
2929

30-
### Customizing The Error Page
30+
### Customizing The 500 Page
31+
32+
To customize the 500 page you can create a `pages/500.js` file. This file is statically generated at build time.
33+
34+
```jsx
35+
// pages/500.js
36+
export default function Custom500() {
37+
return <h1>500 - Server-side error occurred</h1>
38+
}
39+
```
40+
41+
> **Note**: You can use [`getStaticProps`](/docs/basic-features/data-fetching.md#getstaticprops-static-generation) inside this page if you need to fetch data at build time.
42+
43+
### More Advanced Error Page Customizing
3144

3245
500 errors are handled both client-side and server-side by the `Error` component. If you wish to override it, define the file `pages/_error.js` and add the following code:
3346

docs/advanced-features/module-path-aliases.md

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,8 @@ Next.js automatically supports the `tsconfig.json` and `jsconfig.json` `"paths"`
1515

1616
> Note: `jsconfig.json` can be used when you don't use TypeScript
1717
18+
> Note: you need to restart dev server to reflect modifications done in `tsconfig.json` / `jsconfig.json`
19+
1820
These options allow you to configure module aliases, for example a common pattern is aliasing certain directories to use absolute paths.
1921

2022
One useful feature of these options is that they integrate automatically into certain editors, for example vscode.

docs/advanced-features/source-maps.md

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ description: Enables browser source map generation during the production build.
44

55
# Source Maps
66

7-
Source Maps are enabled by default during development. During production builds they are disabled as generation source maps can significantly increase build times and memory usage while being generated.
7+
Source Maps are enabled by default during development. During production builds, they are disabled as generating source maps can significantly increase build times and memory usage while being generated.
88

99
Next.js provides a configuration flag you can use to enable browser source map generation during the production build:
1010

@@ -15,9 +15,9 @@ module.exports = {
1515
}
1616
```
1717

18-
When the `productionBrowserSourceMaps` option is enabled the source maps will be output in the same directory as the JavaScript files, Next.js will automatically serve these files when requested.
18+
When the `productionBrowserSourceMaps` option is enabled, the source maps will be output in the same directory as the JavaScript files. Next.js will automatically serve these files when requested.
1919

2020
## Caveats
2121

22-
- Can increase `next build` time
22+
- Adding source maps can increase `next build` time
2323
- Increases memory usage during `next build`

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

Lines changed: 28 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,7 @@ Note: this value must be set at build time and can not be changed without re-bui
2222

2323
When linking to other pages using `next/link` and `next/router` the `basePath` will be automatically applied.
2424

25-
For example using `/about` will automatically become `/docs/about` when `basePath` is set to `/docs`.
25+
For example, using `/about` will automatically become `/docs/about` when `basePath` is set to `/docs`.
2626

2727
```js
2828
export default function HomePage() {
@@ -43,3 +43,30 @@ Output html:
4343
```
4444

4545
This makes sure that you don't have to change all links in your application when changing the `basePath` value.
46+
47+
## Images
48+
49+
When using the [`next/image`](/docs/api-reference/next/image.md) component, you will need to add the `basePath` in front of `src`.
50+
51+
For example, using `/docs/me.png` will properly serve your image when `basePath` is set to `/docs`.
52+
53+
```jsx
54+
import Image from 'next/image'
55+
56+
function Home() {
57+
return (
58+
<>
59+
<h1>My Homepage</h1>
60+
<Image
61+
src="/docs/me.png"
62+
alt="Picture of the author"
63+
width={500}
64+
height={500}
65+
/>
66+
<p>Welcome to my homepage!</p>
67+
</>
68+
)
69+
}
70+
71+
export default Home
72+
```

docs/api-reference/next/router.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -72,7 +72,7 @@ router.push(url, as, options)
7272
- `url` - The URL to navigate to
7373
- `as` - Optional decorator for the URL that will be shown in the browser. Before Next.js 9.5.3 this was used for dynamic routes, check our [previous docs](https://nextjs.org/docs/tag/v9.5.2/api-reference/next/link#dynamic-routes) to see how it worked
7474
- `options` - Optional object with the following configuration options:
75-
- `scroll`: Scroll to the top of the page after a navigation. Defaults to `true`
75+
- `scroll` - Optional boolean, controls scrolling to the top of the page after navigation. Defaults to `true`
7676
- [`shallow`](/docs/routing/shallow-routing.md): Update the path of the current page without rerunning [`getStaticProps`](/docs/basic-features/data-fetching.md#getstaticprops-static-generation), [`getServerSideProps`](/docs/basic-features/data-fetching.md#getserversideprops-server-side-rendering) or [`getInitialProps`](/docs/api-reference/data-fetching/getInitialProps.md). Defaults to `false`
7777

7878
> You don't need to use `router.push` for external URLs. [window.location](https://developer.mozilla.org/en-US/docs/Web/API/Window/location) is better suited for those cases.

docs/basic-features/data-fetching.md

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -88,7 +88,7 @@ The `context` parameter is an object containing the following keys:
8888
}
8989

9090
return {
91-
props: {}, // will be passed to the page component as props
91+
props: { data }, // will be passed to the page component as props
9292
}
9393
}
9494
```
@@ -112,7 +112,7 @@ The `context` parameter is an object containing the following keys:
112112
}
113113

114114
return {
115-
props: {}, // will be passed to the page component as props
115+
props: { data }, // will be passed to the page component as props
116116
}
117117
}
118118
```
@@ -157,7 +157,7 @@ export async function getStaticProps() {
157157
const res = await fetch('https://.../posts')
158158
const posts = await res.json()
159159

160-
// By returning { props: posts }, the Blog component
160+
// By returning { props: { posts } }, the Blog component
161161
// will receive `posts` as a prop at build time
162162
return {
163163
props: {
@@ -326,7 +326,7 @@ export async function getStaticProps() {
326326
content: fileContents,
327327
}
328328
})
329-
// By returning { props: posts }, the Blog component
329+
// By returning { props: { posts } }, the Blog component
330330
// will receive `posts` as a prop at build time
331331
return {
332332
props: {

docs/basic-features/environment-variables.md

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -135,3 +135,15 @@ This one is useful when running tests with tools like `jest` or `cypress` where
135135
There is a small difference between `test` environment, and both `development` and `production` that you need to bear in mind: `.env.local` won't be loaded, as you expect tests to produce the same results for everyone. This way every test execution will use same env defaults across different executions by ignoring your `.env.local` (which is intended to override the default set).
136136
137137
> **Note**: similar to Default Environment Variables, `.env.test` file should be included in your repository, but `.env.test.local` shouldn't, as `.env*.local` are intended to be ignored through `.gitignore`.
138+
139+
While running unit tests you can make sure to load your environment variables the same way Next.js does by leveraging the `loadEnvConfig` function from the `@next/env` package.
140+
141+
```js
142+
// The below can be used in a Jest global setup file or similar for your testing set-up
143+
import { loadEnvConfig } from '@next/env'
144+
145+
export default async () => {
146+
const projectDir = process.cwd()
147+
loadEnvConfig(projectDir)
148+
}
149+
```

docs/basic-features/image-optimization.md

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -92,6 +92,8 @@ The following Image Optimization cloud providers are included:
9292

9393
If you need a different provider, you can use the [`loader`](/docs/api-reference/next/image.md#loader) prop with `next/image`.
9494

95+
> The `next/image` component's default loader is not supported when using [`next export`](/docs/advanced-features/static-html-export.md). However, other loader options will work.
96+
9597
## Caching
9698

9799
The following describes the caching algorithm for the default [loader](#loader). For all other loaders, please refer to your cloud provider's documentation.

docs/basic-features/pages.md

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -161,7 +161,9 @@ export async function getStaticPaths() {
161161
const posts = await res.json()
162162

163163
// Get the paths we want to pre-render based on posts
164-
const paths = posts.map((post) => `/posts/${post.id}`)
164+
const paths = posts.map((post) => ({
165+
params: { id: post.id },
166+
}))
165167

166168
// We'll pre-render only these paths at build time.
167169
// { fallback: false } means other routes should 404.

0 commit comments

Comments
 (0)