Skip to content
Closed
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
The table of contents is too big for display.
Diff view
Diff view
  •  
  •  
  •  
1 change: 1 addition & 0 deletions .alexignore
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
CODE_OF_CONDUCT.md
7 changes: 7 additions & 0 deletions .alexrc
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
{
"allow": [
"invalid",
"hook",
"hooks"
]
}
2 changes: 1 addition & 1 deletion contributing.md
Original file line number Diff line number Diff line change
Expand Up @@ -46,7 +46,7 @@ Running a specific test suite inside of the `test/integration` directory:
yarn testonly --testPathPattern "production"
```

Running just one test in the `production` test suite:
Running one test in the `production` test suite:

```sh
yarn testonly --testPathPattern "production" -t "should allow etag header support"
Expand Down
2 changes: 1 addition & 1 deletion docs/advanced-features/codemods.md
Original file line number Diff line number Diff line change
Expand Up @@ -169,7 +169,7 @@ export default withRouter(
)
```

This is just one case. All the cases that are transformed (and tested) can be found in the [`__testfixtures__` directory](https://github.com/vercel/next.js/tree/canary/packages/next-codemod/transforms/__testfixtures__/url-to-withrouter).
This is one case. All the cases that are transformed (and tested) can be found in the [`__testfixtures__` directory](https://github.com/vercel/next.js/tree/canary/packages/next-codemod/transforms/__testfixtures__/url-to-withrouter).

#### Usage

Expand Down
2 changes: 1 addition & 1 deletion docs/advanced-features/custom-app.md
Original file line number Diff line number Diff line change
Expand Up @@ -42,7 +42,7 @@ The `Component` prop is the active `page`, so whenever you navigate between rout

### Caveats

- If your app is running and you just added a custom `App`, you'll need to restart the development server. Only required if `pages/_app.js` didn't exist before.
- If your app is running and you added a custom `App`, you'll need to restart the development server. Only required if `pages/_app.js` didn't exist before.
- Adding a custom `getInitialProps` in your `App` will disable [Automatic Static Optimization](/docs/advanced-features/automatic-static-optimization.md) in pages without [Static Generation](/docs/basic-features/data-fetching.md#getstaticprops-static-generation).
- When you add `getInitialProps` in your custom app, you must `import App from "next/app"`, call `App.getInitialProps(appContext)` inside `getInitialProps` and merge the returned object into the return value.
- `App` currently does not support Next.js [Data Fetching methods](/docs/basic-features/data-fetching.md) like [`getStaticProps`](/docs/basic-features/data-fetching.md#getstaticprops-static-generation) or [`getServerSideProps`](/docs/basic-features/data-fetching.md#getserversideprops-server-side-rendering).
Expand Down
2 changes: 1 addition & 1 deletion docs/advanced-features/debugging.md
Original file line number Diff line number Diff line change
Expand Up @@ -69,7 +69,7 @@ Now hit <kdb>F5</kbd> or select **Debug: Start Debugging** from the Command Pale

Now you can use the [`debugger`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/debugger) statement to pause your backend or frontend code anytime you want to observe and debug your code more precisely.

If you trigger the underlying code by refreshing the current page, clicking on a page link or fetching an API route, your code will be paused and the debugger window will pop up.
If you trigger the underlying code by refreshing the current page, clicking on a page link or fetching an API route, your code will be paused and the debugger window will appear.

To learn more on how to use a JavaScript debugger, take a look at the following documentation:

Expand Down
2 changes: 1 addition & 1 deletion docs/advanced-features/dynamic-import.md
Original file line number Diff line number Diff line change
Expand Up @@ -45,7 +45,7 @@ export default function Page() {

You can think of dynamic imports as another way to split your code into manageable chunks.

React components can also be imported using dynamic imports, but in this case we use it in conjunction with `next/dynamic` to make sure it works just like any other React Component. Check out the sections below for more details on how it works.
React components can also be imported using dynamic imports, but in this case we use it in conjunction with `next/dynamic` to make sure it works like any other React Component. Check out the sections below for more details on how it works.

## Basic usage

Expand Down
4 changes: 2 additions & 2 deletions docs/advanced-features/i18n-routing.md
Original file line number Diff line number Diff line change
Expand Up @@ -138,7 +138,7 @@ When using Sub-path Routing, the user would be redirected to `/fr`.

### Disabling Automatic Locale Detection

The automatic locale detection can be disabled with:
The automatic locale detection can be turned off with:

```js
// next.config.js
Expand All @@ -153,7 +153,7 @@ When `localeDetection` is set to `false` Next.js will no longer automatically re

## Accessing the locale information

You can access the locale information via the Next.js router. For example, using the [`useRouter()`](/docs/api-reference/next/router.md#userouter) hook the following properties are available:
You can access the locale information via the Next.js router. For example, using [`useRouter()`](/docs/api-reference/next/router.md#userouter) the following properties are available:

- `locale` contains the currently active locale.
- `locales` contains all configured locales.
Expand Down
2 changes: 1 addition & 1 deletion docs/advanced-features/multi-zones.md
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@ With multi zones support, you can merge both these apps into a single one allowi

## How to define a zone

There are no special zones related APIs. You only need to do following:
There are no zone related APIs. You only need to do following:

- Make sure to keep only the pages you need in your app, meaning that an app can't have pages from another app, if app `A` has `/blog` then app `B` shouldn't have it too.
- Make sure to configure a [basePath](/docs/api-reference/next.config.js/basepath.md) to avoid conflicts with pages and static files.
Expand Down
2 changes: 1 addition & 1 deletion docs/advanced-features/source-maps.md
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ description: Enables browser source map generation during the production build.

# Source Maps

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.
Source Maps are enabled by default during development. During production builds, they are turned off as generating source maps can significantly increase build times and memory usage while being generated.

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

Expand Down
4 changes: 2 additions & 2 deletions docs/advanced-features/static-html-export.md
Original file line number Diff line number Diff line change
Expand Up @@ -17,11 +17,11 @@ The exported app supports almost every feature of Next.js, including dynamic rou

`next export` works by prerendering all pages to HTML. For [dynamic routes](/docs/routing/dynamic-routes.md), your page can export a [`getStaticPaths`](/docs/basic-features/data-fetching.md#getstaticpaths-static-generation) function to let the exporter know which HTML pages to generate for that route.

> `next export` is intended for scenarios where **none** of your pages have server-side or incremental data requirements (though statically-rendered pages can still [fetch data on the client side](/docs/basic-features/data-fetching.md#fetching-data-on-the-client-side) just fine).
> `next export` is intended for scenarios where **none** of your pages have server-side or incremental data requirements (though statically-rendered pages can still [fetch data on the client side](/docs/basic-features/data-fetching.md#fetching-data-on-the-client-side)).
>
> If you're looking to make a hybrid site where only _some_ pages are prerendered to static HTML, Next.js already does that automatically for you! Read up on [Automatic Static Optimization](/docs/advanced-features/automatic-static-optimization.md) for details.
>
> `next export` also causes features like [Incremental Static Generation](/docs/basic-features/data-fetching.md#fallback-true) and [Regeneration](/docs/basic-features/data-fetching.md#incremental-static-regeneration) to be disabled, as they require [`next start`](/docs/api-reference/cli.md#production) or a serverless deployment to function.
> `next export` also causes features like [Incremental Static Generation](/docs/basic-features/data-fetching.md#fallback-true) and [Regeneration](/docs/basic-features/data-fetching.md#incremental-static-regeneration) to be turned off, as they require [`next start`](/docs/api-reference/cli.md#production) or a serverless deployment to function.

## How to use it

Expand Down
2 changes: 1 addition & 1 deletion docs/api-reference/cli.md
Original file line number Diff line number Diff line change
Expand Up @@ -46,7 +46,7 @@ NODE_OPTIONS='--inspect' next
- **Size** – The number of assets downloaded when navigating to the page client-side. The size for each route only includes its dependencies.
- **First Load JS** – The number of assets downloaded when visiting the page from the server. The amount of JS shared by all is shown as a separate metric.

The first load is colored green, yellow, or red. Aim for green for performant applications.
The first load is indicated by green, yellow, or red. Aim for green for performant applications.

You can enable production profiling for React with the `--profile` flag in `next build`. This requires [Next.js 9.5](https://nextjs.org/blog/next-9-5):

Expand Down
2 changes: 1 addition & 1 deletion docs/api-reference/create-next-app.md
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ description: Create Next.js apps in one command with create-next-app.

# Create Next App

The easiest way to get started with Next.js is by using `create-next-app`. This simple CLI tool enables you to quickly start building a new Next.js application, with everything set up for you. You can create a new app using the default Next.js template, or by using one of the [official Next.js examples](https://github.com/vercel/next.js/tree/canary/examples). To get started, use the following command:
The easiest way to get started with Next.js is by using `create-next-app`. This CLI tool enables you to quickly start building a new Next.js application, with everything set up for you. You can create a new app using the default Next.js template, or by using one of the [official Next.js examples](https://github.com/vercel/next.js/tree/canary/examples). To get started, use the following command:

```bash
npx create-next-app
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -36,7 +36,7 @@ Would instead become:
https://cdn.mydomain.com/_next/static/chunks/4b9b41aaa062cbbfeff4add70f256968c51ece5d.4d708494b3aed70c04f0.js
```

The exact configuration for uploading your files to a given CDN will depend on your CDN of choice. The only folder you need to host on your CDN is the contents of `.next/static/`, which should be uploaded as `_next/static/` as the above URL request indicates. **Do not upload the rest of your `.next/` folder**, as you should not expose your server code and other configuration to the public.
The exact configuration for uploading your files to a given CDN will depend on your CDN of choice. The only folder you need to serve on your CDN is the contents of `.next/static/`, which should be uploaded as `_next/static/` as the above URL request indicates. **Do not upload the rest of your `.next/` folder**, as you should not expose your server code and other configuration to the public.

While `assetPrefix` covers requests to `_next/static`, it does not influence the following paths:

Expand Down
2 changes: 1 addition & 1 deletion docs/api-reference/next.config.js/custom-webpack-config.md
Original file line number Diff line number Diff line change
Expand Up @@ -29,7 +29,7 @@ module.exports = {
}
```

> The `webpack` function is executed twice, once for the server and once for the client. This allows you to distinguish between client and server configuration using the `isServer` property.
> The `webpack` function is called twice, once for the server and once for the client. This allows you to distinguish between client and server configuration using the `isServer` property.

The second argument to the `webpack` function is an object with the following properties:

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@ module.exports = {

Now if you run `next build` Next.js will use `build` instead of the default `.next` folder.

> `distDir` **should not** leave your project directory. For example, `../build` is an **invalid** directory.
> `distDir` **should not** leave your project directory. For example, `../build` will not work.

## Related

Expand Down
6 changes: 3 additions & 3 deletions docs/api-reference/next/link.md
Original file line number Diff line number Diff line change
Expand Up @@ -57,15 +57,15 @@ export default Home
- `href` - The path or URL to navigate to. This is the only required prop
- `as` - Optional decorator for the path that will be shown in the browser URL bar. 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
- [`passHref`](#if-the-child-is-a-custom-component-that-wraps-an-a-tag) - Forces `Link` to send the `href` property to its child. Defaults to `false`
- `prefetch` - Prefetch the page in the background. Defaults to `true`. Any `<Link />` that is in the viewport (initially or through scroll) will be preloaded. Prefetch can be disabled by passing `prefetch={false}`. When `prefetch` is set to `false`, prefetching will still occur on hover. Pages using [Static Generation](/docs/basic-features/data-fetching.md#getstaticprops-static-generation) will preload `JSON` files with the data for faster page transitions. Prefetching is only enabled in production.
- `prefetch` - Prefetch the page in the background. Defaults to `true`. Any `<Link />` that is in the viewport (initially or through scroll) will be preloaded. Prefetch can be turned off by passing `prefetch={false}`. When `prefetch` is set to `false`, prefetching will still occur on hover. Pages using [Static Generation](/docs/basic-features/data-fetching.md#getstaticprops-static-generation) will preload `JSON` files with the data for faster page transitions. Prefetching is only enabled in production.
- [`replace`](#replace-the-url-instead-of-push) - Replace the current `history` state instead of adding a new url into the stack. Defaults to `false`
- [`scroll`](#disable-scrolling-to-the-top-of-the-page) - Scroll to the top of the page after a navigation. Defaults to `true`
- [`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`
- `locale` - The active locale is automatically prepended. `locale` allows for providing a different locale. When `false` `href` has to include the locale as the default behavior is disabled.
- `locale` - The active locale is automatically prepended. `locale` allows for providing a different locale. When set to `false`, `href` has to include the locale as the default behavior is turned off.

## If the route has dynamic segments

There is nothing special to do when linking to a [dynamic route](/docs/routing/dynamic-routes.md), including [catch all routes](/docs/routing/dynamic-routes.md#catch-all-routes), since Next.js 9.5.3 (for older versions check our [previous docs](https://nextjs.org/docs/tag/v9.5.2/api-reference/next/link#dynamic-routes)). However, it can become quite common and handy to use [interpolation](/docs/routing/introduction.md#linking-to-dynamic-paths) or an [URL Object](#with-url-object) to generate the link.
There is nothing to do when linking to a [dynamic route](/docs/routing/dynamic-routes.md), including [catch all routes](/docs/routing/dynamic-routes.md#catch-all-routes), since Next.js 9.5.3 (for older versions check our [previous docs](https://nextjs.org/docs/tag/v9.5.2/api-reference/next/link#dynamic-routes)). However, it can become quite common and handy to use [interpolation](/docs/routing/introduction.md#linking-to-dynamic-paths) or an [URL Object](#with-url-object) to generate the link.

For example, the dynamic route `pages/blog/[slug].js` will match the following link:

Expand Down
20 changes: 10 additions & 10 deletions docs/api-reference/next/router.md
Original file line number Diff line number Diff line change
Expand Up @@ -286,7 +286,7 @@ export default function Page() {

### router.back

Navigate back in history. Equivalent to clicking the browser’s back button. It executes `window.history.back()`.
Navigate back in history. Equivalent to clicking the browser’s back button. It calls `window.history.back()`.

#### Usage

Expand All @@ -306,7 +306,7 @@ export default function Page() {

### router.reload

Reload the current URL. Equivalent to clicking the browser’s refresh button. It executes `window.location.reload()`.
Reload the current URL. Equivalent to clicking the browser’s refresh button. It calls `window.location.reload()`.

#### Usage

Expand Down Expand Up @@ -335,13 +335,13 @@ export default function Page() {

You can listen to different events happening inside the Next.js Router. Here's a list of supported events:

- `routeChangeStart(url, { shallow })` - Fires when a route starts to change
- `routeChangeComplete(url, { shallow })` - Fires when a route changed completely
- `routeChangeError(err, url, { shallow })` - Fires when there's an error when changing routes, or a route load is cancelled
- `err.cancelled` - Indicates if the navigation was cancelled
- `beforeHistoryChange(url, { shallow })` - Fires just before changing the browser's history
- `hashChangeStart(url, { shallow })` - Fires when the hash will change but not the page
- `hashChangeComplete(url, { shallow })` - Fires when the hash has changed but not the page
- `routeChangeStart(url, { shallow })` - When a route starts to change.
- `routeChangeComplete(url, { shallow })` - When a route changed completely.
- `routeChangeError(err, url, { shallow })` - When there's an error when changing routes, or a route load is cancelled
- `err.cancelled` - Indicates if the navigation was cancelled.
- `beforeHistoryChange(url, { shallow })` - Before changing the browser's history.
- `hashChangeStart(url, { shallow })` - When the hash will change but not the page.
- `hashChangeComplete(url, { shallow })` - When the hash has changed but not the page.

> **Note:** Here `url` is the URL shown in the browser, including the [`basePath`](/docs/api-reference/next.config.js/basepath.md).

Expand Down Expand Up @@ -382,7 +382,7 @@ export default function MyApp({ Component, pageProps }) {

Router events should be registered when a component mounts ([useEffect](https://reactjs.org/docs/hooks-effect.html) or [componentDidMount](https://reactjs.org/docs/react-component.html#componentdidmount) / [componentWillUnmount](https://reactjs.org/docs/react-component.html#componentwillunmount)) or imperatively when an event happens.

If a route load is cancelled (for example, by clicking two links rapidly in succession), `routeChangeError` will fire. And the passed `err` will contain a `cancelled` property set to `true`, as in the following example:
If a route load is cancelled (for example, by clicking two links rapidly in succession), the `routeChangeError` event will be triggered. And the passed `err` will contain a `cancelled` property set to `true`, as in the following example:

```jsx
import { useEffect } from 'react'
Expand Down
6 changes: 4 additions & 2 deletions docs/basic-features/built-in-css-support.md
Original file line number Diff line number Diff line change
Expand Up @@ -142,6 +142,8 @@ export function Button() {
CSS Modules are an _optional feature_ and are **only enabled for files with the `.module.css` extension**.
Regular `<link>` stylesheets and global CSS files are still supported.

<!--alex ignore execution-->

In production, all CSS Module files will be automatically concatenated into **many minified and code-split** `.css` files.
These `.css` files represent hot execution paths in your application, ensuring the minimal amount of CSS is loaded for your application to paint.

Expand Down Expand Up @@ -252,9 +254,9 @@ Please see the [styled-jsx documentation](https://github.com/vercel/styled-jsx)

## FAQ

### Does it work with JavaScript disabled?
### Does it work with JavaScript turned off?

Yes, if you disable JavaScript the CSS will still be loaded in the production build (`next start`). During development, we require JavaScript to be enabled to provide the best developer experience with [Fast Refresh](https://nextjs.org/blog/next-9-4#fast-refresh).
Yes, if you turned off JavaScript the CSS will still be loaded in the production build (`next start`). During development, we require JavaScript to be enabled to provide the best developer experience with [Fast Refresh](https://nextjs.org/blog/next-9-4#fast-refresh).

## Related

Expand Down
Loading