Updates Mozilla links to not include language preference (#55326)

Internal suggestion to remove `en-US` from Mozilla urls since MDN is
available in multiple languages nowadays it will automatically redirect
to the viewer’s language preference.

Closes
[DX-2076](https://linear.app/vercel/issue/DX-2076/make-external-mozilla-links-language-agnostic-in-nextjs-docs)
This commit is contained in:
Michael Novotny 2023-09-13 11:06:29 -05:00 committed by GitHub
parent 083f49c247
commit fe797c1074
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
91 changed files with 371 additions and 371 deletions

View file

@ -42,7 +42,7 @@ There are other optional props you can pass to `<Link>`. See the [API reference]
#### Linking to Dynamic Segments #### Linking to Dynamic Segments
When linking to [dynamic segments](/docs/app/building-your-application/routing/dynamic-routes), you can use [template literals and interpolation](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals) to generate a list of links. For example, to generate a list of blog posts: When linking to [dynamic segments](/docs/app/building-your-application/routing/dynamic-routes), you can use [template literals and interpolation](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Template_literals) to generate a list of links. For example, to generate a list of blog posts:
```jsx filename="app/blog/PostList.js" ```jsx filename="app/blog/PostList.js"
import Link from 'next/link' import Link from 'next/link'

View file

@ -8,7 +8,7 @@ related:
- app/api-reference/file-conventions/route - app/api-reference/file-conventions/route
--- ---
Route Handlers allow you to create custom request handlers for a given route using the Web [Request](https://developer.mozilla.org/en-US/docs/Web/API/Request) and [Response](https://developer.mozilla.org/en-US/docs/Web/API/Response) APIs. Route Handlers allow you to create custom request handlers for a given route using the Web [Request](https://developer.mozilla.org/docs/Web/API/Request) and [Response](https://developer.mozilla.org/docs/Web/API/Response) APIs.
<Image <Image
alt="Route.js Special File" alt="Route.js Special File"
@ -36,11 +36,11 @@ Route Handlers can be nested inside the `app` directory, similar to `page.js` an
### Supported HTTP Methods ### Supported HTTP Methods
The following [HTTP methods](https://developer.mozilla.org/en-US/docs/Web/HTTP/Methods) are supported: `GET`, `POST`, `PUT`, `PATCH`, `DELETE`, `HEAD`, and `OPTIONS`. If an unsupported method is called, Next.js will return a `405 Method Not Allowed` response. The following [HTTP methods](https://developer.mozilla.org/docs/Web/HTTP/Methods) are supported: `GET`, `POST`, `PUT`, `PATCH`, `DELETE`, `HEAD`, and `OPTIONS`. If an unsupported method is called, Next.js will return a `405 Method Not Allowed` response.
### Extended `NextRequest` and `NextResponse` APIs ### Extended `NextRequest` and `NextResponse` APIs
In addition to supporting native [Request](https://developer.mozilla.org/en-US/docs/Web/API/Request) and [Response](https://developer.mozilla.org/en-US/docs/Web/API/Response). Next.js extends them with In addition to supporting native [Request](https://developer.mozilla.org/docs/Web/API/Request) and [Response](https://developer.mozilla.org/docs/Web/API/Response). Next.js extends them with
[`NextRequest`](/docs/app/api-reference/functions/next-request) and [`NextResponse`](/docs/app/api-reference/functions/next-response) to provide convenient helpers for advanced use cases. [`NextRequest`](/docs/app/api-reference/functions/next-request) and [`NextResponse`](/docs/app/api-reference/functions/next-response) to provide convenient helpers for advanced use cases.
## Behavior ## Behavior
@ -245,7 +245,7 @@ Route Handlers can be used with dynamic functions from Next.js, like [`cookies`]
You can read cookies with [`cookies`](/docs/app/api-reference/functions/cookies) from `next/headers`. This server function can be called directly in a Route Handler, or nested inside of another function. You can read cookies with [`cookies`](/docs/app/api-reference/functions/cookies) from `next/headers`. This server function can be called directly in a Route Handler, or nested inside of another function.
This `cookies` instance is read-only. To set cookies, you need to return a new `Response` using the [`Set-Cookie`](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Set-Cookie) header. This `cookies` instance is read-only. To set cookies, you need to return a new `Response` using the [`Set-Cookie`](https://developer.mozilla.org/docs/Web/HTTP/Headers/Set-Cookie) header.
```ts filename="app/api/route.ts" switcher ```ts filename="app/api/route.ts" switcher
import { cookies } from 'next/headers' import { cookies } from 'next/headers'
@ -465,7 +465,7 @@ export async function POST(req) {
These abstractions use the Web APIs to create a stream. You can also use the underlying Web APIs directly. These abstractions use the Web APIs to create a stream. You can also use the underlying Web APIs directly.
```ts filename="app/api/route.ts" switcher ```ts filename="app/api/route.ts" switcher
// https://developer.mozilla.org/en-US/docs/Web/API/ReadableStream#convert_async_iterator_to_stream // https://developer.mozilla.org/docs/Web/API/ReadableStream#convert_async_iterator_to_stream
function iteratorToStream(iterator: any) { function iteratorToStream(iterator: any) {
return new ReadableStream({ return new ReadableStream({
async pull(controller) { async pull(controller) {
@ -505,7 +505,7 @@ export async function GET() {
``` ```
```js filename="app/api/route.js" switcher ```js filename="app/api/route.js" switcher
// https://developer.mozilla.org/en-US/docs/Web/API/ReadableStream#convert_async_iterator_to_stream // https://developer.mozilla.org/docs/Web/API/ReadableStream#convert_async_iterator_to_stream
function iteratorToStream(iterator) { function iteratorToStream(iterator) {
return new ReadableStream({ return new ReadableStream({
async pull(controller) { async pull(controller) {

View file

@ -288,7 +288,7 @@ export function middleware(request) {
} }
``` ```
> **Good to know**: Avoid setting large headers as it might cause [431 Request Header Fields Too Large](https://developer.mozilla.org/en-US/docs/Web/HTTP/Status/431) error depending on your backend web server configuration. > **Good to know**: Avoid setting large headers as it might cause [431 Request Header Fields Too Large](https://developer.mozilla.org/docs/Web/HTTP/Status/431) error depending on your backend web server configuration.
## Producing a Response ## Producing a Response

View file

@ -15,7 +15,7 @@ There are four ways you can fetch data:
## Fetching Data on the Server with `fetch` ## Fetching Data on the Server with `fetch`
Next.js extends the native [`fetch` Web API](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API) to allow you to configure the [caching](#caching-data) and [revalidating](#revalidating-data) behavior for each fetch request on the server. React extends `fetch` to automatically [memoize](/docs/app/building-your-application/data-fetching/patterns#fetching-data-where-its-needed) fetch requests while rendering a React component tree. Next.js extends the native [`fetch` Web API](https://developer.mozilla.org/docs/Web/API/Fetch_API) to allow you to configure the [caching](#caching-data) and [revalidating](#revalidating-data) behavior for each fetch request on the server. React extends `fetch` to automatically [memoize](/docs/app/building-your-application/data-fetching/patterns#fetching-data-where-its-needed) fetch requests while rendering a React component tree.
You can use `fetch` with [`async`/`await` in Server Components](https://github.com/acdlite/rfcs/blob/first-class-promises/text/0000-first-class-support-for-promises.md), in [Route Handlers](/docs/app/building-your-application/routing/route-handlers), and in [Server Actions](/docs/app/building-your-application/data-fetching/forms-and-mutations). You can use `fetch` with [`async`/`await` in Server Components](https://github.com/acdlite/rfcs/blob/first-class-promises/text/0000-first-class-support-for-promises.md), in [Route Handlers](/docs/app/building-your-application/routing/route-handlers), and in [Server Actions](/docs/app/building-your-application/data-fetching/forms-and-mutations).
@ -84,7 +84,7 @@ fetch('https://...', { cache: 'force-cache' })
> **What is the Data Cache?** > **What is the Data Cache?**
> >
> The Data Cache is a persistent [HTTP cache](https://developer.mozilla.org/en-US/docs/Web/HTTP/Caching). Depending on your platform, the cache can scale automatically and be [shared across multiple regions](https://vercel.com/docs/infrastructure/data-cache). > The Data Cache is a persistent [HTTP cache](https://developer.mozilla.org/docs/Web/HTTP/Caching). Depending on your platform, the cache can scale automatically and be [shared across multiple regions](https://vercel.com/docs/infrastructure/data-cache).
> >
> Learn more about the [Data Cache](/docs/app/building-your-application/caching#data-cache). > Learn more about the [Data Cache](/docs/app/building-your-application/caching#data-cache).

View file

@ -220,7 +220,7 @@ import { getItem } from '@/utils/get-item'
export const preload = (id: string) => { export const preload = (id: string) => {
// void evaluates the given expression and returns undefined // void evaluates the given expression and returns undefined
// https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/void // https://developer.mozilla.org/docs/Web/JavaScript/Reference/Operators/void
void getItem(id) void getItem(id)
} }
export default async function Item({ id }: { id: string }) { export default async function Item({ id }: { id: string }) {
@ -234,7 +234,7 @@ import { getItem } from '@/utils/get-item'
export const preload = (id) => { export const preload = (id) => {
// void evaluates the given expression and returns undefined // void evaluates the given expression and returns undefined
// https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/void // https://developer.mozilla.org/docs/Web/JavaScript/Reference/Operators/void
void getItem(id) void getItem(id)
} }
export default async function Item({ id }) { export default async function Item({ id }) {

View file

@ -13,7 +13,7 @@ Forms enable you to create and update data in web applications. Next.js provides
> **Good to know:** > **Good to know:**
> >
> - We will soon recommend [incrementally adopting](/docs/app/building-your-application/upgrading/app-router-migration) the App Router and using [Server Actions](/docs/app/building-your-application/data-fetching/forms-and-mutations#how-server-actions-work) for handling form submissions and data mutations. Server Actions allow you to define asynchronous server functions that can be called directly from your components, without needing to manually create an API Route. > - We will soon recommend [incrementally adopting](/docs/app/building-your-application/upgrading/app-router-migration) the App Router and using [Server Actions](/docs/app/building-your-application/data-fetching/forms-and-mutations#how-server-actions-work) for handling form submissions and data mutations. Server Actions allow you to define asynchronous server functions that can be called directly from your components, without needing to manually create an API Route.
> - API Routes [do not specify CORS headers](https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS), meaning they are same-origin only by default. > - API Routes [do not specify CORS headers](https://developer.mozilla.org/docs/Web/HTTP/CORS), meaning they are same-origin only by default.
> - Since API Routes run on the server, we're able to use sensitive values (like API keys) through [Environment Variables](/docs/pages/building-your-application/configuring/environment-variables) without exposing them to the client. This is critical for the security of your application. > - Since API Routes run on the server, we're able to use sensitive values (like API keys) through [Environment Variables](/docs/pages/building-your-application/configuring/environment-variables) without exposing them to the client. This is critical for the security of your application.
</PagesOnly> </PagesOnly>
@ -170,7 +170,7 @@ export default function Page() {
} }
``` ```
> **Good to know**: `<form action={create}>` takes the [FormData](https://developer.mozilla.org/en-US/docs/Web/API/FormData/FormData) data type. In the example above, the FormData submitted via the HTML [`form`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/form) is accessible in the server action `create`. > **Good to know**: `<form action={create}>` takes the [FormData](https://developer.mozilla.org/docs/Web/API/FormData/FormData) data type. In the example above, the FormData submitted via the HTML [`form`](https://developer.mozilla.org/docs/Web/HTML/Element/form) is accessible in the server action `create`.
### Revalidating Data ### Revalidating Data
@ -485,7 +485,7 @@ export default function Page() {
<AppOnly> <AppOnly>
Server Actions can also return [serializable objects](https://developer.mozilla.org/en-US/docs/Glossary/Serialization). For example, your Server Action might handle errors from creating a new item, returning either a success or error message: Server Actions can also return [serializable objects](https://developer.mozilla.org/docs/Glossary/Serialization). For example, your Server Action might handle errors from creating a new item, returning either a success or error message:
```ts filename="app/actions.ts" switcher ```ts filename="app/actions.ts" switcher
'use server' 'use server'

View file

@ -64,7 +64,7 @@ There are three subsets of server rendering: Static, Dynamic, and Streaming.
{/* Static Rendering Diagram */} {/* Static Rendering Diagram */}
With Static Rendering, routes are rendered at **build time**, or in the background after [data revalidation](/docs/app/building-your-application/data-fetching/fetching-caching-and-revalidating#revalidating-data). The result is cached and can be pushed to a [Content Delivery Network (CDN)](https://developer.mozilla.org/en-US/docs/Glossary/CDN). This optimization allows you to share the result of the rendering work between users and server requests. With Static Rendering, routes are rendered at **build time**, or in the background after [data revalidation](/docs/app/building-your-application/data-fetching/fetching-caching-and-revalidating#revalidating-data). The result is cached and can be pushed to a [Content Delivery Network (CDN)](https://developer.mozilla.org/docs/Glossary/CDN). This optimization allows you to share the result of the rendering work between users and server requests.
Static rendering is useful when a route has data that is not personalized to the user and can be known at build time, such as a static blog post or a product page. Static rendering is useful when a route has data that is not personalized to the user and can be known at build time, such as a static blog post or a product page.

View file

@ -12,7 +12,7 @@ This page will go through how Client Components work, how they're rendered, and
There are a couple of benefits to doing the rendering work on the client, including: There are a couple of benefits to doing the rendering work on the client, including:
- **Interactivity**: Client Components can use state, effects, and event listeners, meaning they can provide immediate feedback to the user and update the UI. - **Interactivity**: Client Components can use state, effects, and event listeners, meaning they can provide immediate feedback to the user and update the UI.
- **Browser APIs**: Client Components have access to browser APIs, like [geolocation](https://developer.mozilla.org/en-US/docs/Web/API/Geolocation_API) or [localStorage](https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage), allowing you to build UI for specific use cases. - **Browser APIs**: Client Components have access to browser APIs, like [geolocation](https://developer.mozilla.org/docs/Web/API/Geolocation_API) or [localStorage](https://developer.mozilla.org/docs/Web/API/Window/localStorage), allowing you to build UI for specific use cases.
## Using Client Components in Next.js ## Using Client Components in Next.js

View file

@ -398,7 +398,7 @@ export default function Layout({ children }) {
### Passing props from Server to Client Components (Serialization) ### Passing props from Server to Client Components (Serialization)
If you fetch data in a Server Component, you may want to pass data down as props to Client Components. Props passed from the Server to Client Components need to be [serializable](https://developer.mozilla.org/en-US/docs/Glossary/Serialization) by React. If you fetch data in a Server Component, you may want to pass data down as props to Client Components. Props passed from the Server to Client Components need to be [serializable](https://developer.mozilla.org/docs/Glossary/Serialization) by React.
If your Client Components depend on data that is not serializable, you can [fetch data on the client with a third party library](/docs/app/building-your-application/data-fetching/fetching-caching-and-revalidating#fetching-data-on-the-client-with-third-party-libraries) or on the server via a [Route Handler](/docs/app/building-your-application/routing/route-handlers). If your Client Components depend on data that is not serializable, you can [fetch data on the client with a third party library](/docs/app/building-your-application/data-fetching/fetching-caching-and-revalidating#fetching-data-on-the-client-with-third-party-libraries) or on the server via a [Route Handler](/docs/app/building-your-application/routing/route-handlers).

View file

@ -39,7 +39,7 @@ Understanding these differences is key to effectively using React and Next.js. W
Broadly speaking, all websites follow the same **Request-Response Lifecycle**: Broadly speaking, all websites follow the same **Request-Response Lifecycle**:
1. **User Action:** The user interacts with a web application. This could be clicking a link, submitting a form, or typing a URL directly into the browser's address bar. 1. **User Action:** The user interacts with a web application. This could be clicking a link, submitting a form, or typing a URL directly into the browser's address bar.
2. **HTTP Request:** The client sends an [HTTP](https://developer.mozilla.org/en-US/docs/Web/HTTP) request to the server that contains necessary information about what resources are being requested, what method is being used (e.g. `GET`, `POST`), and additional data if necessary. 2. **HTTP Request:** The client sends an [HTTP](https://developer.mozilla.org/docs/Web/HTTP) request to the server that contains necessary information about what resources are being requested, what method is being used (e.g. `GET`, `POST`), and additional data if necessary.
3. **Server:** The server processes the request and responds with the appropriate resources. This process may take a couple of steps like routing, fetching data, etc. 3. **Server:** The server processes the request and responds with the appropriate resources. This process may take a couple of steps like routing, fetching data, etc.
4. **HTTP Response:** After processing the request, the server sends an HTTP response back to the client. This response contains a status code (which tells the client whether the request was successful or not) and requested resources (e.g. HTML, CSS, JavaScript, static assets, etc). 4. **HTTP Response:** After processing the request, the server sends an HTTP response back to the client. This response contains a status code (which tells the client whether the request was successful or not) and requested resources (e.g. HTML, CSS, JavaScript, static assets, etc).
5. **Client:** The client parses the resources to render the user interface. 5. **Client:** The client parses the resources to render the user interface.

View file

@ -165,7 +165,7 @@ body {
``` ```
Create a [`pages/_app.js` file](/docs/pages/building-your-application/routing/custom-app) if not already present. Create a [`pages/_app.js` file](/docs/pages/building-your-application/routing/custom-app) if not already present.
Then, [`import`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import) the `styles.css` file. Then, [`import`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/import) the `styles.css` file.
```jsx filename="pages/_app.js" ```jsx filename="pages/_app.js"
import '../styles.css' import '../styles.css'
@ -241,7 +241,7 @@ export default function RootLayout({ children }) {
<PagesOnly> <PagesOnly>
Next.js allows you to import CSS files from a JavaScript file. Next.js allows you to import CSS files from a JavaScript file.
This is possible because Next.js extends the concept of [`import`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import) beyond JavaScript. This is possible because Next.js extends the concept of [`import`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/import) beyond JavaScript.
### Import styles from `node_modules` ### Import styles from `node_modules`

View file

@ -143,7 +143,7 @@ To protect your application from malicious users, you must define a list of remo
Note that in the [example earlier](#local-images), a partial URL (`"/me.png"`) is provided for a local image. This is possible because of the loader architecture. Note that in the [example earlier](#local-images), a partial URL (`"/me.png"`) is provided for a local image. This is possible because of the loader architecture.
A loader is a function that generates the URLs for your image. It modifies the provided `src`, and generates multiple URLs to request the image at different sizes. These multiple URLs are used in the automatic [srcset](https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/srcset) generation, so that visitors to your site will be served an image that is the right size for their viewport. A loader is a function that generates the URLs for your image. It modifies the provided `src`, and generates multiple URLs to request the image at different sizes. These multiple URLs are used in the automatic [srcset](https://developer.mozilla.org/docs/Web/API/HTMLImageElement/srcset) generation, so that visitors to your site will be served an image that is the right size for their viewport.
The default loader for Next.js applications uses the built-in Image Optimization API, which optimizes images from anywhere on the web, and then serves them directly from the Next.js web server. If you would like to serve your images directly from a CDN or image server, you can write your own loader function with a few lines of JavaScript. The default loader for Next.js applications uses the built-in Image Optimization API, which optimizes images from anywhere on the web, and then serves them directly from the Next.js web server. If you would like to serve your images directly from a CDN or image server, you can write your own loader function with a few lines of JavaScript.
@ -212,7 +212,7 @@ Because `next/image` is designed to guarantee good performance results, it canno
> >
> **Use `fill`** > **Use `fill`**
> >
> The [`fill`](/docs/app/api-reference/components/image#fill) prop allows your image to be sized by its parent element. Consider using CSS to give the image's parent element space on the page along [`sizes`](/docs/app/api-reference/components/image#sizes) prop to match any media query break points. You can also use [`object-fit`](https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit) with `fill`, `contain`, or `cover`, and [`object-position`](https://developer.mozilla.org/en-US/docs/Web/CSS/object-position) to define how the image should occupy that space. > The [`fill`](/docs/app/api-reference/components/image#fill) prop allows your image to be sized by its parent element. Consider using CSS to give the image's parent element space on the page along [`sizes`](/docs/app/api-reference/components/image#sizes) prop to match any media query break points. You can also use [`object-fit`](https://developer.mozilla.org/docs/Web/CSS/object-fit) with `fill`, `contain`, or `cover`, and [`object-position`](https://developer.mozilla.org/docs/Web/CSS/object-position) to define how the image should occupy that space.
> >
> **Normalize your images** > **Normalize your images**
> >

View file

@ -296,7 +296,7 @@ Refer to the [`next/script`](/docs/pages/api-reference/components/script#onload)
### Additional Attributes ### Additional Attributes
There are many DOM attributes that can be assigned to a `<script>` element that are not used by the Script component, like [`nonce`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/nonce) or [custom data attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/data-*). Including any additional attributes will automatically forward it to the final, optimized `<script>` element that is included in the HTML. There are many DOM attributes that can be assigned to a `<script>` element that are not used by the Script component, like [`nonce`](https://developer.mozilla.org/docs/Web/HTML/Global_attributes/nonce) or [custom data attributes](https://developer.mozilla.org/docs/Web/HTML/Global_attributes/data-*). Including any additional attributes will automatically forward it to the final, optimized `<script>` element that is included in the HTML.
<AppOnly> <AppOnly>

View file

@ -130,8 +130,8 @@ File-based metadata has the higher priority and will override any config-based m
There are two default `meta` tags that are always added even if a route doesn't define metadata: There are two default `meta` tags that are always added even if a route doesn't define metadata:
- The [meta charset tag](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/meta#attr-charset) sets the character encoding for the website. - The [meta charset tag](https://developer.mozilla.org/docs/Web/HTML/Element/meta#attr-charset) sets the character encoding for the website.
- The [meta viewport tag](https://developer.mozilla.org/en-US/docs/Web/HTML/Viewport_meta_tag) sets the viewport width and scale for the website to adjust for different devices. - The [meta viewport tag](https://developer.mozilla.org/docs/Web/HTML/Viewport_meta_tag) sets the viewport width and scale for the website to adjust for different devices.
```html ```html
<meta charset="utf-8" /> <meta charset="utf-8" />

View file

@ -5,7 +5,7 @@ description: Lazy load imported libraries and React Components to improve your a
{/* The content of this doc is shared between the app and pages router. You can use the `<PagesOnly>Content</PagesOnly>` component to add content that is specific to the Pages Router. Any shared content should not be wrapped in a component. */} {/* The content of this doc is shared between the app and pages router. You can use the `<PagesOnly>Content</PagesOnly>` component to add content that is specific to the Pages Router. Any shared content should not be wrapped in a component. */}
[Lazy loading](https://developer.mozilla.org/en-US/docs/Web/Performance/Lazy_loading) in Next.js helps improve the initial loading performance of an application by decreasing the amount of JavaScript needed to render a route. [Lazy loading](https://developer.mozilla.org/docs/Web/Performance/Lazy_loading) in Next.js helps improve the initial loading performance of an application by decreasing the amount of JavaScript needed to render a route.
It allows you to defer loading of **Client Components** and imported libraries, and only include them in the client bundle when they're needed. For example, you might want to defer loading a modal until a user clicks to open it. It allows you to defer loading of **Client Components** and imported libraries, and only include them in the client bundle when they're needed. For example, you might want to defer loading a modal until a user clicks to open it.
@ -14,7 +14,7 @@ There are two ways you can implement lazy loading in Next.js:
1. Using [Dynamic Imports](#nextdynamic) with `next/dynamic` 1. Using [Dynamic Imports](#nextdynamic) with `next/dynamic`
2. Using [`React.lazy()`](https://react.dev/reference/react/lazy) with [Suspense](https://react.dev/reference/react/Suspense) 2. Using [`React.lazy()`](https://react.dev/reference/react/lazy) with [Suspense](https://react.dev/reference/react/Suspense)
By default, Server Components are automatically [code split](https://developer.mozilla.org/en-US/docs/Glossary/Code_splitting), and you can use [streaming](/docs/app/building-your-application/routing/loading-ui-and-streaming) to progressively send pieces of UI from the server to the client. Lazy loading applies to Client Components. By default, Server Components are automatically [code split](https://developer.mozilla.org/docs/Glossary/Code_splitting), and you can use [streaming](/docs/app/building-your-application/routing/loading-ui-and-streaming) to progressively send pieces of UI from the server to the client. Lazy loading applies to Client Components.
## `next/dynamic` ## `next/dynamic`
@ -86,7 +86,7 @@ export default function ServerComponentExample() {
### Loading External Libraries ### Loading External Libraries
External libraries can be loaded on demand using the [`import()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/import) function. This example uses the external library `fuse.js` for fuzzy search. The module is only loaded on the client after the user types in the search input. External libraries can be loaded on demand using the [`import()`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Operators/import) function. This example uses the external library `fuse.js` for fuzzy search. The module is only loaded on the client after the user types in the search input.
```jsx filename="app/page.js" ```jsx filename="app/page.js"
'use client' 'use client'
@ -142,7 +142,7 @@ export default function Page() {
### Importing Named Exports ### Importing Named Exports
To dynamically import a named export, you can return it from the Promise returned by [`import()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/import) function: To dynamically import a named export, you can return it from the Promise returned by [`import()`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Operators/import) function:
```jsx filename="components/hello.js" ```jsx filename="components/hello.js"
'use client' 'use client'
@ -182,7 +182,7 @@ export default function Home() {
## With named exports ## With named exports
To dynamically import a named export, you can return it from the [Promise](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise) returned by [`import()`](https://github.com/tc39/proposal-dynamic-import#example): To dynamically import a named export, you can return it from the [Promise](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Promise) returned by [`import()`](https://github.com/tc39/proposal-dynamic-import#example):
```jsx filename="components/hello.js" ```jsx filename="components/hello.js"
export function Hello() { export function Hello() {

View file

@ -37,8 +37,8 @@ The `metric` object returned to the function consists of a number of properties:
- `id`: Unique identifier for the metric in the context of the current page load - `id`: Unique identifier for the metric in the context of the current page load
- `name`: Metric name - `name`: Metric name
- `startTime`: First recorded timestamp of the performance entry in [milliseconds](https://developer.mozilla.org/en-US/docs/Web/API/DOMHighResTimeStamp) (if applicable) - `startTime`: First recorded timestamp of the performance entry in [milliseconds](https://developer.mozilla.org/docs/Web/API/DOMHighResTimeStamp) (if applicable)
- `value`: Value, or duration in [milliseconds](https://developer.mozilla.org/en-US/docs/Web/API/DOMHighResTimeStamp), of the performance entry - `value`: Value, or duration in [milliseconds](https://developer.mozilla.org/docs/Web/API/DOMHighResTimeStamp), of the performance entry
- `label`: Type of metric (`web-vital` or `custom`) - `label`: Type of metric (`web-vital` or `custom`)
There are two types of metrics that are tracked: There are two types of metrics that are tracked:
@ -53,8 +53,8 @@ There are two types of metrics that are tracked:
[Web Vitals](https://web.dev/vitals/) are a set of useful metrics that aim to capture the user [Web Vitals](https://web.dev/vitals/) are a set of useful metrics that aim to capture the user
experience of a web page. The following web vitals are all included: experience of a web page. The following web vitals are all included:
- [Time to First Byte](https://developer.mozilla.org/en-US/docs/Glossary/Time_to_first_byte) (TTFB) - [Time to First Byte](https://developer.mozilla.org/docs/Glossary/Time_to_first_byte) (TTFB)
- [First Contentful Paint](https://developer.mozilla.org/en-US/docs/Glossary/First_contentful_paint) (FCP) - [First Contentful Paint](https://developer.mozilla.org/docs/Glossary/First_contentful_paint) (FCP)
- [Largest Contentful Paint](https://web.dev/lcp/) (LCP) - [Largest Contentful Paint](https://web.dev/lcp/) (LCP)
- [First Input Delay](https://web.dev/fid/) (FID) - [First Input Delay](https://web.dev/fid/) (FID)
- [Cumulative Layout Shift](https://web.dev/cls/) (CLS) - [Cumulative Layout Shift](https://web.dev/cls/) (CLS)

View file

@ -9,7 +9,7 @@ related:
{/* The content of this doc is shared between the app and pages router. You can use the `<PagesOnly>Content</PagesOnly>` component to add content that is specific to the Pages Router. Any shared content should not be wrapped in a component. */} {/* The content of this doc is shared between the app and pages router. You can use the `<PagesOnly>Content</PagesOnly>` component to add content that is specific to the Pages Router. Any shared content should not be wrapped in a component. */}
[Content Security Policy (CSP)](https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP) is important to guard your Next.js application against various security threats such as cross-site scripting (XSS), clickjacking, and other code injection attacks. [Content Security Policy (CSP)](https://developer.mozilla.org/docs/Web/HTTP/CSP) is important to guard your Next.js application against various security threats such as cross-site scripting (XSS), clickjacking, and other code injection attacks.
By using CSP, developers can specify which origins are permissible for content sources, scripts, stylesheets, images, fonts, objects, media (audio, video), iframes, and more. By using CSP, developers can specify which origins are permissible for content sources, scripts, stylesheets, images, fonts, objects, media (audio, video), iframes, and more.
@ -22,7 +22,7 @@ By using CSP, developers can specify which origins are permissible for content s
## Nonces ## Nonces
A [nonce](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/nonce) is a unique, random string of characters created for a one-time use. It is used in conjunction with CSP to selectively allow certain inline scripts or styles to execute, bypassing strict CSP directives. A [nonce](https://developer.mozilla.org/docs/Web/HTML/Global_attributes/nonce) is a unique, random string of characters created for a one-time use. It is used in conjunction with CSP to selectively allow certain inline scripts or styles to execute, bypassing strict CSP directives.
### Why use a nonce? ### Why use a nonce?

View file

@ -261,7 +261,7 @@ If you need to read dynamic values from the incoming request, you cannot use a s
### Browser APIs ### Browser APIs
Client Components are pre-rendered to HTML during `next build`. Because [Web APIs](https://developer.mozilla.org/en-US/docs/Web/API) like `window`, `localStorage`, and `navigator` are not available on the server, you need to safely access these APIs only when running in the browser. For example: Client Components are pre-rendered to HTML during `next build`. Because [Web APIs](https://developer.mozilla.org/docs/Web/API) like `window`, `localStorage`, and `navigator` are not available on the server, you need to safely access these APIs only when running in the browser. For example:
```jsx ```jsx
'use client'; 'use client';

View file

@ -208,8 +208,8 @@ export default function RootLayout({ children }) {
``` ```
4. Next.js already includes by default the 4. Next.js already includes by default the
[meta charset](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/meta#charset) and [meta charset](https://developer.mozilla.org/docs/Web/HTML/Element/meta#charset) and
[meta viewport](https://developer.mozilla.org/en-US/docs/Web/HTML/Viewport_meta_tag) tags, so you [meta viewport](https://developer.mozilla.org/docs/Web/HTML/Viewport_meta_tag) tags, so you
can safely remove those from your `<head>`: can safely remove those from your `<head>`:
```tsx filename="app/layout.tsx" switcher ```tsx filename="app/layout.tsx" switcher

View file

@ -859,7 +859,7 @@ export default async function PostList() {
API Routes continue to work in the `pages/api` directory without any changes. However, they have been replaced by [Route Handlers](/docs/app/building-your-application/routing/route-handlers) in the `app` directory. API Routes continue to work in the `pages/api` directory without any changes. However, they have been replaced by [Route Handlers](/docs/app/building-your-application/routing/route-handlers) in the `app` directory.
Route Handlers allow you to create custom request handlers for a given route using the Web [Request](https://developer.mozilla.org/en-US/docs/Web/API/Request) and [Response](https://developer.mozilla.org/en-US/docs/Web/API/Response) APIs. Route Handlers allow you to create custom request handlers for a given route using the Web [Request](https://developer.mozilla.org/docs/Web/API/Request) and [Response](https://developer.mozilla.org/docs/Web/API/Response) APIs.
```ts filename="app/api/route.ts" switcher ```ts filename="app/api/route.ts" switcher
export async function GET(request: Request) {} export async function GET(request: Request) {}

View file

@ -59,9 +59,9 @@ Examples:
### `style` ### `style`
The font [`style`](https://developer.mozilla.org/en-US/docs/Web/CSS/font-style) with the following possibilities: The font [`style`](https://developer.mozilla.org/docs/Web/CSS/font-style) with the following possibilities:
- A string [value](https://developer.mozilla.org/en-US/docs/Web/CSS/font-style#values) with default value of `'normal'` - A string [value](https://developer.mozilla.org/docs/Web/CSS/font-style#values) with default value of `'normal'`
- An array of style values if the font is not a [variable google font](https://fonts.google.com/variablefonts). It applies to `next/font/google` only. - An array of style values if the font is not a [variable google font](https://fonts.google.com/variablefonts). It applies to `next/font/google` only.
Used in `next/font/google` and `next/font/local` Used in `next/font/google` and `next/font/local`
@ -71,7 +71,7 @@ Used in `next/font/google` and `next/font/local`
Examples: Examples:
- `style: 'italic'`: A string - it can be `normal` or `italic` for `next/font/google` - `style: 'italic'`: A string - it can be `normal` or `italic` for `next/font/google`
- `style: 'oblique'`: A string - it can take any value for `next/font/local` but is expected to come from [standard font styles](https://developer.mozilla.org/en-US/docs/Web/CSS/font-style) - `style: 'oblique'`: A string - it can take any value for `next/font/local` but is expected to come from [standard font styles](https://developer.mozilla.org/docs/Web/CSS/font-style)
- `style: ['italic','normal']`: An array of 2 values for `next/font/google` - the values are from `normal` and `italic` - `style: ['italic','normal']`: An array of 2 values for `next/font/google` - the values are from `normal` and `italic`
### `subsets` ### `subsets`
@ -102,7 +102,7 @@ Examples:
### `display` ### `display`
The font [`display`](https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display) with possible string [values](https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display#values) of `'auto'`, `'block'`, `'swap'`, `'fallback'` or `'optional'` with default value of `'swap'`. The font [`display`](https://developer.mozilla.org/docs/Web/CSS/@font-face/font-display) with possible string [values](https://developer.mozilla.org/docs/Web/CSS/@font-face/font-display#values) of `'auto'`, `'block'`, `'swap'`, `'fallback'` or `'optional'` with default value of `'swap'`.
Used in `next/font/google` and `next/font/local` Used in `next/font/google` and `next/font/local`
@ -164,7 +164,7 @@ Examples:
### `declarations` ### `declarations`
An array of font face [descriptor](https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face#descriptors) key-value pairs that define the generated `@font-face` further. An array of font face [descriptor](https://developer.mozilla.org/docs/Web/CSS/@font-face#descriptors) key-value pairs that define the generated `@font-face` further.
Used in `next/font/local` Used in `next/font/local`

View file

@ -176,9 +176,9 @@ Alternatively, `object-fit: "cover"` will cause the image to fill the entire con
For more information, see also: For more information, see also:
- [`position`](https://developer.mozilla.org/en-US/docs/Web/CSS/position) - [`position`](https://developer.mozilla.org/docs/Web/CSS/position)
- [`object-fit`](https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit) - [`object-fit`](https://developer.mozilla.org/docs/Web/CSS/object-fit)
- [`object-position`](https://developer.mozilla.org/en-US/docs/Web/CSS/object-position) - [`object-position`](https://developer.mozilla.org/docs/Web/CSS/object-position)
### `sizes` ### `sizes`
@ -212,7 +212,7 @@ This example `sizes` could have a dramatic effect on performance metrics. Withou
Learn more about `srcset` and `sizes`: Learn more about `srcset` and `sizes`:
- [web.dev](https://web.dev/learn/design/responsive-images/#sizes) - [web.dev](https://web.dev/learn/design/responsive-images/#sizes)
- [mdn](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#attr-sizes) - [mdn](https://developer.mozilla.org/docs/Web/HTML/Element/img#attr-sizes)
### `quality` ### `quality`
@ -247,7 +247,7 @@ When `blur`, the [`blurDataURL`](#blurdataurl) property will be used as the plac
For dynamic images, you must provide the [`blurDataURL`](#blurdataurl) property. Solutions such as [Plaiceholder](https://github.com/joe-bell/plaiceholder) can help with `base64` generation. For dynamic images, you must provide the [`blurDataURL`](#blurdataurl) property. Solutions such as [Plaiceholder](https://github.com/joe-bell/plaiceholder) can help with `base64` generation.
When `data:image/...`, the [Data URL](https://developer.mozilla.org/en-US/docs/Web/HTTP/Basics_of_HTTP/Data_URIs) will be used as the placeholder while the image is loading. When `data:image/...`, the [Data URL](https://developer.mozilla.org/docs/Web/HTTP/Basics_of_HTTP/Data_URIs) will be used as the placeholder while the image is loading.
When `empty`, there will be no placeholder while the image is loading, only empty space. When `empty`, there will be no placeholder while the image is loading, only empty space.
@ -341,11 +341,11 @@ the viewport.
When `eager`, load the image immediately. When `eager`, load the image immediately.
Learn more about the [`loading` attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#attr-loading). Learn more about the [`loading` attribute](https://developer.mozilla.org/docs/Web/HTML/Element/img#attr-loading).
### `blurDataURL` ### `blurDataURL`
A [Data URL](https://developer.mozilla.org/en-US/docs/Web/HTTP/Basics_of_HTTP/Data_URIs) to A [Data URL](https://developer.mozilla.org/docs/Web/HTTP/Basics_of_HTTP/Data_URIs) to
be used as a placeholder image before the `src` image successfully loads. Only takes effect when combined be used as a placeholder image before the `src` image successfully loads. Only takes effect when combined
with [`placeholder="blur"`](#placeholder). with [`placeholder="blur"`](#placeholder).
@ -516,7 +516,7 @@ module.exports = {
### `imageSizes` ### `imageSizes`
You can specify a list of image widths using the `images.imageSizes` property in your `next.config.js` file. These widths are concatenated with the array of [device sizes](#devicesizes) to form the full array of sizes used to generate image [srcset](https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/srcset)s. You can specify a list of image widths using the `images.imageSizes` property in your `next.config.js` file. These widths are concatenated with the array of [device sizes](#devicesizes) to form the full array of sizes used to generate image [srcset](https://developer.mozilla.org/docs/Web/API/HTMLImageElement/srcset)s.
The reason there are two separate lists is that imageSizes is only used for images which provide a [`sizes`](#sizes) prop, which indicates that the image is less than the full width of the screen. **Therefore, the sizes in imageSizes should all be smaller than the smallest size in deviceSizes.** The reason there are two separate lists is that imageSizes is only used for images which provide a [`sizes`](#sizes) prop, which indicates that the image is less than the full width of the screen. **Therefore, the sizes in imageSizes should all be smaller than the smallest size in deviceSizes.**
@ -782,7 +782,7 @@ const ThemeImage = (props) => {
} }
``` ```
> **Good to know**: The default behavior of `loading="lazy"` ensures that only the correct image is loaded. You cannot use `priority` or `loading="eager"` because that would cause both images to load. Instead, you can use [`fetchPriority="high"`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/fetchPriority). > **Good to know**: The default behavior of `loading="lazy"` ensures that only the correct image is loaded. You cannot use `priority` or `loading="eager"` because that would cause both images to load. Instead, you can use [`fetchPriority="high"`](https://developer.mozilla.org/docs/Web/API/HTMLImageElement/fetchPriority).
Try it out: Try it out:

View file

@ -106,7 +106,7 @@ The path or URL to navigate to.
### `replace` ### `replace`
**Defaults to `false`.** When `true`, `next/link` will replace the current history state instead of adding a new URL into the [browsers history](https://developer.mozilla.org/en-US/docs/Web/API/History_API) stack. **Defaults to `false`.** When `true`, `next/link` will replace the current history state instead of adding a new URL into the [browsers history](https://developer.mozilla.org/docs/Web/API/History_API) stack.
```tsx filename="app/page.tsx" switcher ```tsx filename="app/page.tsx" switcher
import Link from 'next/link' import Link from 'next/link'
@ -198,7 +198,7 @@ export default function Page() {
An `<a>` element is no longer required as a child of `<Link>`. Add the `legacyBehavior` prop to use the legacy behavior or remove the `<a>` to upgrade. A [codemod is available](/docs/app/building-your-application/upgrading/codemods#new-link) to automatically upgrade your code. An `<a>` element is no longer required as a child of `<Link>`. Add the `legacyBehavior` prop to use the legacy behavior or remove the `<a>` to upgrade. A [codemod is available](/docs/app/building-your-application/upgrading/codemods#new-link) to automatically upgrade your code.
> **Good to know**: when `legacyBehavior` is not set to `true`, all [`anchor`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a) tag properties can be passed to `next/link` as well such as, `className`, `onClick`, etc. > **Good to know**: when `legacyBehavior` is not set to `true`, all [`anchor`](https://developer.mozilla.org/docs/Web/HTML/Element/a) tag properties can be passed to `next/link` as well such as, `className`, `onClick`, etc.
### `passHref` ### `passHref`

View file

@ -213,10 +213,10 @@ The default export function should return a `Blob` | `ArrayBuffer` | `TypedArray
You can optionally configure the icon's metadata by exporting `size` and `contentType` variables from the `icon` or `apple-icon` route. You can optionally configure the icon's metadata by exporting `size` and `contentType` variables from the `icon` or `apple-icon` route.
| Option | Type | | Option | Type |
| ----------------------------- | --------------------------------------------------------------------------------------------------------------------- | | ----------------------------- | --------------------------------------------------------------------------------------------------------------- |
| [`size`](#size) | `{ width: number; height: number }` | | [`size`](#size) | `{ width: number; height: number }` |
| [`contentType`](#contenttype) | `string` - [image MIME type](https://developer.mozilla.org/en-US/docs/Web/HTTP/Basics_of_HTTP/MIME_types#image_types) | | [`contentType`](#contenttype) | `string` - [image MIME type](https://developer.mozilla.org/docs/Web/HTTP/Basics_of_HTTP/MIME_types#image_types) |
#### `size` #### `size`

View file

@ -3,7 +3,7 @@ title: manifest.json
description: API Reference for manifest.json file. description: API Reference for manifest.json file.
--- ---
Add or generate a `manifest.(json|webmanifest)` file that matches the [Web Manifest Specification](https://developer.mozilla.org/en-US/docs/Web/Manifest) in the **root** of `app` directory to provide information about your web application for the browser. Add or generate a `manifest.(json|webmanifest)` file that matches the [Web Manifest Specification](https://developer.mozilla.org/docs/Web/Manifest) in the **root** of `app` directory to provide information about your web application for the browser.
## Static Manifest file ## Static Manifest file
@ -67,4 +67,4 @@ export default function manifest() {
### Manifest Object ### Manifest Object
The manifest object contains an extensive list of options that may be updated due to new web standards. For information on all the current options, refer to the `MetadataRoute.Manifest` type in your code editor if using [TypeScript](https://nextjs.org/docs/app/building-your-application/configuring/typescript#typescript-plugin) or see the [MDN](https://developer.mozilla.org/en-US/docs/Web/Manifest) docs. The manifest object contains an extensive list of options that may be updated due to new web standards. For information on all the current options, refer to the `MetadataRoute.Manifest` type in your code editor if using [TypeScript](https://nextjs.org/docs/app/building-your-application/configuring/typescript#typescript-plugin) or see the [MDN](https://developer.mozilla.org/docs/Web/Manifest) docs.

View file

@ -248,11 +248,11 @@ The default export function should return a `Blob` | `ArrayBuffer` | `TypedArray
You can optionally configure the image's metadata by exporting `alt`, `size`, and `contentType` variables from `opengraph-image` or `twitter-image` route. You can optionally configure the image's metadata by exporting `alt`, `size`, and `contentType` variables from `opengraph-image` or `twitter-image` route.
| Option | Type | | Option | Type |
| ----------------------------- | --------------------------------------------------------------------------------------------------------------------- | | ----------------------------- | --------------------------------------------------------------------------------------------------------------- |
| [`alt`](#alt) | `string` | | [`alt`](#alt) | `string` |
| [`size`](#size) | `{ width: number; height: number }` | | [`size`](#size) | `{ width: number; height: number }` |
| [`contentType`](#contenttype) | `string` - [image MIME type](https://developer.mozilla.org/en-US/docs/Web/HTTP/Basics_of_HTTP/MIME_types#image_types) | | [`contentType`](#contenttype) | `string` - [image MIME type](https://developer.mozilla.org/docs/Web/HTTP/Basics_of_HTTP/MIME_types#image_types) |
#### `alt` #### `alt`

View file

@ -75,7 +75,7 @@ export default function Error({ error, reset }) {
### `error` ### `error`
An instance of an [`Error`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Error) object forwarded to the `error.js` Client Component. An instance of an [`Error`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Error) object forwarded to the `error.js` Client Component.
#### `error.message` #### `error.message`

View file

@ -37,7 +37,7 @@ An object containing the [dynamic route parameters](/docs/app/building-your-appl
### `searchParams` (optional) ### `searchParams` (optional)
An object containing the [search parameters](https://developer.mozilla.org/en-US/docs/Learn/Common_questions/What_is_a_URL#parameters) of the current URL. For example: An object containing the [search parameters](https://developer.mozilla.org/docs/Learn/Common_questions/What_is_a_URL#parameters) of the current URL. For example:
| URL | `searchParams` | | URL | `searchParams` |
| --------------- | -------------------- | | --------------- | -------------------- |

View file

@ -3,11 +3,11 @@ title: route.js
description: API reference for the route.js special file. description: API reference for the route.js special file.
--- ---
Route Handlers allow you to create custom request handlers for a given route using the Web [Request](https://developer.mozilla.org/en-US/docs/Web/API/Request) and [Response](https://developer.mozilla.org/en-US/docs/Web/API/Response) APIs. Route Handlers allow you to create custom request handlers for a given route using the Web [Request](https://developer.mozilla.org/docs/Web/API/Request) and [Response](https://developer.mozilla.org/docs/Web/API/Response) APIs.
## HTTP Methods ## HTTP Methods
A **route** file allows you to create custom request handlers for a given route. The following [HTTP methods](https://developer.mozilla.org/en-US/docs/Web/HTTP/Methods) are supported: `GET`, `POST`, `PUT`, `PATCH`, `DELETE`, `HEAD`, and `OPTIONS`. A **route** file allows you to create custom request handlers for a given route. The following [HTTP methods](https://developer.mozilla.org/docs/Web/HTTP/Methods) are supported: `GET`, `POST`, `PUT`, `PATCH`, `DELETE`, `HEAD`, and `OPTIONS`.
```ts filename="route.ts" switcher ```ts filename="route.ts" switcher
export async function GET(request: Request) {} export async function GET(request: Request) {}
@ -49,7 +49,7 @@ export async function OPTIONS(request) {}
### `request` (optional) ### `request` (optional)
The `request` object is a [NextRequest](/docs/app/api-reference/functions/next-request) object, which is an extension of the Web [Request](https://developer.mozilla.org/en-US/docs/Web/API/Request) API. `NextRequest` gives you further control over the incoming request, including easily accessing `cookies` and an extended, parsed, URL object `nextUrl`. The `request` object is a [NextRequest](/docs/app/api-reference/functions/next-request) object, which is an extension of the Web [Request](https://developer.mozilla.org/docs/Web/API/Request) API. `NextRequest` gives you further control over the incoming request, including easily accessing `cookies` and an extended, parsed, URL object `nextUrl`.
### `context` (optional) ### `context` (optional)

View file

@ -3,7 +3,7 @@ title: fetch
description: API reference for the extended fetch function. description: API reference for the extended fetch function.
--- ---
Next.js extends the native [Web `fetch()` API](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API) to allow each request on the server to set its own persistent caching semantics. Next.js extends the native [Web `fetch()` API](https://developer.mozilla.org/docs/Web/API/Fetch_API) to allow each request on the server to set its own persistent caching semantics.
In the browser, the `cache` option indicates how a fetch request will interact with the _browser's_ HTTP cache. With this extension, `cache` indicates how a _server-side_ fetch request will interact with the framework's persistent HTTP cache. In the browser, the `cache` option indicates how a fetch request will interact with the _browser's_ HTTP cache. With this extension, `cache` indicates how a _server-side_ fetch request will interact with the framework's persistent HTTP cache.
@ -53,7 +53,7 @@ export default async function Page() {
## `fetch(url, options)` ## `fetch(url, options)`
Since Next.js extends the [Web `fetch()` API](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API), you can use any of the [native options available](https://developer.mozilla.org/en-US/docs/Web/API/fetch#parameters). Since Next.js extends the [Web `fetch()` API](https://developer.mozilla.org/docs/Web/API/Fetch_API), you can use any of the [native options available](https://developer.mozilla.org/docs/Web/API/fetch#parameters).
### `options.cache` ### `options.cache`

View file

@ -145,7 +145,7 @@ export default function Page({ params, searchParams }) {}
| `app/shop/[tag]/[item]/page.js` | `/shop/1/2` | `{ tag: '1', item: '2' }` | | `app/shop/[tag]/[item]/page.js` | `/shop/1/2` | `{ tag: '1', item: '2' }` |
| `app/shop/[...slug]/page.js` | `/shop/1/2` | `{ slug: ['1', '2'] }` | | `app/shop/[...slug]/page.js` | `/shop/1/2` | `{ slug: ['1', '2'] }` |
- `searchParams` - An object containing the current URL's [search params](https://developer.mozilla.org/en-US/docs/Learn/Common_questions/What_is_a_URL#parameters). Examples: - `searchParams` - An object containing the current URL's [search params](https://developer.mozilla.org/docs/Learn/Common_questions/What_is_a_URL#parameters). Examples:
| URL | `searchParams` | | URL | `searchParams` |
| --------------- | -------------------- | | --------------- | -------------------- |
@ -635,7 +635,7 @@ export const metadata = {
### `themeColor` ### `themeColor`
Learn more about [theme-color](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/meta/name/theme-color). Learn more about [theme-color](https://developer.mozilla.org/docs/Web/HTML/Element/meta/name/theme-color).
**Simple theme color** **Simple theme color**
@ -667,7 +667,7 @@ export const metadata = {
### `manifest` ### `manifest`
A web application manifest, as defined in the [Web Application Manifest specification](https://developer.mozilla.org/en-US/docs/Web/Manifest). A web application manifest, as defined in the [Web Application Manifest specification](https://developer.mozilla.org/docs/Web/Manifest).
```jsx filename="layout.js / page.js" ```jsx filename="layout.js / page.js"
export const metadata = { export const metadata = {
@ -1027,7 +1027,7 @@ export function PreloadResources() {
##### `<link rel="preload">` ##### `<link rel="preload">`
Start loading a resource early in the page rendering (browser) lifecycle. [MDN Docs](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/rel/preload). Start loading a resource early in the page rendering (browser) lifecycle. [MDN Docs](https://developer.mozilla.org/docs/Web/HTML/Attributes/rel/preload).
```tsx ```tsx
ReactDOM.preload(href: string, options: { as: string }) ReactDOM.preload(href: string, options: { as: string })
@ -1039,7 +1039,7 @@ ReactDOM.preload(href: string, options: { as: string })
##### `<link rel="preconnect">` ##### `<link rel="preconnect">`
Preemptively initiate a connection to an origin. [MDN Docs](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/rel/preconnect). Preemptively initiate a connection to an origin. [MDN Docs](https://developer.mozilla.org/docs/Web/HTML/Attributes/rel/preconnect).
```tsx ```tsx
ReactDOM.preconnect(href: string, options?: { crossOrigin?: string }) ReactDOM.preconnect(href: string, options?: { crossOrigin?: string })
@ -1051,7 +1051,7 @@ ReactDOM.preconnect(href: string, options?: { crossOrigin?: string })
##### `<link rel="dns-prefetch">` ##### `<link rel="dns-prefetch">`
Attempt to resolve a domain name before resources get requested. [MDN Docs](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/rel/dns-prefetch). Attempt to resolve a domain name before resources get requested. [MDN Docs](https://developer.mozilla.org/docs/Web/HTML/Attributes/rel/dns-prefetch).
```tsx ```tsx
ReactDOM.prefetchDNS(href: string) ReactDOM.prefetchDNS(href: string)

View file

@ -7,7 +7,7 @@ The `headers` function allows you to read the HTTP incoming request headers from
## `headers()` ## `headers()`
This API extends the [Web Headers API](https://developer.mozilla.org/en-US/docs/Web/API/Headers). It is **read-only**, meaning you cannot `set` / `delete` the outgoing request headers. This API extends the [Web Headers API](https://developer.mozilla.org/docs/Web/API/Headers). It is **read-only**, meaning you cannot `set` / `delete` the outgoing request headers.
```tsx filename="app/page.tsx" switcher ```tsx filename="app/page.tsx" switcher
import { headers } from 'next/headers' import { headers } from 'next/headers'
@ -47,14 +47,14 @@ const headersList = headers()
#### Returns #### Returns
`headers` returns a **read-only** [Web Headers](https://developer.mozilla.org/en-US/docs/Web/API/Headers) object. `headers` returns a **read-only** [Web Headers](https://developer.mozilla.org/docs/Web/API/Headers) object.
- [`Headers.entries()`](https://developer.mozilla.org/en-US/docs/Web/API/Headers/entries): Returns an [`iterator`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Iteration_protocols) allowing to go through all key/value pairs contained in this object. - [`Headers.entries()`](https://developer.mozilla.org/docs/Web/API/Headers/entries): Returns an [`iterator`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Iteration_protocols) allowing to go through all key/value pairs contained in this object.
- [`Headers.forEach()`](https://developer.mozilla.org/en-US/docs/Web/API/Headers/forEach): Executes a provided function once for each key/value pair in this `Headers` object. - [`Headers.forEach()`](https://developer.mozilla.org/docs/Web/API/Headers/forEach): Executes a provided function once for each key/value pair in this `Headers` object.
- [`Headers.get()`](https://developer.mozilla.org/en-US/docs/Web/API/Headers/get): Returns a [`String`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String) sequence of all the values of a header within a `Headers` object with a given name. - [`Headers.get()`](https://developer.mozilla.org/docs/Web/API/Headers/get): Returns a [`String`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String) sequence of all the values of a header within a `Headers` object with a given name.
- [`Headers.has()`](https://developer.mozilla.org/en-US/docs/Web/API/Headers/has): Returns a boolean stating whether a `Headers` object contains a certain header. - [`Headers.has()`](https://developer.mozilla.org/docs/Web/API/Headers/has): Returns a boolean stating whether a `Headers` object contains a certain header.
- [`Headers.keys()`](https://developer.mozilla.org/en-US/docs/Web/API/Headers/keys): Returns an [`iterator`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Iteration_protocols) allowing you to go through all keys of the key/value pairs contained in this object. - [`Headers.keys()`](https://developer.mozilla.org/docs/Web/API/Headers/keys): Returns an [`iterator`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Iteration_protocols) allowing you to go through all keys of the key/value pairs contained in this object.
- [`Headers.values()`](https://developer.mozilla.org/en-US/docs/Web/API/Headers/values): Returns an [`iterator`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Iteration_protocols) allowing you to go through all values of the key/value pairs contained in this object. - [`Headers.values()`](https://developer.mozilla.org/docs/Web/API/Headers/values): Returns an [`iterator`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Iteration_protocols) allowing you to go through all values of the key/value pairs contained in this object.
### Examples ### Examples

View file

@ -3,11 +3,11 @@ title: NextRequest
description: API Reference for NextRequest. description: API Reference for NextRequest.
--- ---
NextRequest extends the [Web Request API](https://developer.mozilla.org/en-US/docs/Web/API/Request) with additional convenience methods. NextRequest extends the [Web Request API](https://developer.mozilla.org/docs/Web/API/Request) with additional convenience methods.
## `cookies` ## `cookies`
Read or mutate the [`Set-Cookie`](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Set-Cookie) header of the request. Read or mutate the [`Set-Cookie`](https://developer.mozilla.org/docs/Web/HTTP/Headers/Set-Cookie) header of the request.
### `set(name, value)` ### `set(name, value)`
@ -73,7 +73,7 @@ request.cookies.clear()
## `nextUrl` ## `nextUrl`
Extends the native [`URL`](https://developer.mozilla.org/en-US/docs/Web/API/URL) API with additional convenience methods, including Next.js specific properties. Extends the native [`URL`](https://developer.mozilla.org/docs/Web/API/URL) API with additional convenience methods, including Next.js specific properties.
```ts ```ts
// Given a request to /home, pathname is /home // Given a request to /home, pathname is /home

View file

@ -3,11 +3,11 @@ title: NextResponse
description: API Reference for NextResponse. description: API Reference for NextResponse.
--- ---
NextResponse extends the [Web Response API](https://developer.mozilla.org/en-US/docs/Web/API/Response) with additional convenience methods. NextResponse extends the [Web Response API](https://developer.mozilla.org/docs/Web/API/Response) with additional convenience methods.
## `cookies` ## `cookies`
Read or mutate the [`Set-Cookie`](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Set-Cookie) header of the response. Read or mutate the [`Set-Cookie`](https://developer.mozilla.org/docs/Web/HTTP/Headers/Set-Cookie) header of the response.
### `set(name, value)` ### `set(name, value)`
@ -82,7 +82,7 @@ export async function GET(request) {
## `redirect()` ## `redirect()`
Produce a response that redirects to a [URL](https://developer.mozilla.org/en-US/docs/Web/API/URL). Produce a response that redirects to a [URL](https://developer.mozilla.org/docs/Web/API/URL).
```ts ```ts
import { NextResponse } from 'next/server' import { NextResponse } from 'next/server'
@ -90,7 +90,7 @@ import { NextResponse } from 'next/server'
return NextResponse.redirect(new URL('/new', request.url)) return NextResponse.redirect(new URL('/new', request.url))
``` ```
The [URL](https://developer.mozilla.org/en-US/docs/Web/API/URL) can be created and modified before being used in the `NextResponse.redirect()` method. For example, you can use the `request.nextUrl` property to get the current URL, and then modify it to redirect to a different URL. The [URL](https://developer.mozilla.org/docs/Web/API/URL) can be created and modified before being used in the `NextResponse.redirect()` method. For example, you can use the `request.nextUrl` property to get the current URL, and then modify it to redirect to a different URL.
```ts ```ts
import { NextResponse } from 'next/server' import { NextResponse } from 'next/server'
@ -105,7 +105,7 @@ return NextResponse.redirect(loginUrl)
## `rewrite()` ## `rewrite()`
Produce a response that rewrites (proxies) the given [URL](https://developer.mozilla.org/en-US/docs/Web/API/URL) while preserving the original URL. Produce a response that rewrites (proxies) the given [URL](https://developer.mozilla.org/docs/Web/API/URL) while preserving the original URL.
```ts ```ts
import { NextResponse } from 'next/server' import { NextResponse } from 'next/server'

View file

@ -34,7 +34,7 @@ Server Actions can be defined in two places:
Create a Server Action by defining an asynchronous function with the [`"use server"`](https://react.dev/reference/react/use-server) directive at the top of the function body. `"use server"` ensures this function is only ever executed on the server. Create a Server Action by defining an asynchronous function with the [`"use server"`](https://react.dev/reference/react/use-server) directive at the top of the function body. `"use server"` ensures this function is only ever executed on the server.
This function should have [serializable arguments](https://developer.mozilla.org/en-US/docs/Glossary/Serialization) and a [serializable return value](https://developer.mozilla.org/en-US/docs/Glossary/Serialization). This function should have [serializable arguments](https://developer.mozilla.org/docs/Glossary/Serialization) and a [serializable return value](https://developer.mozilla.org/docs/Glossary/Serialization).
```jsx filename="app/page.js" highlight={2} ```jsx filename="app/page.js" highlight={2}
export default function ServerComponent() { export default function ServerComponent() {

View file

@ -63,18 +63,18 @@ The `metric` object passed as the hook's argument consists of a number of proper
- `id`: Unique identifier for the metric in the context of the current page load - `id`: Unique identifier for the metric in the context of the current page load
- `name`: The name of the performance metric. Possible values include names of [Web Vitals](#web-vitals) metrics (TTFB, FCP, LCP, FID, CLS) specific to a web application. - `name`: The name of the performance metric. Possible values include names of [Web Vitals](#web-vitals) metrics (TTFB, FCP, LCP, FID, CLS) specific to a web application.
- `delta`: The difference between the current value and the previous value of the metric. The value is typically in milliseconds and represents the change in the metric's value over time. - `delta`: The difference between the current value and the previous value of the metric. The value is typically in milliseconds and represents the change in the metric's value over time.
- `entries`: An array of [Performance Entries](https://developer.mozilla.org/en-US/docs/Web/API/PerformanceEntry) associated with the metric. These entries provide detailed information about the performance events related to the metric. - `entries`: An array of [Performance Entries](https://developer.mozilla.org/docs/Web/API/PerformanceEntry) associated with the metric. These entries provide detailed information about the performance events related to the metric.
- `navigationType`: Indicates the [type of navigation](https://developer.mozilla.org/en-US/docs/Web/API/PerformanceNavigationTiming/type) that triggered the metric collection. Possible values include `"navigate"`, `"reload"`, `"back_forward"`, and `"prerender"`. - `navigationType`: Indicates the [type of navigation](https://developer.mozilla.org/docs/Web/API/PerformanceNavigationTiming/type) that triggered the metric collection. Possible values include `"navigate"`, `"reload"`, `"back_forward"`, and `"prerender"`.
- `rating`: A qualitative rating of the metric value, providing an assessment of the performance. Possible values are `"good"`, `"needs-improvement"`, and `"poor"`. The rating is typically determined by comparing the metric value against predefined thresholds that indicate acceptable or suboptimal performance. - `rating`: A qualitative rating of the metric value, providing an assessment of the performance. Possible values are `"good"`, `"needs-improvement"`, and `"poor"`. The rating is typically determined by comparing the metric value against predefined thresholds that indicate acceptable or suboptimal performance.
- `value`: The actual value or duration of the performance entry, typically in milliseconds. The value provides a quantitative measure of the performance aspect being tracked by the metric. The source of the value depends on the specific metric being measured and can come from various [Performance API](https://developer.mozilla.org/en-US/docs/Web/API/Performance_API)s. - `value`: The actual value or duration of the performance entry, typically in milliseconds. The value provides a quantitative measure of the performance aspect being tracked by the metric. The source of the value depends on the specific metric being measured and can come from various [Performance API](https://developer.mozilla.org/docs/Web/API/Performance_API)s.
## Web Vitals ## Web Vitals
[Web Vitals](https://web.dev/vitals/) are a set of useful metrics that aim to capture the user [Web Vitals](https://web.dev/vitals/) are a set of useful metrics that aim to capture the user
experience of a web page. The following web vitals are all included: experience of a web page. The following web vitals are all included:
- [Time to First Byte](https://developer.mozilla.org/en-US/docs/Glossary/Time_to_first_byte) (TTFB) - [Time to First Byte](https://developer.mozilla.org/docs/Glossary/Time_to_first_byte) (TTFB)
- [First Contentful Paint](https://developer.mozilla.org/en-US/docs/Glossary/First_contentful_paint) (FCP) - [First Contentful Paint](https://developer.mozilla.org/docs/Glossary/First_contentful_paint) (FCP)
- [Largest Contentful Paint](https://web.dev/lcp/) (LCP) - [Largest Contentful Paint](https://web.dev/lcp/) (LCP)
- [First Input Delay](https://web.dev/fid/) (FID) - [First Input Delay](https://web.dev/fid/) (FID)
- [Cumulative Layout Shift](https://web.dev/cls/) (CLS) - [Cumulative Layout Shift](https://web.dev/cls/) (CLS)

View file

@ -41,8 +41,8 @@ export default function Page() {
## `useRouter()` ## `useRouter()`
- `router.push(href: string, { scroll: boolean })`: Perform a client-side navigation to the provided route. Adds a new entry into the [browsers history](https://developer.mozilla.org/en-US/docs/Web/API/History_API) stack. - `router.push(href: string, { scroll: boolean })`: Perform a client-side navigation to the provided route. Adds a new entry into the [browsers history](https://developer.mozilla.org/docs/Web/API/History_API) stack.
- `router.replace(href: string, { scroll: boolean })`: Perform a client-side navigation to the provided route without adding a new entry into the [browsers history stack](https://developer.mozilla.org/en-US/docs/Web/API/History_API). - `router.replace(href: string, { scroll: boolean })`: Perform a client-side navigation to the provided route without adding a new entry into the [browsers history stack](https://developer.mozilla.org/docs/Web/API/History_API).
- `router.refresh()`: Refresh the current route. Making a new request to the server, re-fetching data requests, and re-rendering Server Components. The client will merge the updated React Server Component payload without losing unaffected client-side React (e.g. `useState`) or browser state (e.g. scroll position). - `router.refresh()`: Refresh the current route. Making a new request to the server, re-fetching data requests, and re-rendering Server Components. The client will merge the updated React Server Component payload without losing unaffected client-side React (e.g. `useState`) or browser state (e.g. scroll position).
- `router.prefetch(href: string)`: [Prefetch](/docs/app/building-your-application/routing/linking-and-navigating#1-prefetching) the provided route for faster client-side transitions. - `router.prefetch(href: string)`: [Prefetch](/docs/app/building-your-application/routing/linking-and-navigating#1-prefetching) the provided route for faster client-side transitions.
- `router.back()`: Navigate back to the previous route in the browsers history stack. - `router.back()`: Navigate back to the previous route in the browsers history stack.

View file

@ -5,7 +5,7 @@ description: API Reference for the useSearchParams hook.
`useSearchParams` is a **Client Component** hook that lets you read the current URL's **query string**. `useSearchParams` is a **Client Component** hook that lets you read the current URL's **query string**.
`useSearchParams` returns a **read-only** version of the [`URLSearchParams`](https://developer.mozilla.org/en-US/docs/Web/API/URLSearchParams) interface. `useSearchParams` returns a **read-only** version of the [`URLSearchParams`](https://developer.mozilla.org/docs/Web/API/URLSearchParams) interface.
```tsx filename="app/dashboard/search-bar.tsx" switcher ```tsx filename="app/dashboard/search-bar.tsx" switcher
'use client' 'use client'
@ -49,25 +49,25 @@ const searchParams = useSearchParams()
## Returns ## Returns
`useSearchParams` returns a **read-only** version of the [`URLSearchParams`](https://developer.mozilla.org/en-US/docs/Web/API/URLSearchParams) interface, which includes utility methods for reading the URL's query string: `useSearchParams` returns a **read-only** version of the [`URLSearchParams`](https://developer.mozilla.org/docs/Web/API/URLSearchParams) interface, which includes utility methods for reading the URL's query string:
- [`URLSearchParams.get()`](https://developer.mozilla.org/en-US/docs/Web/API/URLSearchParams/get): Returns the first value associated with the search parameter. For example: - [`URLSearchParams.get()`](https://developer.mozilla.org/docs/Web/API/URLSearchParams/get): Returns the first value associated with the search parameter. For example:
| URL | `searchParams.get("a")` | | URL | `searchParams.get("a")` |
| -------------------- | --------------------------------------------------------------------------------------------------------------------- | | -------------------- | --------------------------------------------------------------------------------------------------------------- |
| `/dashboard?a=1` | `'1'` | | `/dashboard?a=1` | `'1'` |
| `/dashboard?a=` | `''` | | `/dashboard?a=` | `''` |
| `/dashboard?b=3` | `null` | | `/dashboard?b=3` | `null` |
| `/dashboard?a=1&a=2` | `'1'` _- use [`getAll()`](https://developer.mozilla.org/en-US/docs/Web/API/URLSearchParams/getAll) to get all values_ | | `/dashboard?a=1&a=2` | `'1'` _- use [`getAll()`](https://developer.mozilla.org/docs/Web/API/URLSearchParams/getAll) to get all values_ |
- [`URLSearchParams.has()`](https://developer.mozilla.org/en-US/docs/Web/API/URLSearchParams/has): Returns a boolean value indicating if the given parameter exists. For example: - [`URLSearchParams.has()`](https://developer.mozilla.org/docs/Web/API/URLSearchParams/has): Returns a boolean value indicating if the given parameter exists. For example:
| URL | `searchParams.has("a")` | | URL | `searchParams.has("a")` |
| ---------------- | ----------------------- | | ---------------- | ----------------------- |
| `/dashboard?a=1` | `true` | | `/dashboard?a=1` | `true` |
| `/dashboard?b=3` | `false` | | `/dashboard?b=3` | `false` |
- Learn more about other **read-only** methods of [`URLSearchParams`](https://developer.mozilla.org/en-US/docs/Web/API/URLSearchParams), including the [`getAll()`](https://developer.mozilla.org/en-US/docs/Web/API/URLSearchParams/getAll), [`keys()`](https://developer.mozilla.org/en-US/docs/Web/API/URLSearchParams/keys), [`values()`](https://developer.mozilla.org/en-US/docs/Web/API/URLSearchParams/values), [`entries()`](https://developer.mozilla.org/en-US/docs/Web/API/URLSearchParams/entries), [`forEach()`](https://developer.mozilla.org/en-US/docs/Web/API/URLSearchParams/forEach), and [`toString()`](https://developer.mozilla.org/en-US/docs/Web/API/URLSearchParams/toString). - Learn more about other **read-only** methods of [`URLSearchParams`](https://developer.mozilla.org/docs/Web/API/URLSearchParams), including the [`getAll()`](https://developer.mozilla.org/docs/Web/API/URLSearchParams/getAll), [`keys()`](https://developer.mozilla.org/docs/Web/API/URLSearchParams/keys), [`values()`](https://developer.mozilla.org/docs/Web/API/URLSearchParams/values), [`entries()`](https://developer.mozilla.org/docs/Web/API/URLSearchParams/entries), [`forEach()`](https://developer.mozilla.org/docs/Web/API/URLSearchParams/forEach), and [`toString()`](https://developer.mozilla.org/docs/Web/API/URLSearchParams/toString).
> **Good to know**: > **Good to know**:
> >

View file

@ -431,7 +431,7 @@ export default function handler(req, res) {
### X-DNS-Prefetch-Control ### X-DNS-Prefetch-Control
[This header](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/X-DNS-Prefetch-Control) controls DNS prefetching, allowing browsers to proactively perform domain name resolution on external links, images, CSS, JavaScript, and more. This prefetching is performed in the background, so the [DNS](https://developer.mozilla.org/en-US/docs/Glossary/DNS) is more likely to be resolved by the time the referenced items are needed. This reduces latency when the user clicks a link. [This header](https://developer.mozilla.org/docs/Web/HTTP/Headers/X-DNS-Prefetch-Control) controls DNS prefetching, allowing browsers to proactively perform domain name resolution on external links, images, CSS, JavaScript, and more. This prefetching is performed in the background, so the [DNS](https://developer.mozilla.org/docs/Glossary/DNS) is more likely to be resolved by the time the referenced items are needed. This reduces latency when the user clicks a link.
```js ```js
{ {
@ -442,7 +442,7 @@ export default function handler(req, res) {
### Strict-Transport-Security ### Strict-Transport-Security
[This header](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Strict-Transport-Security) informs browsers it should only be accessed using HTTPS, instead of using HTTP. Using the configuration below, all present and future subdomains will use HTTPS for a `max-age` of 2 years. This blocks access to pages or subdomains that can only be served over HTTP. [This header](https://developer.mozilla.org/docs/Web/HTTP/Headers/Strict-Transport-Security) informs browsers it should only be accessed using HTTPS, instead of using HTTP. Using the configuration below, all present and future subdomains will use HTTPS for a `max-age` of 2 years. This blocks access to pages or subdomains that can only be served over HTTP.
If you're deploying to [Vercel](https://vercel.com/docs/concepts/edge-network/headers#strict-transport-security?utm_source=next-site&utm_medium=docs&utm_campaign=next-website), this header is not necessary as it's automatically added to all deployments unless you declare `headers` in your `next.config.js`. If you're deploying to [Vercel](https://vercel.com/docs/concepts/edge-network/headers#strict-transport-security?utm_source=next-site&utm_medium=docs&utm_campaign=next-website), this header is not necessary as it's automatically added to all deployments unless you declare `headers` in your `next.config.js`.
@ -455,7 +455,7 @@ If you're deploying to [Vercel](https://vercel.com/docs/concepts/edge-network/he
### X-Frame-Options ### X-Frame-Options
[This header](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/X-Frame-Options) indicates whether the site should be allowed to be displayed within an `iframe`. This can prevent against clickjacking attacks. [This header](https://developer.mozilla.org/docs/Web/HTTP/Headers/X-Frame-Options) indicates whether the site should be allowed to be displayed within an `iframe`. This can prevent against clickjacking attacks.
**This header has been superseded by CSP's `frame-ancestors` option**, which has better support in modern browsers. **This header has been superseded by CSP's `frame-ancestors` option**, which has better support in modern browsers.
@ -468,7 +468,7 @@ If you're deploying to [Vercel](https://vercel.com/docs/concepts/edge-network/he
### Permissions-Policy ### Permissions-Policy
[This header](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Permissions-Policy) allows you to control which features and APIs can be used in the browser. It was previously named `Feature-Policy`. [This header](https://developer.mozilla.org/docs/Web/HTTP/Headers/Permissions-Policy) allows you to control which features and APIs can be used in the browser. It was previously named `Feature-Policy`.
```js ```js
{ {
@ -479,7 +479,7 @@ If you're deploying to [Vercel](https://vercel.com/docs/concepts/edge-network/he
### X-Content-Type-Options ### X-Content-Type-Options
[This header](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/X-Content-Type-Options) prevents the browser from attempting to guess the type of content if the `Content-Type` header is not explicitly set. This can prevent XSS exploits for websites that allow users to upload and share files. [This header](https://developer.mozilla.org/docs/Web/HTTP/Headers/X-Content-Type-Options) prevents the browser from attempting to guess the type of content if the `Content-Type` header is not explicitly set. This can prevent XSS exploits for websites that allow users to upload and share files.
For example, a user trying to download an image, but having it treated as a different `Content-Type` like an executable, which could be malicious. This header also applies to downloading browser extensions. The only valid value for this header is `nosniff`. For example, a user trying to download an image, but having it treated as a different `Content-Type` like an executable, which could be malicious. This header also applies to downloading browser extensions. The only valid value for this header is `nosniff`.
@ -492,7 +492,7 @@ For example, a user trying to download an image, but having it treated as a diff
### Referrer-Policy ### Referrer-Policy
[This header](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Referrer-Policy) controls how much information the browser includes when navigating from the current website (origin) to another. [This header](https://developer.mozilla.org/docs/Web/HTTP/Headers/Referrer-Policy) controls how much information the browser includes when navigating from the current website (origin) to another.
```js ```js
{ {

View file

@ -5,7 +5,7 @@ description: Next.js will automatically use HTTP Keep-Alive by default. Learn mo
{/* The content of this doc is shared between the app and pages router. You can use the `<PagesOnly>Content</PagesOnly>` component to add content that is specific to the Pages Router. Any shared content should not be wrapped in a component. */} {/* The content of this doc is shared between the app and pages router. You can use the `<PagesOnly>Content</PagesOnly>` component to add content that is specific to the Pages Router. Any shared content should not be wrapped in a component. */}
In Node.js versions prior to 18, Next.js automatically polyfills `fetch()` with [undici](/docs/architecture/supported-browsers#polyfills) and enables [HTTP Keep-Alive](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Keep-Alive) by default. In Node.js versions prior to 18, Next.js automatically polyfills `fetch()` with [undici](/docs/architecture/supported-browsers#polyfills) and enables [HTTP Keep-Alive](https://developer.mozilla.org/docs/Web/HTTP/Headers/Keep-Alive) by default.
To disable HTTP Keep-Alive for all `fetch()` calls on the server-side, open `next.config.js` and add the `httpAgentOptions` config: To disable HTTP Keep-Alive for all `fetch()` calls on the server-side, open `next.config.js` and add the `httpAgentOptions` config:

View file

@ -11,7 +11,7 @@ Or, in the case of Largest Contentful Paint (LCP), we might want to identify the
If the LCP element is an image, knowing the URL of the image resource can help us locate the asset we need to optimize. If the LCP element is an image, knowing the URL of the image resource can help us locate the asset we need to optimize.
Pinpointing the biggest contributor to the Web Vitals score, aka [attribution](https://github.com/GoogleChrome/web-vitals/blob/4ca38ae64b8d1e899028c692f94d4c56acfc996c/README.md#attribution), Pinpointing the biggest contributor to the Web Vitals score, aka [attribution](https://github.com/GoogleChrome/web-vitals/blob/4ca38ae64b8d1e899028c692f94d4c56acfc996c/README.md#attribution),
allows us to obtain more in-depth information like entries for [PerformanceEventTiming](https://developer.mozilla.org/en-US/docs/Web/API/PerformanceEventTiming), [PerformanceNavigationTiming](https://developer.mozilla.org/en-US/docs/Web/API/PerformanceNavigationTiming) and [PerformanceResourceTiming](https://developer.mozilla.org/en-US/docs/Web/API/PerformanceResourceTiming). allows us to obtain more in-depth information like entries for [PerformanceEventTiming](https://developer.mozilla.org/docs/Web/API/PerformanceEventTiming), [PerformanceNavigationTiming](https://developer.mozilla.org/docs/Web/API/PerformanceNavigationTiming) and [PerformanceResourceTiming](https://developer.mozilla.org/docs/Web/API/PerformanceResourceTiming).
Attribution is disabled by default in Next.js but can be enabled **per metric** by specifying the following in `next.config.js`. Attribution is disabled by default in Next.js but can be enabled **per metric** by specifying the following in `next.config.js`.

View file

@ -9,116 +9,116 @@ The Next.js Edge Runtime is based on standard Web APIs, it supports the followin
## Network APIs ## Network APIs
| API | Description | | API | Description |
| ------------------------------------------------------------------------------------- | --------------------------------- | | ------------------------------------------------------------------------------- | --------------------------------- |
| [`Blob`](https://developer.mozilla.org/en-US/docs/Web/API/Blob) | Represents a blob | | [`Blob`](https://developer.mozilla.org/docs/Web/API/Blob) | Represents a blob |
| [`fetch`](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API) | Fetches a resource | | [`fetch`](https://developer.mozilla.org/docs/Web/API/Fetch_API) | Fetches a resource |
| [`FetchEvent`](https://developer.mozilla.org/en-US/docs/Web/API/FetchEvent) | Represents a fetch event | | [`FetchEvent`](https://developer.mozilla.org/docs/Web/API/FetchEvent) | Represents a fetch event |
| [`File`](https://developer.mozilla.org/en-US/docs/Web/API/File) | Represents a file | | [`File`](https://developer.mozilla.org/docs/Web/API/File) | Represents a file |
| [`FormData`](https://developer.mozilla.org/en-US/docs/Web/API/FormData) | Represents form data | | [`FormData`](https://developer.mozilla.org/docs/Web/API/FormData) | Represents form data |
| [`Headers`](https://developer.mozilla.org/en-US/docs/Web/API/Headers) | Represents HTTP headers | | [`Headers`](https://developer.mozilla.org/docs/Web/API/Headers) | Represents HTTP headers |
| [`Request`](https://developer.mozilla.org/en-US/docs/Web/API/Request) | Represents an HTTP request | | [`Request`](https://developer.mozilla.org/docs/Web/API/Request) | Represents an HTTP request |
| [`Response`](https://developer.mozilla.org/en-US/docs/Web/API/Response) | Represents an HTTP response | | [`Response`](https://developer.mozilla.org/docs/Web/API/Response) | Represents an HTTP response |
| [`URLSearchParams`](https://developer.mozilla.org/en-US/docs/Web/API/URLSearchParams) | Represents URL search parameters | | [`URLSearchParams`](https://developer.mozilla.org/docs/Web/API/URLSearchParams) | Represents URL search parameters |
| [`WebSocket`](https://developer.mozilla.org/en-US/docs/Web/API/WebSocket) | Represents a websocket connection | | [`WebSocket`](https://developer.mozilla.org/docs/Web/API/WebSocket) | Represents a websocket connection |
## Encoding APIs ## Encoding APIs
| API | Description | | API | Description |
| ----------------------------------------------------------------------------------------- | ---------------------------------- | | ----------------------------------------------------------------------------------- | ---------------------------------- |
| [`atob`](https://developer.mozilla.org/en-US/docs/Web/API/WindowOrWorkerGlobalScope/atob) | Decodes a base-64 encoded string | | [`atob`](https://developer.mozilla.org/docs/Web/API/WindowOrWorkerGlobalScope/atob) | Decodes a base-64 encoded string |
| [`btoa`](https://developer.mozilla.org/en-US/docs/Web/API/WindowOrWorkerGlobalScope/btoa) | Encodes a string in base-64 | | [`btoa`](https://developer.mozilla.org/docs/Web/API/WindowOrWorkerGlobalScope/btoa) | Encodes a string in base-64 |
| [`TextDecoder`](https://developer.mozilla.org/en-US/docs/Web/API/TextDecoder) | Decodes a Uint8Array into a string | | [`TextDecoder`](https://developer.mozilla.org/docs/Web/API/TextDecoder) | Decodes a Uint8Array into a string |
| [`TextDecoderStream`](https://developer.mozilla.org/en-US/docs/Web/API/TextDecoderStream) | Chainable decoder for streams | | [`TextDecoderStream`](https://developer.mozilla.org/docs/Web/API/TextDecoderStream) | Chainable decoder for streams |
| [`TextEncoder`](https://developer.mozilla.org/en-US/docs/Web/API/TextEncoder) | Encodes a string into a Uint8Array | | [`TextEncoder`](https://developer.mozilla.org/docs/Web/API/TextEncoder) | Encodes a string into a Uint8Array |
| [`TextEncoderStream`](https://developer.mozilla.org/en-US/docs/Web/API/TextEncoderStream) | Chainable encoder for streams | | [`TextEncoderStream`](https://developer.mozilla.org/docs/Web/API/TextEncoderStream) | Chainable encoder for streams |
## Stream APIs ## Stream APIs
| API | Description | | API | Description |
| ------------------------------------------------------------------------------------------------------------- | --------------------------------------- | | ------------------------------------------------------------------------------------------------------- | --------------------------------------- |
| [`ReadableStream`](https://developer.mozilla.org/en-US/docs/Web/API/ReadableStream) | Represents a readable stream | | [`ReadableStream`](https://developer.mozilla.org/docs/Web/API/ReadableStream) | Represents a readable stream |
| [`ReadableStreamBYOBReader`](https://developer.mozilla.org/en-US/docs/Web/API/ReadableStreamBYOBReader) | Represents a reader of a ReadableStream | | [`ReadableStreamBYOBReader`](https://developer.mozilla.org/docs/Web/API/ReadableStreamBYOBReader) | Represents a reader of a ReadableStream |
| [`ReadableStreamDefaultReader`](https://developer.mozilla.org/en-US/docs/Web/API/ReadableStreamDefaultReader) | Represents a reader of a ReadableStream | | [`ReadableStreamDefaultReader`](https://developer.mozilla.org/docs/Web/API/ReadableStreamDefaultReader) | Represents a reader of a ReadableStream |
| [`TransformStream`](https://developer.mozilla.org/en-US/docs/Web/API/TransformStream) | Represents a transform stream | | [`TransformStream`](https://developer.mozilla.org/docs/Web/API/TransformStream) | Represents a transform stream |
| [`WritableStream`](https://developer.mozilla.org/en-US/docs/Web/API/WritableStream) | Represents a writable stream | | [`WritableStream`](https://developer.mozilla.org/docs/Web/API/WritableStream) | Represents a writable stream |
| [`WritableStreamDefaultWriter`](https://developer.mozilla.org/en-US/docs/Web/API/WritableStreamDefaultWriter) | Represents a writer of a WritableStream | | [`WritableStreamDefaultWriter`](https://developer.mozilla.org/docs/Web/API/WritableStreamDefaultWriter) | Represents a writer of a WritableStream |
## Crypto APIs ## Crypto APIs
| API | Description | | API | Description |
| ------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------- | | ------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------- |
| [`crypto`](https://developer.mozilla.org/en-US/docs/Web/API/Window/crypto) | Provides access to the cryptographic functionality of the platform | | [`crypto`](https://developer.mozilla.org/docs/Web/API/Window/crypto) | Provides access to the cryptographic functionality of the platform |
| [`CryptoKey`](https://developer.mozilla.org/en-US/docs/Web/API/CryptoKey) | Represents a cryptographic key | | [`CryptoKey`](https://developer.mozilla.org/docs/Web/API/CryptoKey) | Represents a cryptographic key |
| [`SubtleCrypto`](https://developer.mozilla.org/en-US/docs/Web/API/SubtleCrypto) | Provides access to common cryptographic primitives, like hashing, signing, encryption or decryption | | [`SubtleCrypto`](https://developer.mozilla.org/docs/Web/API/SubtleCrypto) | Provides access to common cryptographic primitives, like hashing, signing, encryption or decryption |
## Web Standard APIs ## Web Standard APIs
| API | Description | | API | Description |
| --------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | --------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| [`AbortController`](https://developer.mozilla.org/en-US/docs/Web/API/AbortController) | Allows you to abort one or more DOM requests as and when desired | | [`AbortController`](https://developer.mozilla.org/docs/Web/API/AbortController) | Allows you to abort one or more DOM requests as and when desired |
| [`Array`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array) | Represents an array of values | | [`Array`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array) | Represents an array of values |
| [`ArrayBuffer`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/ArrayBuffer) | Represents a generic, fixed-length raw binary data buffer | | [`ArrayBuffer`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/ArrayBuffer) | Represents a generic, fixed-length raw binary data buffer |
| [`Atomics`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Atomics) | Provides atomic operations as static methods | | [`Atomics`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Atomics) | Provides atomic operations as static methods |
| [`BigInt`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/BigInt) | Represents a whole number with arbitrary precision | | [`BigInt`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/BigInt) | Represents a whole number with arbitrary precision |
| [`BigInt64Array`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/BigInt64Array) | Represents a typed array of 64-bit signed integers | | [`BigInt64Array`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/BigInt64Array) | Represents a typed array of 64-bit signed integers |
| [`BigUint64Array`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/BigUint64Array) | Represents a typed array of 64-bit unsigned integers | | [`BigUint64Array`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/BigUint64Array) | Represents a typed array of 64-bit unsigned integers |
| [`Boolean`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Boolean) | Represents a logical entity and can have two values: `true` and `false` | | [`Boolean`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Boolean) | Represents a logical entity and can have two values: `true` and `false` |
| [`clearInterval`](https://developer.mozilla.org/en-US/docs/Web/API/WindowOrWorkerGlobalScope/clearInterval) | Cancels a timed, repeating action which was previously established by a call to `setInterval()` | | [`clearInterval`](https://developer.mozilla.org/docs/Web/API/WindowOrWorkerGlobalScope/clearInterval) | Cancels a timed, repeating action which was previously established by a call to `setInterval()` |
| [`clearTimeout`](https://developer.mozilla.org/en-US/docs/Web/API/WindowOrWorkerGlobalScope/clearTimeout) | Cancels a timed, repeating action which was previously established by a call to `setTimeout()` | | [`clearTimeout`](https://developer.mozilla.org/docs/Web/API/WindowOrWorkerGlobalScope/clearTimeout) | Cancels a timed, repeating action which was previously established by a call to `setTimeout()` |
| [`console`](https://developer.mozilla.org/en-US/docs/Web/API/Console) | Provides access to the browser's debugging console | | [`console`](https://developer.mozilla.org/docs/Web/API/Console) | Provides access to the browser's debugging console |
| [`DataView`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/DataView) | Represents a generic view of an `ArrayBuffer` | | [`DataView`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/DataView) | Represents a generic view of an `ArrayBuffer` |
| [`Date`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date) | Represents a single moment in time in a platform-independent format | | [`Date`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Date) | Represents a single moment in time in a platform-independent format |
| [`decodeURI`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/decodeURI) | Decodes a Uniform Resource Identifier (URI) previously created by `encodeURI` or by a similar routine | | [`decodeURI`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/decodeURI) | Decodes a Uniform Resource Identifier (URI) previously created by `encodeURI` or by a similar routine |
| [`decodeURIComponent`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/decodeURIComponent) | Decodes a Uniform Resource Identifier (URI) component previously created by `encodeURIComponent` or by a similar routine | | [`decodeURIComponent`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/decodeURIComponent) | Decodes a Uniform Resource Identifier (URI) component previously created by `encodeURIComponent` or by a similar routine |
| [`DOMException`](https://developer.mozilla.org/en-US/docs/Web/API/DOMException) | Represents an error that occurs in the DOM | | [`DOMException`](https://developer.mozilla.org/docs/Web/API/DOMException) | Represents an error that occurs in the DOM |
| [`encodeURI`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/encodeURI) | Encodes a Uniform Resource Identifier (URI) by replacing each instance of certain characters by one, two, three, or four escape sequences representing the UTF-8 encoding of the character | | [`encodeURI`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/encodeURI) | Encodes a Uniform Resource Identifier (URI) by replacing each instance of certain characters by one, two, three, or four escape sequences representing the UTF-8 encoding of the character |
| [`encodeURIComponent`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/encodeURIComponent) | Encodes a Uniform Resource Identifier (URI) component by replacing each instance of certain characters by one, two, three, or four escape sequences representing the UTF-8 encoding of the character | | [`encodeURIComponent`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/encodeURIComponent) | Encodes a Uniform Resource Identifier (URI) component by replacing each instance of certain characters by one, two, three, or four escape sequences representing the UTF-8 encoding of the character |
| [`Error`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Error) | Represents an error when trying to execute a statement or accessing a property | | [`Error`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Error) | Represents an error when trying to execute a statement or accessing a property |
| [`EvalError`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/EvalError) | Represents an error that occurs regarding the global function `eval()` | | [`EvalError`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/EvalError) | Represents an error that occurs regarding the global function `eval()` |
| [`Float32Array`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Float32Array) | Represents a typed array of 32-bit floating point numbers | | [`Float32Array`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Float32Array) | Represents a typed array of 32-bit floating point numbers |
| [`Float64Array`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Float64Array) | Represents a typed array of 64-bit floating point numbers | | [`Float64Array`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Float64Array) | Represents a typed array of 64-bit floating point numbers |
| [`Function`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function) | Represents a function | | [`Function`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Function) | Represents a function |
| [`Infinity`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Infinity) | Represents the mathematical Infinity value | | [`Infinity`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Infinity) | Represents the mathematical Infinity value |
| [`Int8Array`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Int8Array) | Represents a typed array of 8-bit signed integers | | [`Int8Array`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Int8Array) | Represents a typed array of 8-bit signed integers |
| [`Int16Array`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Int16Array) | Represents a typed array of 16-bit signed integers | | [`Int16Array`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Int16Array) | Represents a typed array of 16-bit signed integers |
| [`Int32Array`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Int32Array) | Represents a typed array of 32-bit signed integers | | [`Int32Array`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Int32Array) | Represents a typed array of 32-bit signed integers |
| [`Intl`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl) | Provides access to internationalization and localization functionality | | [`Intl`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Intl) | Provides access to internationalization and localization functionality |
| [`isFinite`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/isFinite) | Determines whether a value is a finite number | | [`isFinite`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/isFinite) | Determines whether a value is a finite number |
| [`isNaN`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/isNaN) | Determines whether a value is `NaN` or not | | [`isNaN`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/isNaN) | Determines whether a value is `NaN` or not |
| [`JSON`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/JSON) | Provides functionality to convert JavaScript values to and from the JSON format | | [`JSON`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/JSON) | Provides functionality to convert JavaScript values to and from the JSON format |
| [`Map`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Map) | Represents a collection of values, where each value may occur only once | | [`Map`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Map) | Represents a collection of values, where each value may occur only once |
| [`Math`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math) | Provides access to mathematical functions and constants | | [`Math`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Math) | Provides access to mathematical functions and constants |
| [`Number`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number) | Represents a numeric value | | [`Number`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Number) | Represents a numeric value |
| [`Object`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object) | Represents the object that is the base of all JavaScript objects | | [`Object`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object) | Represents the object that is the base of all JavaScript objects |
| [`parseFloat`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/parseFloat) | Parses a string argument and returns a floating point number | | [`parseFloat`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/parseFloat) | Parses a string argument and returns a floating point number |
| [`parseInt`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/parseInt) | Parses a string argument and returns an integer of the specified radix | | [`parseInt`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/parseInt) | Parses a string argument and returns an integer of the specified radix |
| [`Promise`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise) | Represents the eventual completion (or failure) of an asynchronous operation, and its resulting value | | [`Promise`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Promise) | Represents the eventual completion (or failure) of an asynchronous operation, and its resulting value |
| [`Proxy`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Proxy) | Represents an object that is used to define custom behavior for fundamental operations (e.g. property lookup, assignment, enumeration, function invocation, etc) | | [`Proxy`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Proxy) | Represents an object that is used to define custom behavior for fundamental operations (e.g. property lookup, assignment, enumeration, function invocation, etc) |
| [`queueMicrotask`](https://developer.mozilla.org/en-US/docs/Web/API/queueMicrotask) | Queues a microtask to be executed | | [`queueMicrotask`](https://developer.mozilla.org/docs/Web/API/queueMicrotask) | Queues a microtask to be executed |
| [`RangeError`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/RangeError) | Represents an error when a value is not in the set or range of allowed values | | [`RangeError`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/RangeError) | Represents an error when a value is not in the set or range of allowed values |
| [`ReferenceError`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/ReferenceError) | Represents an error when a non-existent variable is referenced | | [`ReferenceError`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/ReferenceError) | Represents an error when a non-existent variable is referenced |
| [`Reflect`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Reflect) | Provides methods for interceptable JavaScript operations | | [`Reflect`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Reflect) | Provides methods for interceptable JavaScript operations |
| [`RegExp`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/RegExp) | Represents a regular expression, allowing you to match combinations of characters | | [`RegExp`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/RegExp) | Represents a regular expression, allowing you to match combinations of characters |
| [`Set`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Set) | Represents a collection of values, where each value may occur only once | | [`Set`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Set) | Represents a collection of values, where each value may occur only once |
| [`setInterval`](https://developer.mozilla.org/en-US/docs/Web/API/setInterval) | Repeatedly calls a function, with a fixed time delay between each call | | [`setInterval`](https://developer.mozilla.org/docs/Web/API/setInterval) | Repeatedly calls a function, with a fixed time delay between each call |
| [`setTimeout`](https://developer.mozilla.org/en-US/docs/Web/API/setTimeout) | Calls a function or evaluates an expression after a specified number of milliseconds | | [`setTimeout`](https://developer.mozilla.org/docs/Web/API/setTimeout) | Calls a function or evaluates an expression after a specified number of milliseconds |
| [`SharedArrayBuffer`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/SharedArrayBuffer) | Represents a generic, fixed-length raw binary data buffer | | [`SharedArrayBuffer`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/SharedArrayBuffer) | Represents a generic, fixed-length raw binary data buffer |
| [`String`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String) | Represents a sequence of characters | | [`String`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String) | Represents a sequence of characters |
| [`structuredClone`](https://developer.mozilla.org/en-US/docs/Web/API/Web_Workers_API/Structured_clone_algorithm) | Creates a deep copy of a value | | [`structuredClone`](https://developer.mozilla.org/docs/Web/API/Web_Workers_API/Structured_clone_algorithm) | Creates a deep copy of a value |
| [`Symbol`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Symbol) | Represents a unique and immutable data type that is used as the key of an object property | | [`Symbol`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Symbol) | Represents a unique and immutable data type that is used as the key of an object property |
| [`SyntaxError`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/SyntaxError) | Represents an error when trying to interpret syntactically invalid code | | [`SyntaxError`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/SyntaxError) | Represents an error when trying to interpret syntactically invalid code |
| [`TypeError`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/TypeError) | Represents an error when a value is not of the expected type | | [`TypeError`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/TypeError) | Represents an error when a value is not of the expected type |
| [`Uint8Array`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Uint8Array) | Represents a typed array of 8-bit unsigned integers | | [`Uint8Array`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Uint8Array) | Represents a typed array of 8-bit unsigned integers |
| [`Uint8ClampedArray`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Uint8ClampedArray) | Represents a typed array of 8-bit unsigned integers clamped to 0-255 | | [`Uint8ClampedArray`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Uint8ClampedArray) | Represents a typed array of 8-bit unsigned integers clamped to 0-255 |
| [`Uint32Array`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Uint32Array) | Represents a typed array of 32-bit unsigned integers | | [`Uint32Array`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Uint32Array) | Represents a typed array of 32-bit unsigned integers |
| [`URIError`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/URIError) | Represents an error when a global URI handling function was used in a wrong way | | [`URIError`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/URIError) | Represents an error when a global URI handling function was used in a wrong way |
| [`URL`](https://developer.mozilla.org/en-US/docs/Web/API/URL) | Represents an object providing static methods used for creating object URLs | | [`URL`](https://developer.mozilla.org/docs/Web/API/URL) | Represents an object providing static methods used for creating object URLs |
| [`URLPattern`](https://developer.mozilla.org/en-US/docs/Web/API/URLPattern) | Represents a URL pattern | | [`URLPattern`](https://developer.mozilla.org/docs/Web/API/URLPattern) | Represents a URL pattern |
| [`URLSearchParams`](https://developer.mozilla.org/en-US/docs/Web/API/URLSearchParams) | Represents a collection of key/value pairs | | [`URLSearchParams`](https://developer.mozilla.org/docs/Web/API/URLSearchParams) | Represents a collection of key/value pairs |
| [`WeakMap`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/WeakMap) | Represents a collection of key/value pairs in which the keys are weakly referenced | | [`WeakMap`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/WeakMap) | Represents a collection of key/value pairs in which the keys are weakly referenced |
| [`WeakSet`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/WeakSet) | Represents a collection of objects in which each object may occur only once | | [`WeakSet`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/WeakSet) | Represents a collection of objects in which each object may occur only once |
| [`WebAssembly`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/WebAssembly) | Provides access to WebAssembly | | [`WebAssembly`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/WebAssembly) | Provides access to WebAssembly |
## Next.js Specific Polyfills ## Next.js Specific Polyfills
@ -138,12 +138,12 @@ The Edge Runtime has some restrictions including:
The following JavaScript language features are disabled, and **will not work:** The following JavaScript language features are disabled, and **will not work:**
| API | Description | | API | Description |
| ------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------- | | ------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------- |
| [`eval`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/eval) | Evaluates JavaScript code represented as a string | | [`eval`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/eval) | Evaluates JavaScript code represented as a string |
| [`new Function(evalString)`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function) | Creates a new function with the code provided as an argument | | [`new Function(evalString)`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Function) | Creates a new function with the code provided as an argument |
| [`WebAssembly.compile`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/WebAssembly/compile) | Compiles a WebAssembly module from a buffer source | | [`WebAssembly.compile`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/WebAssembly/compile) | Compiles a WebAssembly module from a buffer source |
| [`WebAssembly.instantiate`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/WebAssembly/instantiate) | Compiles and instantiates a WebAssembly module from a buffer source | | [`WebAssembly.instantiate`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/WebAssembly/instantiate) | Compiles and instantiates a WebAssembly module from a buffer source |
In rare cases, your code could contain (or import) some dynamic code evaluation statements which _can not be reached at runtime_ and which can not be removed by treeshaking. In rare cases, your code could contain (or import) some dynamic code evaluation statements which _can not be reached at runtime_ and which can not be removed by treeshaking.
You can relax the check to allow specific files with your Middleware or Edge API Route exported configuration: You can relax the check to allow specific files with your Middleware or Edge API Route exported configuration:

View file

@ -61,7 +61,7 @@ function Posts({ posts }) {
export default Posts export default Posts
``` ```
> [`encodeURIComponent`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/encodeURIComponent) is used in the example to keep the path utf-8 compatible. > [`encodeURIComponent`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/encodeURIComponent) is used in the example to keep the path utf-8 compatible.
Alternatively, using a URL Object: Alternatively, using a URL Object:

View file

@ -45,7 +45,7 @@ export default function handler(req, res) {
> **Good to know**: > **Good to know**:
> >
> - API Routes [do not specify CORS headers](https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS), meaning they are **same-origin only** by default. You can customize such behavior by wrapping the request handler with the [CORS request helpers](https://github.com/vercel/next.js/tree/canary/examples/api-routes-cors). > - API Routes [do not specify CORS headers](https://developer.mozilla.org/docs/Web/HTTP/CORS), meaning they are **same-origin only** by default. You can customize such behavior by wrapping the request handler with the [CORS request helpers](https://github.com/vercel/next.js/tree/canary/examples/api-routes-cors).
- API Routes can't be used with [static exports](/docs/pages/building-your-application/deploying/static-exports). However, [Route Handlers](/docs/app/building-your-application/routing/route-handlers) in the App Router can. - API Routes can't be used with [static exports](/docs/pages/building-your-application/deploying/static-exports). However, [Route Handlers](/docs/app/building-your-application/routing/route-handlers) in the App Router can.
> - API Routes will be affected by [`pageExtensions` configuration](/docs/pages/api-reference/next-config-js/pageExtensions) in `next.config.js`. > - API Routes will be affected by [`pageExtensions` configuration](/docs/pages/api-reference/next-config-js/pageExtensions) in `next.config.js`.
@ -175,7 +175,7 @@ The [Server Response object](https://nodejs.org/api/http.html#http_class_http_se
The included helpers are: The included helpers are:
- `res.status(code)` - A function to set the status code. `code` must be a valid [HTTP status code](https://en.wikipedia.org/wiki/List_of_HTTP_status_codes) - `res.status(code)` - A function to set the status code. `code` must be a valid [HTTP status code](https://en.wikipedia.org/wiki/List_of_HTTP_status_codes)
- `res.json(body)` - Sends a JSON response. `body` must be a [serializable object](https://developer.mozilla.org/en-US/docs/Glossary/Serialization) - `res.json(body)` - Sends a JSON response. `body` must be a [serializable object](https://developer.mozilla.org/docs/Glossary/Serialization)
- `res.send(body)` - Sends the HTTP response. `body` can be a `string`, an `object` or a `Buffer` - `res.send(body)` - Sends the HTTP response. `body` can be a `string`, an `object` or a `Buffer`
- `res.redirect([status,] path)` - Redirects to a specified path or URL. `status` must be a valid [HTTP status code](https://en.wikipedia.org/wiki/List_of_HTTP_status_codes). If not specified, `status` defaults to "307" "Temporary redirect". - `res.redirect([status,] path)` - Redirects to a specified path or URL. `status` must be a valid [HTTP status code](https://en.wikipedia.org/wiki/List_of_HTTP_status_codes). If not specified, `status` defaults to "307" "Temporary redirect".
- `res.revalidate(urlPath)` - [Revalidate a page on demand](/docs/pages/building-your-application/data-fetching/incremental-static-regeneration#on-demand-revalidation) using `getStaticProps`. `urlPath` must be a `string`. - `res.revalidate(urlPath)` - [Revalidate a page on demand](/docs/pages/building-your-application/data-fetching/incremental-static-regeneration#on-demand-revalidation) using `getStaticProps`. `urlPath` must be a `string`.
@ -209,7 +209,7 @@ export default function handler(req, res) {
### Sending a JSON response ### Sending a JSON response
When sending a response back to the client you can send a JSON response, this must be a [serializable object](https://developer.mozilla.org/en-US/docs/Glossary/Serialization). When sending a response back to the client you can send a JSON response, this must be a [serializable object](https://developer.mozilla.org/docs/Glossary/Serialization).
In a real world application you might want to let the client know the status of the request depending on the result of the requested endpoint. In a real world application you might want to let the client know the status of the request depending on the result of the requested endpoint.
The following example sends a JSON response with the status code `200` (`OK`) and the result of the async operation. It's contained in a try catch block to handle any errors that may occur, with the appropriate status code and error message caught and sent back to the client: The following example sends a JSON response with the status code `200` (`OK`) and the result of the async operation. It's contained in a try catch block to handle any errors that may occur, with the appropriate status code and error message caught and sent back to the client:

View file

@ -131,7 +131,7 @@ For example if you have `pages/blog.js` the following urls will be available:
## Automatic Locale Detection ## Automatic Locale Detection
When a user visits the application root (generally `/`), Next.js will try to automatically detect which locale the user prefers based on the [`Accept-Language`](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Accept-Language) header and the current domain. When a user visits the application root (generally `/`), Next.js will try to automatically detect which locale the user prefers based on the [`Accept-Language`](https://developer.mozilla.org/docs/Web/HTTP/Headers/Accept-Language) header and the current domain.
If a locale other than the default locale is detected, the user will be redirected to either: If a locale other than the default locale is detected, the user will be redirected to either:

View file

@ -169,7 +169,7 @@ export async function getStaticProps() {
} }
``` ```
Alternatively, if you are **not** using API routes to fetch data, then the [`fetch()`](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API) API _can_ be used directly in `getStaticProps` to fetch data. Alternatively, if you are **not** using API routes to fetch data, then the [`fetch()`](https://developer.mozilla.org/docs/Web/API/Fetch_API) API _can_ be used directly in `getStaticProps` to fetch data.
To verify what Next.js eliminates from the client-side bundle, you can use the [next-code-elimination tool](https://next-code-elimination.vercel.app/). To verify what Next.js eliminates from the client-side bundle, you can use the [next-code-elimination tool](https://next-code-elimination.vercel.app/).

View file

@ -19,21 +19,21 @@ Out of the box, with no configuration, Next.js compiles CSS with the following t
- [Autoprefixer](https://github.com/postcss/autoprefixer) automatically adds vendor prefixes to CSS rules (back to IE11). - [Autoprefixer](https://github.com/postcss/autoprefixer) automatically adds vendor prefixes to CSS rules (back to IE11).
- [Cross-browser Flexbox bugs](https://github.com/philipwalton/flexbugs) are corrected to behave like [the spec](https://www.w3.org/TR/css-flexbox-1/). - [Cross-browser Flexbox bugs](https://github.com/philipwalton/flexbugs) are corrected to behave like [the spec](https://www.w3.org/TR/css-flexbox-1/).
- New CSS features are automatically compiled for Internet Explorer 11 compatibility: - New CSS features are automatically compiled for Internet Explorer 11 compatibility:
- [`all` Property](https://developer.mozilla.org/en-US/docs/Web/CSS/all) - [`all` Property](https://developer.mozilla.org/docs/Web/CSS/all)
- [Break Properties](https://developer.mozilla.org/en-US/docs/Web/CSS/break-after) - [Break Properties](https://developer.mozilla.org/docs/Web/CSS/break-after)
- [`font-variant` Property](https://developer.mozilla.org/en-US/docs/Web/CSS/font-variant) - [`font-variant` Property](https://developer.mozilla.org/docs/Web/CSS/font-variant)
- [Gap Properties](https://developer.mozilla.org/en-US/docs/Web/CSS/gap) - [Gap Properties](https://developer.mozilla.org/docs/Web/CSS/gap)
- [Media Query Ranges](https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries#Syntax_improvements_in_Level_4) - [Media Query Ranges](https://developer.mozilla.org/docs/Web/CSS/Media_Queries/Using_media_queries#Syntax_improvements_in_Level_4)
By default, [CSS Grid](https://www.w3.org/TR/css-grid-1/) and [Custom Properties](https://developer.mozilla.org/en-US/docs/Web/CSS/var) (CSS variables) are **not compiled** for IE11 support. By default, [CSS Grid](https://www.w3.org/TR/css-grid-1/) and [Custom Properties](https://developer.mozilla.org/docs/Web/CSS/var) (CSS variables) are **not compiled** for IE11 support.
To compile [CSS Grid Layout](https://developer.mozilla.org/en-US/docs/Web/CSS/grid) for IE11, you can place the following comment at the top of your CSS file: To compile [CSS Grid Layout](https://developer.mozilla.org/docs/Web/CSS/grid) for IE11, you can place the following comment at the top of your CSS file:
```css ```css
/* autoprefixer grid: autoplace */ /* autoprefixer grid: autoplace */
``` ```
You can also enable IE11 support for [CSS Grid Layout](https://developer.mozilla.org/en-US/docs/Web/CSS/grid) You can also enable IE11 support for [CSS Grid Layout](https://developer.mozilla.org/docs/Web/CSS/grid)
in your entire project by configuring autoprefixer with the configuration shown below (collapsed). in your entire project by configuring autoprefixer with the configuration shown below (collapsed).
See ["Customizing Plugins"](#customizing-plugins) below for more information. See ["Customizing Plugins"](#customizing-plugins) below for more information.

View file

@ -64,7 +64,7 @@ Your headless CMS might allow you to include a variable in the draft URL so that
- Check that the secret matches and that the `slug` parameter exists (if not, the request should fail). - Check that the secret matches and that the `slug` parameter exists (if not, the request should fail).
- -
- Call `res.setDraftMode`. - Call `res.setDraftMode`.
- Then redirect the browser to the path specified by `slug`. (The following example uses a [307 redirect](https://developer.mozilla.org/en-US/docs/Web/HTTP/Status/307)). - Then redirect the browser to the path specified by `slug`. (The following example uses a [307 redirect](https://developer.mozilla.org/docs/Web/HTTP/Status/307)).
```js ```js
export default async (req, res) => { export default async (req, res) => {

View file

@ -56,7 +56,7 @@ Click the drop down menu listing the runtime configuration, and click `Edit Conf
Start your development server as usual by running `next dev`, `npm run dev`, or `yarn dev`. Once the server starts, open `http://localhost:3000` (or your alternate URL) in Chrome. Next, open Chrome's Developer Tools (`Ctrl+Shift+J` on Windows/Linux, `⌥+⌘+I` on macOS), then go to the **Sources** tab. Start your development server as usual by running `next dev`, `npm run dev`, or `yarn dev`. Once the server starts, open `http://localhost:3000` (or your alternate URL) in Chrome. Next, open Chrome's Developer Tools (`Ctrl+Shift+J` on Windows/Linux, `⌥+⌘+I` on macOS), then go to the **Sources** tab.
Now, any time your client-side code reaches a [`debugger`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/debugger) statement, code execution will pause and that file will appear in the debug area. You can also press `Ctrl+P` on Windows/Linux or `⌘+P` on macOS to search for a file and set breakpoints manually. Note that when searching here, your source files will have paths starting with `webpack://_N_E/./`. Now, any time your client-side code reaches a [`debugger`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/debugger) statement, code execution will pause and that file will appear in the debug area. You can also press `Ctrl+P` on Windows/Linux or `⌘+P` on macOS to search for a file and set breakpoints manually. Note that when searching here, your source files will have paths starting with `webpack://_N_E/./`.
### Server-side code ### Server-side code

View file

@ -90,7 +90,7 @@ Your headless CMS might allow you to include a variable in the preview URL so th
- Check that the secret matches and that the `slug` parameter exists (if not, the request should fail). - Check that the secret matches and that the `slug` parameter exists (if not, the request should fail).
- -
- Call `res.setPreviewData`. - Call `res.setPreviewData`.
- Then redirect the browser to the path specified by `slug`. (The following example uses a [307 redirect](https://developer.mozilla.org/en-US/docs/Web/HTTP/Status/307)). - Then redirect the browser to the path specified by `slug`. (The following example uses a [307 redirect](https://developer.mozilla.org/docs/Web/HTTP/Status/307)).
```js ```js
export default async (req, res) => { export default async (req, res) => {

View file

@ -83,7 +83,7 @@ See the [documentation](/docs/pages/building-your-application/optimizing/images#
#### HMR connection now uses a WebSocket #### HMR connection now uses a WebSocket
Previously, Next.js used a [server-sent events](https://developer.mozilla.org/en-US/docs/Web/API/Server-sent_events) connection to receive HMR events. Next.js 12 now uses a WebSocket connection. Previously, Next.js used a [server-sent events](https://developer.mozilla.org/docs/Web/API/Server-sent_events) connection to receive HMR events. Next.js 12 now uses a WebSocket connection.
In some cases when proxying requests to the Next.js dev server, you will need to ensure the upgrade request is handled correctly. For example, in `nginx` you would need to add the following configuration: In some cases when proxying requests to the Next.js dev server, you will need to ensure the upgrade request is handled correctly. For example, in `nginx` you would need to add the following configuration:

View file

@ -155,7 +155,7 @@ This example `sizes` could have a dramatic effect on performance metrics. Withou
Learn more about `srcset` and `sizes`: Learn more about `srcset` and `sizes`:
- [web.dev](https://web.dev/learn/design/responsive-images/#sizes) - [web.dev](https://web.dev/learn/design/responsive-images/#sizes)
- [mdn](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#attr-sizes) - [mdn](https://developer.mozilla.org/docs/Web/HTML/Element/img#attr-sizes)
### quality ### quality
@ -192,7 +192,7 @@ In some cases, you may need more advanced usage. The `<Image />` component optio
### style ### style
Allows [passing CSS styles](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/style) to the underlying image element. Allows [passing CSS styles](https://developer.mozilla.org/docs/Web/HTML/Element/style) to the underlying image element.
Note that all `layout` modes apply their own styles to the image element, and these automatic styles take precedence over the `style` prop. Note that all `layout` modes apply their own styles to the image element, and these automatic styles take precedence over the `style` prop.
@ -202,13 +202,13 @@ Also keep in mind that the required `width` and `height` props can interact with
Defines how the image will fit into its parent container when using `layout="fill"`. Defines how the image will fit into its parent container when using `layout="fill"`.
This value is passed to the [object-fit CSS property](https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit) for the `src` image. This value is passed to the [object-fit CSS property](https://developer.mozilla.org/docs/Web/CSS/object-fit) for the `src` image.
### objectPosition ### objectPosition
Defines how the image is positioned within its parent element when using `layout="fill"`. Defines how the image is positioned within its parent element when using `layout="fill"`.
This value is passed to the [object-position CSS property](https://developer.mozilla.org/en-US/docs/Web/CSS/object-position) applied to the image. This value is passed to the [object-position CSS property](https://developer.mozilla.org/docs/Web/CSS/object-position) applied to the image.
### onLoadingComplete ### onLoadingComplete
@ -216,8 +216,8 @@ A callback function that is invoked once the image is completely loaded and the
The `onLoadingComplete` function accepts one parameter, an object with the following properties: The `onLoadingComplete` function accepts one parameter, an object with the following properties:
- [`naturalWidth`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/naturalWidth) - [`naturalWidth`](https://developer.mozilla.org/docs/Web/API/HTMLImageElement/naturalWidth)
- [`naturalHeight`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/naturalHeight) - [`naturalHeight`](https://developer.mozilla.org/docs/Web/API/HTMLImageElement/naturalHeight)
### loading ### loading
@ -234,11 +234,11 @@ the viewport.
When `eager`, load the image immediately. When `eager`, load the image immediately.
[Learn more](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#attr-loading) [Learn more](https://developer.mozilla.org/docs/Web/HTML/Element/img#attr-loading)
### blurDataURL ### blurDataURL
A [Data URL](https://developer.mozilla.org/en-US/docs/Web/HTTP/Basics_of_HTTP/Data_URIs) to A [Data URL](https://developer.mozilla.org/docs/Web/HTTP/Basics_of_HTTP/Data_URIs) to
be used as a placeholder image before the `src` image successfully loads. Only takes effect when combined be used as a placeholder image before the `src` image successfully loads. Only takes effect when combined
with [`placeholder="blur"`](#placeholder). with [`placeholder="blur"`](#placeholder).
@ -259,7 +259,7 @@ A string (with similar syntax to the margin property) that acts as the bounding
If the image is nested in a scrollable parent element other than the root document, you will also need to assign the [lazyRoot](#lazyroot) prop. If the image is nested in a scrollable parent element other than the root document, you will also need to assign the [lazyRoot](#lazyroot) prop.
[Learn more](https://developer.mozilla.org/en-US/docs/Web/API/IntersectionObserver/rootMargin) [Learn more](https://developer.mozilla.org/docs/Web/API/IntersectionObserver/rootMargin)
### lazyRoot ### lazyRoot
@ -311,7 +311,7 @@ const Example = () => {
} }
``` ```
[Learn more](https://developer.mozilla.org/en-US/docs/Web/API/IntersectionObserver/root) [Learn more](https://developer.mozilla.org/docs/Web/API/IntersectionObserver/root)
### unoptimized ### unoptimized
@ -462,7 +462,7 @@ module.exports = {
### Image Sizes ### Image Sizes
You can specify a list of image widths using the `images.imageSizes` property in your `next.config.js` file. These widths are concatenated with the array of [device sizes](#device-sizes) to form the full array of sizes used to generate image [srcset](https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/srcset)s. You can specify a list of image widths using the `images.imageSizes` property in your `next.config.js` file. These widths are concatenated with the array of [device sizes](#device-sizes) to form the full array of sizes used to generate image [srcset](https://developer.mozilla.org/docs/Web/API/HTMLImageElement/srcset)s.
The reason there are two separate lists is that imageSizes is only used for images which provide a [`sizes`](#sizes) prop, which indicates that the image is less than the full width of the screen. **Therefore, the sizes in imageSizes should all be smaller than the smallest size in deviceSizes.** The reason there are two separate lists is that imageSizes is only used for images which provide a [`sizes`](#sizes) prop, which indicates that the image is less than the full width of the screen. **Therefore, the sizes in imageSizes should all be smaller than the smallest size in deviceSizes.**

View file

@ -66,7 +66,7 @@ The `getServerSideProps` function should return an object with **any one of the
### `props` ### `props`
The `props` object is a key-value pair, where each value is received by the page component. It should be a [serializable object](https://developer.mozilla.org/en-US/docs/Glossary/Serialization) so that any props passed, could be serialized with [`JSON.stringify`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/JSON/stringify). The `props` object is a key-value pair, where each value is received by the page component. It should be a [serializable object](https://developer.mozilla.org/docs/Glossary/Serialization) so that any props passed, could be serialized with [`JSON.stringify`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/JSON/stringify).
```jsx ```jsx
export async function getServerSideProps(context) { export async function getServerSideProps(context) {

View file

@ -62,7 +62,7 @@ The `getStaticProps` function should return an object containing either `props`,
### `props` ### `props`
The `props` object is a key-value pair, where each value is received by the page component. It should be a [serializable object](https://developer.mozilla.org/en-US/docs/Glossary/Serialization) so that any props passed, could be serialized with [`JSON.stringify`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/JSON/stringify). The `props` object is a key-value pair, where each value is received by the page component. It should be a [serializable object](https://developer.mozilla.org/docs/Glossary/Serialization) so that any props passed, could be serialized with [`JSON.stringify`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/JSON/stringify).
```jsx ```jsx
export async function getStaticProps(context) { export async function getStaticProps(context) {

View file

@ -7,7 +7,7 @@ description: Learn about the server-only helpers for Middleware and Edge API Rou
## NextRequest ## NextRequest
The `NextRequest` object is an extension of the native [`Request`](https://developer.mozilla.org/en-US/docs/Web/API/Request) interface, with the following added methods and properties: The `NextRequest` object is an extension of the native [`Request`](https://developer.mozilla.org/docs/Web/API/Request) interface, with the following added methods and properties:
- `cookies` - A [RequestCookies](https://edge-runtime.vercel.app/packages/cookies#for-request) instance with cookies from the `Request`. It reads/mutates the `Cookie` header of the request. See also [Using cookies in Middleware](/docs/app/building-your-application/routing/middleware#using-cookies). - `cookies` - A [RequestCookies](https://edge-runtime.vercel.app/packages/cookies#for-request) instance with cookies from the `Request`. It reads/mutates the `Cookie` header of the request. See also [Using cookies in Middleware](/docs/app/building-your-application/routing/middleware#using-cookies).
@ -47,7 +47,7 @@ import type { NextRequest } from 'next/server'
## NextFetchEvent ## NextFetchEvent
The `NextFetchEvent` object extends the native [`FetchEvent`](https://developer.mozilla.org/en-US/docs/Web/API/FetchEvent) object, and includes the [`waitUntil()`](https://developer.mozilla.org/en-US/docs/Web/API/ExtendableEvent/waitUntil) method. The `NextFetchEvent` object extends the native [`FetchEvent`](https://developer.mozilla.org/docs/Web/API/FetchEvent) object, and includes the [`waitUntil()`](https://developer.mozilla.org/docs/Web/API/ExtendableEvent/waitUntil) method.
The `waitUntil()` method can be used to prolong the execution of the function if you have other background work to make. The `waitUntil()` method can be used to prolong the execution of the function if you have other background work to make.
@ -75,7 +75,7 @@ import type { NextFetchEvent } from 'next/server'
## NextResponse ## NextResponse
The `NextResponse` class extends the native [`Response`](https://developer.mozilla.org/en-US/docs/Web/API/Response) interface, with the following: The `NextResponse` class extends the native [`Response`](https://developer.mozilla.org/docs/Web/API/Response) interface, with the following:
### Public Methods ### Public Methods
@ -157,7 +157,7 @@ The `redirect()` method uses a `307` by default, instead of a `302` temporary re
If you want to cause a `GET` response to a `POST` request, use `303`. If you want to cause a `GET` response to a `POST` request, use `303`.
[Learn more](https://developer.mozilla.org/en-US/docs/Web/HTTP/Redirections) about HTTP Redirects. [Learn more](https://developer.mozilla.org/docs/Web/HTTP/Redirections) about HTTP Redirects.
### How do I access Environment Variables? ### How do I access Environment Variables?

View file

@ -74,7 +74,7 @@ router.push(url, as, options)
- [`shallow`](/docs/pages/building-your-application/routing/linking-and-navigating#shallow-routing): Update the path of the current page without rerunning [`getStaticProps`](/docs/pages/building-your-application/data-fetching/get-static-props), [`getServerSideProps`](/docs/pages/building-your-application/data-fetching/get-server-side-props) or [`getInitialProps`](/docs/pages/api-reference/functions/get-initial-props). Defaults to `false` - [`shallow`](/docs/pages/building-your-application/routing/linking-and-navigating#shallow-routing): Update the path of the current page without rerunning [`getStaticProps`](/docs/pages/building-your-application/data-fetching/get-static-props), [`getServerSideProps`](/docs/pages/building-your-application/data-fetching/get-server-side-props) or [`getInitialProps`](/docs/pages/api-reference/functions/get-initial-props). Defaults to `false`
- `locale` - Optional string, indicates locale of the new page - `locale` - Optional string, indicates locale of the new page
> 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. > You don't need to use `router.push` for external URLs. [window.location](https://developer.mozilla.org/docs/Web/API/Window/location) is better suited for those cases.
Navigating to `pages/about.js`, which is a predefined route: Navigating to `pages/about.js`, which is a predefined route:
@ -283,7 +283,7 @@ export default function Login() {
### router.beforePopState ### router.beforePopState
In some cases (for example, if using a [Custom Server](/docs/pages/building-your-application/configuring/custom-server)), you may wish to listen to [popstate](https://developer.mozilla.org/en-US/docs/Web/Events/popstate) and do something before the router acts on it. In some cases (for example, if using a [Custom Server](/docs/pages/building-your-application/configuring/custom-server)), you may wish to listen to [popstate](https://developer.mozilla.org/docs/Web/Events/popstate) and do something before the router acts on it.
```js ```js
router.beforePopState(cb) router.beforePopState(cb)

View file

@ -30,5 +30,5 @@ For example, this plugin helps ensure you add alt text to `img` tags, use correc
- [WebAIM WCAG checklist](https://webaim.org/standards/wcag/checklist) - [WebAIM WCAG checklist](https://webaim.org/standards/wcag/checklist)
- [WCAG 2.1 Guidelines](https://www.w3.org/TR/WCAG21/) - [WCAG 2.1 Guidelines](https://www.w3.org/TR/WCAG21/)
- [The A11y Project](https://www.a11yproject.com/) - [The A11y Project](https://www.a11yproject.com/)
- Check [color contrast ratios](https://developer.mozilla.org/en-US/docs/Web/Accessibility/Understanding_WCAG/Perceivable/Color_contrast) between foreground and background elements - Check [color contrast ratios](https://developer.mozilla.org/docs/Web/Accessibility/Understanding_WCAG/Perceivable/Color_contrast) between foreground and background elements
- Use [`prefers-reduced-motion`](https://web.dev/prefers-reduced-motion/) when working with animations - Use [`prefers-reduced-motion`](https://web.dev/prefers-reduced-motion/) when working with animations

View file

@ -31,9 +31,9 @@ If you would like to target specific browsers or features, Next.js supports [Bro
We inject [widely used polyfills](https://github.com/vercel/next.js/blob/canary/packages/next-polyfill-nomodule/src/index.js), including: We inject [widely used polyfills](https://github.com/vercel/next.js/blob/canary/packages/next-polyfill-nomodule/src/index.js), including:
- [**fetch()**](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API) — Replacing: `whatwg-fetch` and `unfetch`. - [**fetch()**](https://developer.mozilla.org/docs/Web/API/Fetch_API) — Replacing: `whatwg-fetch` and `unfetch`.
- [**URL**](https://developer.mozilla.org/en-US/docs/Web/API/URL) — Replacing: the [`url` package (Node.js API)](https://nodejs.org/api/url.html). - [**URL**](https://developer.mozilla.org/docs/Web/API/URL) — Replacing: the [`url` package (Node.js API)](https://nodejs.org/api/url.html).
- [**Object.assign()**](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/assign) — Replacing: `object-assign`, `object.assign`, and `core-js/object/assign`. - [**Object.assign()**](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object/assign) — Replacing: `object-assign`, `object.assign`, and `core-js/object/assign`.
If any of your dependencies includes these polyfills, theyll be eliminated automatically from the production build to avoid duplication. If any of your dependencies includes these polyfills, theyll be eliminated automatically from the production build to avoid duplication.

View file

@ -28,7 +28,7 @@ body {
} }
``` ```
Create a [`pages/_app.js` file](/docs/pages/building-your-application/routing/custom-app) if not already present. Then [`import`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import) the [`styles.css` file](/docs/pages/building-your-application/styling/css-modules). Create a [`pages/_app.js` file](/docs/pages/building-your-application/routing/custom-app) if not already present. Then [`import`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/import) the [`styles.css` file](/docs/pages/building-your-application/styling/css-modules).
```jsx filename="pages/_app.js" ```jsx filename="pages/_app.js"
import '../styles.css' import '../styles.css'

View file

@ -10,7 +10,7 @@ Specifically, the following APIs are not supported:
- `eval()` - `eval()`
- `new Function()` - `new Function()`
- `WebAssembly.compile` - `WebAssembly.compile`
- `WebAssembly.instantiate` with [a buffer parameter](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/WebAssembly/instantiate#primary_overload_%E2%80%94_taking_wasm_binary_code) - `WebAssembly.instantiate` with [a buffer parameter](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/WebAssembly/instantiate#primary_overload_%E2%80%94_taking_wasm_binary_code)
## Possible Ways to Fix It ## Possible Ways to Fix It

View file

@ -30,5 +30,5 @@ export default function handler(req, res) {
## Useful Links ## Useful Links
- [204 status code documentation](https://developer.mozilla.org/en-US/docs/Web/HTTP/Status/204) - [204 status code documentation](https://developer.mozilla.org/docs/Web/HTTP/Status/204)
- [304 status code documentation](https://developer.mozilla.org/en-US/docs/Web/HTTP/Status/304) - [304 status code documentation](https://developer.mozilla.org/docs/Web/HTTP/Status/304)

View file

@ -23,9 +23,9 @@ There are two required properties:
### `paths` ### `paths`
This property is an [Array](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array) of URLs ("paths") that should be statically generated at build-time. The returned paths must match the dynamic route shape. This property is an [Array](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array) of URLs ("paths") that should be statically generated at build-time. The returned paths must match the dynamic route shape.
- You may return a [String](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String) or an [Object](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object) that explicitly defines all URL `params`. - You may return a [String](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String) or an [Object](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object) that explicitly defines all URL `params`.
```js filename="pages/blog/[slug].js" ```js filename="pages/blog/[slug].js"
export async function getStaticPaths() { export async function getStaticPaths() {
@ -43,7 +43,7 @@ This property is an [Array](https://developer.mozilla.org/en-US/docs/Web/JavaScr
### `fallback` ### `fallback`
This property can be a [Boolean](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Boolean), specifying whether or not a fallback version of this page should be generated, or a string `'blocking'` to wait for the generation: This property can be a [Boolean](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Boolean), specifying whether or not a fallback version of this page should be generated, or a string `'blocking'` to wait for the generation:
- Enabling `fallback` (via `true`) allows you to return a subset of all the possible paths that should be statically generated. At runtime, Next.js will statically generate the remaining paths the **first time they are requested**. Consecutive calls to the path will be served as-if it was statically generated at build-time. This reduces build times when dealing with thousands or millions of pages. - Enabling `fallback` (via `true`) allows you to return a subset of all the possible paths that should be statically generated. At runtime, Next.js will statically generate the remaining paths the **first time they are requested**. Consecutive calls to the path will be served as-if it was statically generated at build-time. This reduces build times when dealing with thousands or millions of pages.
- Disabling `fallback` (via `false`) requires you return the full collection of paths you would like to statically generate at build-time. At runtime, any path that was not generated at build-time **will 404**. - Disabling `fallback` (via `false`) requires you return the full collection of paths you would like to statically generate at build-time. At runtime, any path that was not generated at build-time **will 404**.

View file

@ -8,7 +8,7 @@ Compiling WASM binaries dynamically is not allowed in Middlewares. Specifically,
the following APIs are not supported: the following APIs are not supported:
- `WebAssembly.compile` - `WebAssembly.compile`
- `WebAssembly.instantiate` with [a buffer parameter](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/WebAssembly/instantiate#primary_overload_%E2%80%94_taking_wasm_binary_code) - `WebAssembly.instantiate` with [a buffer parameter](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/WebAssembly/instantiate#primary_overload_%E2%80%94_taking_wasm_binary_code)
## Possible Ways to Fix It ## Possible Ways to Fix It

View file

@ -36,5 +36,5 @@ You can also pass directly a string containing a valid absolute URL.
## Useful Links ## Useful Links
- [URL Documentation](https://developer.mozilla.org/en-US/docs/Web/API/URL) - [URL Documentation](https://developer.mozilla.org/docs/Web/API/URL)
- [Response Documentation](https://developer.mozilla.org/en-US/docs/Web/API/Response) - [Response Documentation](https://developer.mozilla.org/docs/Web/API/Response)

View file

@ -23,7 +23,7 @@ export function middleware(request: NextRequest) {
## Possible Ways to Fix It ## Possible Ways to Fix It
You can use [URLPattern](https://developer.mozilla.org/en-US/docs/Web/API/URLPattern) instead to have the same behavior: You can use [URLPattern](https://developer.mozilla.org/docs/Web/API/URLPattern) instead to have the same behavior:
```ts filename="middleware.ts" ```ts filename="middleware.ts"
import { NextRequest, NextResponse } from 'next/server' import { NextRequest, NextResponse } from 'next/server'

View file

@ -197,7 +197,7 @@ export default async function handler(req: NextRequest) {
### Explanation ### Explanation
Based on beta feedback, we are changing the Cookies API in `NextRequest` and `NextResponse` to align more to a `get`/`set` model. The `Cookies` API extends Map, including methods like [entries](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Map/entries) and [values](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Map/entries). Based on beta feedback, we are changing the Cookies API in `NextRequest` and `NextResponse` to align more to a `get`/`set` model. The `Cookies` API extends Map, including methods like [entries](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Map/entries) and [values](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Map/entries).
### How to upgrade ### How to upgrade
@ -312,7 +312,7 @@ export function middleware(request: NextRequest) {
### Summary of changes ### Summary of changes
- Use [`URLPattern`](https://developer.mozilla.org/en-US/docs/Web/API/URLPattern) to check if a Middleware is being invoked for a certain page match - Use [`URLPattern`](https://developer.mozilla.org/docs/Web/API/URLPattern) to check if a Middleware is being invoked for a certain page match
### Explanation ### Explanation
@ -322,7 +322,7 @@ To make page and asset matching more accurate, we are now using the web standard
### How to upgrade ### How to upgrade
Use [`URLPattern`](https://developer.mozilla.org/en-US/docs/Web/API/URLPattern) to check if a Middleware is being invoked for a certain page match. Use [`URLPattern`](https://developer.mozilla.org/docs/Web/API/URLPattern) to check if a Middleware is being invoked for a certain page match.
#### Before #### Before

View file

@ -12,5 +12,5 @@ Remove the `NextResponse.next()` and replace it with a correct response handler.
## Useful Links ## Useful Links
- [`Response`](https://developer.mozilla.org/en-US/docs/Web/API/Response) - [`Response`](https://developer.mozilla.org/docs/Web/API/Response)
- [`NextResponse`](/docs/pages/api-reference/functions/next-server#nextresponse) - [`NextResponse`](/docs/pages/api-reference/functions/next-server#nextresponse)

View file

@ -16,7 +16,7 @@ Router.onAppUpdated = function (nextRoute) {
In this hook, you can't wait for a network request or a promise to get resolved. And you can't block the page navigation. So, the things you can do is limited. In this hook, you can't wait for a network request or a promise to get resolved. And you can't block the page navigation. So, the things you can do is limited.
One real use of this hook is to persist your application state to local-storage before the page navigation. For that, you can use the [`window.onbeforeunload`](https://developer.mozilla.org/en-US/docs/Web/API/WindowEventHandlers/onbeforeunload) hook instead. One real use of this hook is to persist your application state to local-storage before the page navigation. For that, you can use the [`window.onbeforeunload`](https://developer.mozilla.org/docs/Web/API/WindowEventHandlers/onbeforeunload) hook instead.
This is code for that: This is code for that:

View file

@ -12,7 +12,7 @@ However, the Edge Runtime does not support [Node.js APIs and globals](/docs/page
When running Next.js locally with `next dev`, your application will show in the console, and in your browser, which file is importing and using an unsupported module. This module must be avoided: either by not importing it, or by replacing it with a polyfill. When running Next.js locally with `next dev`, your application will show in the console, and in your browser, which file is importing and using an unsupported module. This module must be avoided: either by not importing it, or by replacing it with a polyfill.
For example, you might replace the Node.js `crypto` module with the [Web Crypto API](https://developer.mozilla.org/en-US/docs/Web/API/Web_Crypto_API). For example, you might replace the Node.js `crypto` module with the [Web Crypto API](https://developer.mozilla.org/docs/Web/API/Web_Crypto_API).
## Useful Links ## Useful Links

View file

@ -2,7 +2,7 @@
Next.js ships with [API routes](https://nextjs.org/docs/api-routes/introduction) which provides an easy solution to build your own `API`. Next.js ships with [API routes](https://nextjs.org/docs/api-routes/introduction) which provides an easy solution to build your own `API`.
This example shows how to create an `API` endpoint with [CORS](https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS) headers, using the [cors](https://github.com/expressjs/cors) package. This example shows how to create an `API` endpoint with [CORS](https://developer.mozilla.org/docs/Web/HTTP/CORS) headers, using the [cors](https://github.com/expressjs/cors) package.
## Deploy your own ## Deploy your own

View file

@ -91,7 +91,7 @@ ${componentFiles
// Next.js 'dynamic(...)' returns common 'React.ComponentType' while // Next.js 'dynamic(...)' returns common 'React.ComponentType' while
// 'import('...')' returns 'Promise' that will resolve module. // 'import('...')' returns 'Promise' that will resolve module.
// componentModule uses 'import(...)' because primary usage of it to get not only 'React Component' (default export) but all named exports. // componentModule uses 'import(...)' because primary usage of it to get not only 'React Component' (default export) but all named exports.
// See https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import#dynamic_imports // See https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/import#dynamic_imports
// componentFactory uses 'dynamic(...)' because primary usage of it to render 'React Component' (default export). // componentFactory uses 'dynamic(...)' because primary usage of it to render 'React Component' (default export).
// See https://nextjs.org/docs/advanced-features/dynamic-import // See https://nextjs.org/docs/advanced-features/dynamic-import
// At the end you will have single preloaded script for each lazy loading module. // At the end you will have single preloaded script for each lazy loading module.

View file

@ -1,6 +1,6 @@
# Server-Side Rendering Caching Headers # Server-Side Rendering Caching Headers
This example uses [`stale-while-revalidate`](https://web.dev/stale-while-revalidate/) [cache-control headers](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Cache-Control) in combination with `getServerSideProps` for server-rendering. This example uses [`stale-while-revalidate`](https://web.dev/stale-while-revalidate/) [cache-control headers](https://developer.mozilla.org/docs/Web/HTTP/Headers/Cache-Control) in combination with `getServerSideProps` for server-rendering.
`pages/index.tsx` uses `getServerSideProps` to forward the request header to the React component, as well as setting a response header. This `cache-control` header uses `stale-while-revalidate` to cache the server response. `pages/index.tsx` uses `getServerSideProps` to forward the request header to the React component, as well as setting a response header. This `cache-control` header uses `stale-while-revalidate` to cache the server response.

View file

@ -19,7 +19,7 @@ export default function VideoPlayer({ src }) {
hls.attachMedia(video) hls.attachMedia(video)
} else { } else {
console.error( console.error(
'This is an old browser that does not support MSE https://developer.mozilla.org/en-US/docs/Web/API/Media_Source_Extensions_API' 'This is an old browser that does not support MSE https://developer.mozilla.org/docs/Web/API/Media_Source_Extensions_API'
) )
} }
}, [src, videoRef]) }, [src, videoRef])

View file

@ -39,7 +39,7 @@ export default async function fetchJson<JSON = unknown>(
const data = await response.json() const data = await response.json()
// response.ok is true when res.status is 2xx // response.ok is true when res.status is 2xx
// https://developer.mozilla.org/en-US/docs/Web/API/Response/ok // https://developer.mozilla.org/docs/Web/API/Response/ok
if (response.ok) { if (response.ok) {
return data return data
} }

View file

@ -5,7 +5,7 @@ const BOLD_WEIGHT = 700
/** /**
* Convert the weight string to a number so it can be used for comparison. * Convert the weight string to a number so it can be used for comparison.
* Weights can be defined as a number, 'normal' or 'bold'. https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-weight * Weights can be defined as a number, 'normal' or 'bold'. https://developer.mozilla.org/docs/Web/CSS/@font-face/font-weight
*/ */
function getWeightNumber(weight: string) { function getWeightNumber(weight: string) {
return weight === 'normal' return weight === 'normal'

View file

@ -85,7 +85,7 @@ function getShadowHost() {
element = element.parentNode element = element.parentNode
} }
// https://developer.mozilla.org/en-US/docs/Web/API/Node.nodeType // https://developer.mozilla.org/docs/Web/API/Node.nodeType
// NOTE: Firefox 34 does not expose ShadowRoot.host (but 37 does) // NOTE: Firefox 34 does not expose ShadowRoot.host (but 37 does)
if ( if (
container.nodeType === container.DOCUMENT_FRAGMENT_NODE && container.nodeType === container.DOCUMENT_FRAGMENT_NODE &&
@ -433,7 +433,7 @@ function cssShadowPiercingDeepCombinator() {
var gif = var gif =
'data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7' 'data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7'
// https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#attr-usemap // https://developer.mozilla.org/docs/Web/HTML/Element/img#attr-usemap
var focusAreaImgTabindex = { var focusAreaImgTabindex = {
element: 'div', element: 'div',
mutate: function mutate(element) { mutate: function mutate(element) {
@ -448,7 +448,7 @@ var focusAreaImgTabindex = {
}, },
} }
// https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#attr-usemap // https://developer.mozilla.org/docs/Web/HTML/Element/img#attr-usemap
var focusAreaTabindex = { var focusAreaTabindex = {
element: 'div', element: 'div',
mutate: function mutate(element) { mutate: function mutate(element) {
@ -474,7 +474,7 @@ var focusAreaTabindex = {
}, },
} }
// https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#attr-usemap // https://developer.mozilla.org/docs/Web/HTML/Element/img#attr-usemap
var focusAreaWithoutHref = { var focusAreaWithoutHref = {
element: 'div', element: 'div',
mutate: function mutate(element) { mutate: function mutate(element) {
@ -515,7 +515,7 @@ var invalidGif =
'data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///ZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZ' 'data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///ZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZ'
// NOTE: https://github.com/medialize/ally.js/issues/35 // NOTE: https://github.com/medialize/ally.js/issues/35
// https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#attr-usemap // https://developer.mozilla.org/docs/Web/HTML/Element/img#attr-usemap
var focusBrokenImageMap = { var focusBrokenImageMap = {
element: 'div', element: 'div',
mutate: function mutate(element) { mutate: function mutate(element) {
@ -587,7 +587,7 @@ var focusFormDisabled = {
// NOTE: https://github.com/medialize/ally.js/issues/35 // NOTE: https://github.com/medialize/ally.js/issues/35
// fixes https://github.com/medialize/ally.js/issues/20 // fixes https://github.com/medialize/ally.js/issues/20
// https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#attr-ismap // https://developer.mozilla.org/docs/Web/HTML/Element/img#attr-ismap
var focusImgIsmap = { var focusImgIsmap = {
element: 'a', element: 'a',
mutate: function mutate(element) { mutate: function mutate(element) {
@ -598,7 +598,7 @@ var focusImgIsmap = {
} }
// NOTE: https://github.com/medialize/ally.js/issues/35 // NOTE: https://github.com/medialize/ally.js/issues/35
// https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#attr-usemap // https://developer.mozilla.org/docs/Web/HTML/Element/img#attr-usemap
var focusImgUsemapTabindex = { var focusImgUsemapTabindex = {
element: 'div', element: 'div',
mutate: function mutate(element) { mutate: function mutate(element) {
@ -1417,7 +1417,7 @@ function isFocusRelevantRules() {
} }
} else if (hasCssOverflowScroll(style)) { } else if (hasCssOverflowScroll(style)) {
// Firefox requires proper overflow setting, IE does not necessarily // Firefox requires proper overflow setting, IE does not necessarily
// https://developer.mozilla.org/en-US/docs/Web/CSS/overflow // https://developer.mozilla.org/docs/Web/CSS/overflow
return true return true
} }
} }
@ -1584,7 +1584,7 @@ function getFrameElement(element) {
} }
try { try {
// see https://developer.mozilla.org/en-US/docs/Web/API/Window/frameElement // see https://developer.mozilla.org/docs/Web/API/Window/frameElement
// does not work within <embed> anywhere, and not within in <object> in IE // does not work within <embed> anywhere, and not within in <object> in IE
return _window.frameElement || findDocumentHostElement(_window) return _window.frameElement || findDocumentHostElement(_window)
} catch (e) { } catch (e) {
@ -1736,7 +1736,7 @@ var isVisible = isVisibleRules.except({})
function getMapByName(name, _document) { function getMapByName(name, _document) {
// apparently getElementsByName() also considers id attribute in IE & opera // apparently getElementsByName() also considers id attribute in IE & opera
// https://developer.mozilla.org/en-US/docs/Web/API/Document/getElementsByName // https://developer.mozilla.org/docs/Web/API/Document/getElementsByName
var map = _document.querySelector('map[name="' + cssEscape(name) + '"]') var map = _document.querySelector('map[name="' + cssEscape(name) + '"]')
return map || null return map || null
} }
@ -1754,7 +1754,7 @@ function getImageOfArea(element) {
// HTML5 specifies HTMLMapElement.images to be an HTMLCollection of all // HTML5 specifies HTMLMapElement.images to be an HTMLCollection of all
// <img> and <object> referencing the <map> element, but no browser implements this // <img> and <object> referencing the <map> element, but no browser implements this
// https://www.w3.org/TR/html5/embedded-content-0.html#the-map-element // https://www.w3.org/TR/html5/embedded-content-0.html#the-map-element
// https://developer.mozilla.org/en-US/docs/Web/API/HTMLMapElement // https://developer.mozilla.org/docs/Web/API/HTMLMapElement
// the image must be valid and loaded for the map to take effect // the image must be valid and loaded for the map to take effect
var _document = getDocument(element) var _document = getDocument(element)
return ( return (
@ -1765,8 +1765,8 @@ function getImageOfArea(element) {
var supports$2 = void 0 var supports$2 = void 0
// https://developer.mozilla.org/en-US/docs/Web/HTML/Element/map // https://developer.mozilla.org/docs/Web/HTML/Element/map
// https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#attr-usemap // https://developer.mozilla.org/docs/Web/HTML/Element/img#attr-usemap
// https://github.com/jquery/jquery-ui/blob/master/ui/core.js#L88-L107 // https://github.com/jquery/jquery-ui/blob/master/ui/core.js#L88-L107
function isValidArea(context) { function isValidArea(context) {
if (!supports$2) { if (!supports$2) {
@ -1816,7 +1816,7 @@ function isValidArea(context) {
) )
} }
// https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#attr-usemap // https://developer.mozilla.org/docs/Web/HTML/Element/img#attr-usemap
var childOfInteractive = getParents({ context: img }) var childOfInteractive = getParents({ context: img })
.slice(1) .slice(1)
.some(function (_element) { .some(function (_element) {
@ -2170,7 +2170,7 @@ isFocusableRules.except = function () {
var isFocusable = isFocusableRules.except({}) var isFocusable = isFocusableRules.except({})
function createFilter(condition) { function createFilter(condition) {
// see https://developer.mozilla.org/en-US/docs/Web/API/NodeFilter // see https://developer.mozilla.org/docs/Web/API/NodeFilter
var filter = function filter(node) { var filter = function filter(node) {
if (node.shadowRoot) { if (node.shadowRoot) {
// return ShadowRoot elements regardless of them being focusable, // return ShadowRoot elements regardless of them being focusable,
@ -2210,7 +2210,7 @@ function queryFocusableStrict() {
}) })
var _document = getDocument(context) var _document = getDocument(context)
// see https://developer.mozilla.org/en-US/docs/Web/API/Document/createTreeWalker // see https://developer.mozilla.org/docs/Web/API/Document/createTreeWalker
var walker = _document.createTreeWalker( var walker = _document.createTreeWalker(
// root element to start search in // root element to start search in
context, context,
@ -3105,7 +3105,7 @@ function sortShadowed(elements, context, sortElements) {
} }
function sortTabindex(elements) { function sortTabindex(elements) {
// https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement.tabIndex // https://developer.mozilla.org/docs/Web/API/HTMLElement.tabIndex
// elements with tabIndex "0" (including tabbableElements without tabIndex) should be navigated in the order they appear. // elements with tabIndex "0" (including tabbableElements without tabIndex) should be navigated in the order they appear.
// elements with a positive tabIndex: // elements with a positive tabIndex:
// Elements that have identical tabIndexes should be navigated in the order they appear. // Elements that have identical tabIndexes should be navigated in the order they appear.
@ -3119,7 +3119,7 @@ function sortTabindex(elements) {
// see http://blog.rodneyrehm.de/archives/14-Sorting-Were-Doing-It-Wrong.html#stability // see http://blog.rodneyrehm.de/archives/14-Sorting-Were-Doing-It-Wrong.html#stability
// NOTE: compareDocumentPosition seemed like more overhead than just sorting this with buckets // NOTE: compareDocumentPosition seemed like more overhead than just sorting this with buckets
// https://developer.mozilla.org/en-US/docs/Web/API/Node.compareDocumentPosition // https://developer.mozilla.org/docs/Web/API/Node.compareDocumentPosition
var map = {} var map = {}
var indexes = [] var indexes = []
@ -3389,7 +3389,7 @@ function keyBinding(text) {
} }
// Node.compareDocumentPosition is available since IE9 // Node.compareDocumentPosition is available since IE9
// see https://developer.mozilla.org/en-US/docs/Web/API/Node.compareDocumentPosition // see https://developer.mozilla.org/docs/Web/API/Node.compareDocumentPosition
// callback returns true when element is contained by parent or is the parent suited for use with Array.some() // callback returns true when element is contained by parent or is the parent suited for use with Array.some()
/* /*

View file

@ -236,7 +236,7 @@ fn get_distance_from_normal_weight(weight: &Option<FontWeight>) -> Result<f64> {
/// From https://github.com/vercel/next.js/blob/dbdf47cf617b8d7213ffe1ff28318ea8eb88c623/packages/font/src/local/pick-font-file-for-fallback-generation.ts#L6 /// From https://github.com/vercel/next.js/blob/dbdf47cf617b8d7213ffe1ff28318ea8eb88c623/packages/font/src/local/pick-font-file-for-fallback-generation.ts#L6
/// ///
/// Convert the weight string to a number so it can be used for comparison. /// Convert the weight string to a number so it can be used for comparison.
/// Weights can be defined as a number, 'normal' or 'bold'. https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-weight /// Weights can be defined as a number, 'normal' or 'bold'. https://developer.mozilla.org/docs/Web/CSS/@font-face/font-weight
fn parse_weight_string(weight_str: &str) -> Result<f64> { fn parse_weight_string(weight_str: &str) -> Result<f64> {
if weight_str == "normal" { if weight_str == "normal" {
Ok(NORMAL_WEIGHT) Ok(NORMAL_WEIGHT)

View file

@ -3,7 +3,7 @@ import type { ReadonlyURLSearchParams } from 'next/navigation'
declare module 'next/navigation' { declare module 'next/navigation' {
/** /**
* Get a read-only URLSearchParams object. For example searchParams.get('foo') would return 'bar' when ?foo=bar * Get a read-only URLSearchParams object. For example searchParams.get('foo') would return 'bar' when ?foo=bar
* Learn more about URLSearchParams here: https://developer.mozilla.org/en-US/docs/Web/API/URLSearchParams * Learn more about URLSearchParams here: https://developer.mozilla.org/docs/Web/API/URLSearchParams
* *
* If used from `pages/`, the hook may return `null` when the router is not * If used from `pages/`, the hook may return `null` when the router is not
* ready. * ready.

View file

@ -66,7 +66,7 @@ export class ReadonlyURLSearchParams {
/** /**
* Get a read-only URLSearchParams object. For example searchParams.get('foo') would return 'bar' when ?foo=bar * Get a read-only URLSearchParams object. For example searchParams.get('foo') would return 'bar' when ?foo=bar
* Learn more about URLSearchParams here: https://developer.mozilla.org/en-US/docs/Web/API/URLSearchParams * Learn more about URLSearchParams here: https://developer.mozilla.org/docs/Web/API/URLSearchParams
*/ */
export function useSearchParams(): ReadonlyURLSearchParams { export function useSearchParams(): ReadonlyURLSearchParams {
clientHookInServerComponentError('useSearchParams') clientHookInServerComponentError('useSearchParams')

View file

@ -85,7 +85,7 @@ function getShadowHost() {
element = element.parentNode element = element.parentNode
} }
// https://developer.mozilla.org/en-US/docs/Web/API/Node.nodeType // https://developer.mozilla.org/docs/Web/API/Node.nodeType
// NOTE: Firefox 34 does not expose ShadowRoot.host (but 37 does) // NOTE: Firefox 34 does not expose ShadowRoot.host (but 37 does)
if ( if (
container.nodeType === container.DOCUMENT_FRAGMENT_NODE && container.nodeType === container.DOCUMENT_FRAGMENT_NODE &&
@ -433,7 +433,7 @@ function cssShadowPiercingDeepCombinator() {
var gif = var gif =
'data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7' 'data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7'
// https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#attr-usemap // https://developer.mozilla.org/docs/Web/HTML/Element/img#attr-usemap
var focusAreaImgTabindex = { var focusAreaImgTabindex = {
element: 'div', element: 'div',
mutate: function mutate(element) { mutate: function mutate(element) {
@ -448,7 +448,7 @@ var focusAreaImgTabindex = {
}, },
} }
// https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#attr-usemap // https://developer.mozilla.org/docs/Web/HTML/Element/img#attr-usemap
var focusAreaTabindex = { var focusAreaTabindex = {
element: 'div', element: 'div',
mutate: function mutate(element) { mutate: function mutate(element) {
@ -474,7 +474,7 @@ var focusAreaTabindex = {
}, },
} }
// https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#attr-usemap // https://developer.mozilla.org/docs/Web/HTML/Element/img#attr-usemap
var focusAreaWithoutHref = { var focusAreaWithoutHref = {
element: 'div', element: 'div',
mutate: function mutate(element) { mutate: function mutate(element) {
@ -515,7 +515,7 @@ var invalidGif =
'data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///ZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZ' 'data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///ZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZ'
// NOTE: https://github.com/medialize/ally.js/issues/35 // NOTE: https://github.com/medialize/ally.js/issues/35
// https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#attr-usemap // https://developer.mozilla.org/docs/Web/HTML/Element/img#attr-usemap
var focusBrokenImageMap = { var focusBrokenImageMap = {
element: 'div', element: 'div',
mutate: function mutate(element) { mutate: function mutate(element) {
@ -587,7 +587,7 @@ var focusFormDisabled = {
// NOTE: https://github.com/medialize/ally.js/issues/35 // NOTE: https://github.com/medialize/ally.js/issues/35
// fixes https://github.com/medialize/ally.js/issues/20 // fixes https://github.com/medialize/ally.js/issues/20
// https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#attr-ismap // https://developer.mozilla.org/docs/Web/HTML/Element/img#attr-ismap
var focusImgIsmap = { var focusImgIsmap = {
element: 'a', element: 'a',
mutate: function mutate(element) { mutate: function mutate(element) {
@ -598,7 +598,7 @@ var focusImgIsmap = {
} }
// NOTE: https://github.com/medialize/ally.js/issues/35 // NOTE: https://github.com/medialize/ally.js/issues/35
// https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#attr-usemap // https://developer.mozilla.org/docs/Web/HTML/Element/img#attr-usemap
var focusImgUsemapTabindex = { var focusImgUsemapTabindex = {
element: 'div', element: 'div',
mutate: function mutate(element) { mutate: function mutate(element) {
@ -1417,7 +1417,7 @@ function isFocusRelevantRules() {
} }
} else if (hasCssOverflowScroll(style)) { } else if (hasCssOverflowScroll(style)) {
// Firefox requires proper overflow setting, IE does not necessarily // Firefox requires proper overflow setting, IE does not necessarily
// https://developer.mozilla.org/en-US/docs/Web/CSS/overflow // https://developer.mozilla.org/docs/Web/CSS/overflow
return true return true
} }
} }
@ -1584,7 +1584,7 @@ function getFrameElement(element) {
} }
try { try {
// see https://developer.mozilla.org/en-US/docs/Web/API/Window/frameElement // see https://developer.mozilla.org/docs/Web/API/Window/frameElement
// does not work within <embed> anywhere, and not within in <object> in IE // does not work within <embed> anywhere, and not within in <object> in IE
return _window.frameElement || findDocumentHostElement(_window) return _window.frameElement || findDocumentHostElement(_window)
} catch (e) { } catch (e) {
@ -1736,7 +1736,7 @@ var isVisible = isVisibleRules.except({})
function getMapByName(name, _document) { function getMapByName(name, _document) {
// apparently getElementsByName() also considers id attribute in IE & opera // apparently getElementsByName() also considers id attribute in IE & opera
// https://developer.mozilla.org/en-US/docs/Web/API/Document/getElementsByName // https://developer.mozilla.org/docs/Web/API/Document/getElementsByName
var map = _document.querySelector('map[name="' + cssEscape(name) + '"]') var map = _document.querySelector('map[name="' + cssEscape(name) + '"]')
return map || null return map || null
} }
@ -1754,7 +1754,7 @@ function getImageOfArea(element) {
// HTML5 specifies HTMLMapElement.images to be an HTMLCollection of all // HTML5 specifies HTMLMapElement.images to be an HTMLCollection of all
// <img> and <object> referencing the <map> element, but no browser implements this // <img> and <object> referencing the <map> element, but no browser implements this
// https://www.w3.org/TR/html5/embedded-content-0.html#the-map-element // https://www.w3.org/TR/html5/embedded-content-0.html#the-map-element
// https://developer.mozilla.org/en-US/docs/Web/API/HTMLMapElement // https://developer.mozilla.org/docs/Web/API/HTMLMapElement
// the image must be valid and loaded for the map to take effect // the image must be valid and loaded for the map to take effect
var _document = getDocument(element) var _document = getDocument(element)
return ( return (
@ -1765,8 +1765,8 @@ function getImageOfArea(element) {
var supports$2 = void 0 var supports$2 = void 0
// https://developer.mozilla.org/en-US/docs/Web/HTML/Element/map // https://developer.mozilla.org/docs/Web/HTML/Element/map
// https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#attr-usemap // https://developer.mozilla.org/docs/Web/HTML/Element/img#attr-usemap
// https://github.com/jquery/jquery-ui/blob/master/ui/core.js#L88-L107 // https://github.com/jquery/jquery-ui/blob/master/ui/core.js#L88-L107
function isValidArea(context) { function isValidArea(context) {
if (!supports$2) { if (!supports$2) {
@ -1816,7 +1816,7 @@ function isValidArea(context) {
) )
} }
// https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#attr-usemap // https://developer.mozilla.org/docs/Web/HTML/Element/img#attr-usemap
var childOfInteractive = getParents({ context: img }) var childOfInteractive = getParents({ context: img })
.slice(1) .slice(1)
.some(function (_element) { .some(function (_element) {
@ -2170,7 +2170,7 @@ isFocusableRules.except = function () {
var isFocusable = isFocusableRules.except({}) var isFocusable = isFocusableRules.except({})
function createFilter(condition) { function createFilter(condition) {
// see https://developer.mozilla.org/en-US/docs/Web/API/NodeFilter // see https://developer.mozilla.org/docs/Web/API/NodeFilter
var filter = function filter(node) { var filter = function filter(node) {
if (node.shadowRoot) { if (node.shadowRoot) {
// return ShadowRoot elements regardless of them being focusable, // return ShadowRoot elements regardless of them being focusable,
@ -2210,7 +2210,7 @@ function queryFocusableStrict() {
}) })
var _document = getDocument(context) var _document = getDocument(context)
// see https://developer.mozilla.org/en-US/docs/Web/API/Document/createTreeWalker // see https://developer.mozilla.org/docs/Web/API/Document/createTreeWalker
var walker = _document.createTreeWalker( var walker = _document.createTreeWalker(
// root element to start search in // root element to start search in
context, context,
@ -3105,7 +3105,7 @@ function sortShadowed(elements, context, sortElements) {
} }
function sortTabindex(elements) { function sortTabindex(elements) {
// https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement.tabIndex // https://developer.mozilla.org/docs/Web/API/HTMLElement.tabIndex
// elements with tabIndex "0" (including tabbableElements without tabIndex) should be navigated in the order they appear. // elements with tabIndex "0" (including tabbableElements without tabIndex) should be navigated in the order they appear.
// elements with a positive tabIndex: // elements with a positive tabIndex:
// Elements that have identical tabIndexes should be navigated in the order they appear. // Elements that have identical tabIndexes should be navigated in the order they appear.
@ -3119,7 +3119,7 @@ function sortTabindex(elements) {
// see http://blog.rodneyrehm.de/archives/14-Sorting-Were-Doing-It-Wrong.html#stability // see http://blog.rodneyrehm.de/archives/14-Sorting-Were-Doing-It-Wrong.html#stability
// NOTE: compareDocumentPosition seemed like more overhead than just sorting this with buckets // NOTE: compareDocumentPosition seemed like more overhead than just sorting this with buckets
// https://developer.mozilla.org/en-US/docs/Web/API/Node.compareDocumentPosition // https://developer.mozilla.org/docs/Web/API/Node.compareDocumentPosition
var map = {} var map = {}
var indexes = [] var indexes = []
@ -3389,7 +3389,7 @@ function keyBinding(text) {
} }
// Node.compareDocumentPosition is available since IE9 // Node.compareDocumentPosition is available since IE9
// see https://developer.mozilla.org/en-US/docs/Web/API/Node.compareDocumentPosition // see https://developer.mozilla.org/docs/Web/API/Node.compareDocumentPosition
// callback returns true when element is contained by parent or is the parent suited for use with Array.some() // callback returns true when element is contained by parent or is the parent suited for use with Array.some()
/* /*

View file

@ -672,7 +672,7 @@ export default function Image({
let isLazy = let isLazy =
!priority && (loading === 'lazy' || typeof loading === 'undefined') !priority && (loading === 'lazy' || typeof loading === 'undefined')
if (src.startsWith('data:') || src.startsWith('blob:')) { if (src.startsWith('data:') || src.startsWith('blob:')) {
// https://developer.mozilla.org/en-US/docs/Web/HTTP/Basics_of_HTTP/Data_URIs // https://developer.mozilla.org/docs/Web/HTTP/Basics_of_HTTP/Data_URIs
unoptimized = true unoptimized = true
isLazy = false isLazy = false
} }

View file

@ -51,7 +51,7 @@ export type ItunesApp = {
} }
// Viewport meta structure // Viewport meta structure
// https://developer.mozilla.org/en-US/docs/Web/HTML/Viewport_meta_tag // https://developer.mozilla.org/docs/Web/HTML/Viewport_meta_tag
// intentionally leaving out user-scalable, use a string if you want that behavior // intentionally leaving out user-scalable, use a string if you want that behavior
export type Viewport = { export type Viewport = {
width?: string | number width?: string | number

View file

@ -69,7 +69,7 @@ interface Metadata extends DeprecatedMetadataFields {
description?: null | string description?: null | string
// Standard metadata names // Standard metadata names
// https://developer.mozilla.org/en-US/docs/Web/HTML/Element/meta/name // https://developer.mozilla.org/docs/Web/HTML/Element/meta/name
/** /**
* The application name. * The application name.
@ -191,12 +191,12 @@ interface Metadata extends DeprecatedMetadataFields {
*/ */
publisher?: null | string publisher?: null | string
// https://developer.mozilla.org/en-US/docs/Web/HTML/Element/meta/name#other_metadata_names // https://developer.mozilla.org/docs/Web/HTML/Element/meta/name#other_metadata_names
/** /**
* The robots setting for the document. * The robots setting for the document.
* *
* @see https://developer.mozilla.org/en-US/docs/Glossary/Robots.txt * @see https://developer.mozilla.org/docs/Glossary/Robots.txt
* @example * @example
* ```tsx * ```tsx
* "index, follow" * "index, follow"
@ -241,7 +241,7 @@ interface Metadata extends DeprecatedMetadataFields {
/** /**
* The icons for the document. Defaults to rel="icon". * The icons for the document. Defaults to rel="icon".
* *
* @see https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/rel#attr-icon * @see https://developer.mozilla.org/docs/Web/HTML/Attributes/rel#attr-icon
* @example * @example
* ```tsx * ```tsx
* "https://example.com/icon.png" * "https://example.com/icon.png"
@ -261,7 +261,7 @@ interface Metadata extends DeprecatedMetadataFields {
/** /**
* A web application manifest, as defined in the Web Application Manifest specification. * A web application manifest, as defined in the Web Application Manifest specification.
* *
* @see https://developer.mozilla.org/en-US/docs/Web/Manifest * @see https://developer.mozilla.org/docs/Web/Manifest
* @example * @example
* ```tsx * ```tsx
* "https://example.com/manifest.json" * "https://example.com/manifest.json"
@ -465,7 +465,7 @@ interface ResolvedMetadata extends DeprecatedMetadataFields {
description: null | string description: null | string
// Standard metadata names // Standard metadata names
// https://developer.mozilla.org/en-US/docs/Web/HTML/Element/meta/name // https://developer.mozilla.org/docs/Web/HTML/Element/meta/name
applicationName: null | string applicationName: null | string
authors: null | Array<Author> authors: null | Array<Author>
generator: null | string generator: null | string
@ -478,7 +478,7 @@ interface ResolvedMetadata extends DeprecatedMetadataFields {
creator: null | string creator: null | string
publisher: null | string publisher: null | string
// https://developer.mozilla.org/en-US/docs/Web/HTML/Element/meta/name#other_metadata_names // https://developer.mozilla.org/docs/Web/HTML/Element/meta/name#other_metadata_names
robots: null | ResolvedRobots robots: null | ResolvedRobots
// The canonical and alternate URLs for this location // The canonical and alternate URLs for this location

View file

@ -105,7 +105,7 @@ export type IconDescriptor = {
rel?: string rel?: string
media?: string media?: string
/** /**
* @see https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/fetchPriority * @see https://developer.mozilla.org/docs/Web/API/HTMLImageElement/fetchPriority
*/ */
fetchPriority?: 'high' | 'low' | 'auto' fetchPriority?: 'high' | 'low' | 'auto'
} }

View file

@ -70,7 +70,7 @@ export class WebNextResponse extends BaseNextResponse<WritableStream> {
} }
getHeaderValues(name: string): string[] | undefined { getHeaderValues(name: string): string[] | undefined {
// https://developer.mozilla.org/en-US/docs/Web/API/Headers/get#example // https://developer.mozilla.org/docs/Web/API/Headers/get#example
return this.getHeader(name) return this.getHeader(name)
?.split(',') ?.split(',')
.map((v) => v.trimStart()) .map((v) => v.trimStart())

View file

@ -571,7 +571,7 @@ export interface NextConfig extends Record<string, any> {
* Add `"crossorigin"` attribute to generated `<script>` elements generated by `<Head />` or `<NextScript />` components * Add `"crossorigin"` attribute to generated `<script>` elements generated by `<Head />` or `<NextScript />` components
* *
* *
* @see [`crossorigin` attribute documentation](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/crossorigin) * @see [`crossorigin` attribute documentation](https://developer.mozilla.org/docs/Web/HTML/Attributes/crossorigin)
*/ */
crossOrigin?: false | 'anonymous' | 'use-credentials' crossOrigin?: false | 'anonymous' | 'use-credentials'

View file

@ -278,7 +278,7 @@ Learn More: https://nextjs.org/docs/messages/edge-dynamic-code-evaluation`),
// instance if a WASM module is given. Utilize the fact to determine // instance if a WASM module is given. Utilize the fact to determine
// if the WASM code generation happens. // if the WASM code generation happens.
// //
// https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/WebAssembly/instantiate#primary_overload_%E2%80%94_taking_wasm_binary_code // https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/WebAssembly/instantiate#primary_overload_%E2%80%94_taking_wasm_binary_code
const instantiatedFromBuffer = result.hasOwnProperty('module') const instantiatedFromBuffer = result.hasOwnProperty('module')
const key = fn.toString() const key = fn.toString()

View file

@ -375,7 +375,7 @@ export function getImgProps(
let isLazy = let isLazy =
!priority && (loading === 'lazy' || typeof loading === 'undefined') !priority && (loading === 'lazy' || typeof loading === 'undefined')
if (!src || src.startsWith('data:') || src.startsWith('blob:')) { if (!src || src.startsWith('data:') || src.startsWith('blob:')) {
// https://developer.mozilla.org/en-US/docs/Web/HTTP/Basics_of_HTTP/Data_URIs // https://developer.mozilla.org/docs/Web/HTTP/Basics_of_HTTP/Data_URIs
unoptimized = true unoptimized = true
isLazy = false isLazy = false
} }

View file

@ -453,7 +453,7 @@ function fetchRetry(
// //
// > `fetch` wont send cookies, unless you set the credentials init // > `fetch` wont send cookies, unless you set the credentials init
// > option. // > option.
// https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch // https://developer.mozilla.org/docs/Web/API/Fetch_API/Using_Fetch
// //
// > For maximum browser compatibility when it comes to sending & // > For maximum browser compatibility when it comes to sending &
// > receiving cookies, always supply the `credentials: 'same-origin'` // > receiving cookies, always supply the `credentials: 'same-origin'`
@ -1843,7 +1843,7 @@ export default class Router implements BaseRouter {
} as HistoryState, } as HistoryState,
// Most browsers currently ignores this parameter, although they may use it in the future. // Most browsers currently ignores this parameter, although they may use it in the future.
// Passing the empty string here should be safe against future changes to the method. // Passing the empty string here should be safe against future changes to the method.
// https://developer.mozilla.org/en-US/docs/Web/API/History/replaceState // https://developer.mozilla.org/docs/Web/API/History/replaceState
'', '',
as as
) )

View file

@ -85,7 +85,7 @@ function getShadowHost() {
element = element.parentNode element = element.parentNode
} }
// https://developer.mozilla.org/en-US/docs/Web/API/Node.nodeType // https://developer.mozilla.org/docs/Web/API/Node.nodeType
// NOTE: Firefox 34 does not expose ShadowRoot.host (but 37 does) // NOTE: Firefox 34 does not expose ShadowRoot.host (but 37 does)
if ( if (
container.nodeType === container.DOCUMENT_FRAGMENT_NODE && container.nodeType === container.DOCUMENT_FRAGMENT_NODE &&
@ -433,7 +433,7 @@ function cssShadowPiercingDeepCombinator() {
var gif = var gif =
'data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7' 'data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7'
// https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#attr-usemap // https://developer.mozilla.org/docs/Web/HTML/Element/img#attr-usemap
var focusAreaImgTabindex = { var focusAreaImgTabindex = {
element: 'div', element: 'div',
mutate: function mutate(element) { mutate: function mutate(element) {
@ -448,7 +448,7 @@ var focusAreaImgTabindex = {
}, },
} }
// https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#attr-usemap // https://developer.mozilla.org/docs/Web/HTML/Element/img#attr-usemap
var focusAreaTabindex = { var focusAreaTabindex = {
element: 'div', element: 'div',
mutate: function mutate(element) { mutate: function mutate(element) {
@ -474,7 +474,7 @@ var focusAreaTabindex = {
}, },
} }
// https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#attr-usemap // https://developer.mozilla.org/docs/Web/HTML/Element/img#attr-usemap
var focusAreaWithoutHref = { var focusAreaWithoutHref = {
element: 'div', element: 'div',
mutate: function mutate(element) { mutate: function mutate(element) {
@ -515,7 +515,7 @@ var invalidGif =
'data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///ZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZ' 'data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///ZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZ'
// NOTE: https://github.com/medialize/ally.js/issues/35 // NOTE: https://github.com/medialize/ally.js/issues/35
// https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#attr-usemap // https://developer.mozilla.org/docs/Web/HTML/Element/img#attr-usemap
var focusBrokenImageMap = { var focusBrokenImageMap = {
element: 'div', element: 'div',
mutate: function mutate(element) { mutate: function mutate(element) {
@ -587,7 +587,7 @@ var focusFormDisabled = {
// NOTE: https://github.com/medialize/ally.js/issues/35 // NOTE: https://github.com/medialize/ally.js/issues/35
// fixes https://github.com/medialize/ally.js/issues/20 // fixes https://github.com/medialize/ally.js/issues/20
// https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#attr-ismap // https://developer.mozilla.org/docs/Web/HTML/Element/img#attr-ismap
var focusImgIsmap = { var focusImgIsmap = {
element: 'a', element: 'a',
mutate: function mutate(element) { mutate: function mutate(element) {
@ -598,7 +598,7 @@ var focusImgIsmap = {
} }
// NOTE: https://github.com/medialize/ally.js/issues/35 // NOTE: https://github.com/medialize/ally.js/issues/35
// https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#attr-usemap // https://developer.mozilla.org/docs/Web/HTML/Element/img#attr-usemap
var focusImgUsemapTabindex = { var focusImgUsemapTabindex = {
element: 'div', element: 'div',
mutate: function mutate(element) { mutate: function mutate(element) {
@ -1417,7 +1417,7 @@ function isFocusRelevantRules() {
} }
} else if (hasCssOverflowScroll(style)) { } else if (hasCssOverflowScroll(style)) {
// Firefox requires proper overflow setting, IE does not necessarily // Firefox requires proper overflow setting, IE does not necessarily
// https://developer.mozilla.org/en-US/docs/Web/CSS/overflow // https://developer.mozilla.org/docs/Web/CSS/overflow
return true return true
} }
} }
@ -1584,7 +1584,7 @@ function getFrameElement(element) {
} }
try { try {
// see https://developer.mozilla.org/en-US/docs/Web/API/Window/frameElement // see https://developer.mozilla.org/docs/Web/API/Window/frameElement
// does not work within <embed> anywhere, and not within in <object> in IE // does not work within <embed> anywhere, and not within in <object> in IE
return _window.frameElement || findDocumentHostElement(_window) return _window.frameElement || findDocumentHostElement(_window)
} catch (e) { } catch (e) {
@ -1736,7 +1736,7 @@ var isVisible = isVisibleRules.except({})
function getMapByName(name, _document) { function getMapByName(name, _document) {
// apparently getElementsByName() also considers id attribute in IE & opera // apparently getElementsByName() also considers id attribute in IE & opera
// https://developer.mozilla.org/en-US/docs/Web/API/Document/getElementsByName // https://developer.mozilla.org/docs/Web/API/Document/getElementsByName
var map = _document.querySelector('map[name="' + cssEscape(name) + '"]') var map = _document.querySelector('map[name="' + cssEscape(name) + '"]')
return map || null return map || null
} }
@ -1754,7 +1754,7 @@ function getImageOfArea(element) {
// HTML5 specifies HTMLMapElement.images to be an HTMLCollection of all // HTML5 specifies HTMLMapElement.images to be an HTMLCollection of all
// <img> and <object> referencing the <map> element, but no browser implements this // <img> and <object> referencing the <map> element, but no browser implements this
// https://www.w3.org/TR/html5/embedded-content-0.html#the-map-element // https://www.w3.org/TR/html5/embedded-content-0.html#the-map-element
// https://developer.mozilla.org/en-US/docs/Web/API/HTMLMapElement // https://developer.mozilla.org/docs/Web/API/HTMLMapElement
// the image must be valid and loaded for the map to take effect // the image must be valid and loaded for the map to take effect
var _document = getDocument(element) var _document = getDocument(element)
return ( return (
@ -1765,8 +1765,8 @@ function getImageOfArea(element) {
var supports$2 = void 0 var supports$2 = void 0
// https://developer.mozilla.org/en-US/docs/Web/HTML/Element/map // https://developer.mozilla.org/docs/Web/HTML/Element/map
// https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#attr-usemap // https://developer.mozilla.org/docs/Web/HTML/Element/img#attr-usemap
// https://github.com/jquery/jquery-ui/blob/master/ui/core.js#L88-L107 // https://github.com/jquery/jquery-ui/blob/master/ui/core.js#L88-L107
function isValidArea(context) { function isValidArea(context) {
if (!supports$2) { if (!supports$2) {
@ -1816,7 +1816,7 @@ function isValidArea(context) {
) )
} }
// https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#attr-usemap // https://developer.mozilla.org/docs/Web/HTML/Element/img#attr-usemap
var childOfInteractive = getParents({ context: img }) var childOfInteractive = getParents({ context: img })
.slice(1) .slice(1)
.some(function (_element) { .some(function (_element) {
@ -2170,7 +2170,7 @@ isFocusableRules.except = function () {
var isFocusable = isFocusableRules.except({}) var isFocusable = isFocusableRules.except({})
function createFilter(condition) { function createFilter(condition) {
// see https://developer.mozilla.org/en-US/docs/Web/API/NodeFilter // see https://developer.mozilla.org/docs/Web/API/NodeFilter
var filter = function filter(node) { var filter = function filter(node) {
if (node.shadowRoot) { if (node.shadowRoot) {
// return ShadowRoot elements regardless of them being focusable, // return ShadowRoot elements regardless of them being focusable,
@ -2210,7 +2210,7 @@ function queryFocusableStrict() {
}) })
var _document = getDocument(context) var _document = getDocument(context)
// see https://developer.mozilla.org/en-US/docs/Web/API/Document/createTreeWalker // see https://developer.mozilla.org/docs/Web/API/Document/createTreeWalker
var walker = _document.createTreeWalker( var walker = _document.createTreeWalker(
// root element to start search in // root element to start search in
context, context,
@ -3105,7 +3105,7 @@ function sortShadowed(elements, context, sortElements) {
} }
function sortTabindex(elements) { function sortTabindex(elements) {
// https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement.tabIndex // https://developer.mozilla.org/docs/Web/API/HTMLElement.tabIndex
// elements with tabIndex "0" (including tabbableElements without tabIndex) should be navigated in the order they appear. // elements with tabIndex "0" (including tabbableElements without tabIndex) should be navigated in the order they appear.
// elements with a positive tabIndex: // elements with a positive tabIndex:
// Elements that have identical tabIndexes should be navigated in the order they appear. // Elements that have identical tabIndexes should be navigated in the order they appear.
@ -3119,7 +3119,7 @@ function sortTabindex(elements) {
// see http://blog.rodneyrehm.de/archives/14-Sorting-Were-Doing-It-Wrong.html#stability // see http://blog.rodneyrehm.de/archives/14-Sorting-Were-Doing-It-Wrong.html#stability
// NOTE: compareDocumentPosition seemed like more overhead than just sorting this with buckets // NOTE: compareDocumentPosition seemed like more overhead than just sorting this with buckets
// https://developer.mozilla.org/en-US/docs/Web/API/Node.compareDocumentPosition // https://developer.mozilla.org/docs/Web/API/Node.compareDocumentPosition
var map = {} var map = {}
var indexes = [] var indexes = []
@ -3389,7 +3389,7 @@ function keyBinding(text) {
} }
// Node.compareDocumentPosition is available since IE9 // Node.compareDocumentPosition is available since IE9
// see https://developer.mozilla.org/en-US/docs/Web/API/Node.compareDocumentPosition // see https://developer.mozilla.org/docs/Web/API/Node.compareDocumentPosition
// callback returns true when element is contained by parent or is the parent suited for use with Array.some() // callback returns true when element is contained by parent or is the parent suited for use with Array.some()
/* /*

View file

@ -113,7 +113,7 @@ concurrent "staging" environments.
I say "staging" in quotes because in reality, you run tests against the I say "staging" in quotes because in reality, you run tests against the
real production infrastructure, which has enormous reliability benefits. real production infrastructure, which has enormous reliability benefits.
Not only are certain Not only are certain
[features these days only enabled when SSL is on](https://developer.mozilla.org/en-US/docs/Web/Security/Secure_Contexts/features_restricted_to_secure_contexts), [features these days only enabled when SSL is on](https://developer.mozilla.org/docs/Web/Security/Secure_Contexts/features_restricted_to_secure_contexts),
but having every other production feature enabled, like brotli but having every other production feature enabled, like brotli
compression and HTTP/2, reduces your risk of outages: compression and HTTP/2, reduces your risk of outages: