diff --git a/docs/02-app/01-building-your-application/01-routing/03-linking-and-navigating.mdx b/docs/02-app/01-building-your-application/01-routing/03-linking-and-navigating.mdx index ca48b50749..e8349eb98c 100644 --- a/docs/02-app/01-building-your-application/01-routing/03-linking-and-navigating.mdx +++ b/docs/02-app/01-building-your-application/01-routing/03-linking-and-navigating.mdx @@ -42,7 +42,7 @@ There are other optional props you can pass to ``. See the [API reference] #### 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" import Link from 'next/link' diff --git a/docs/02-app/01-building-your-application/01-routing/10-route-handlers.mdx b/docs/02-app/01-building-your-application/01-routing/10-route-handlers.mdx index 4a444cb9f7..2807e20134 100644 --- a/docs/02-app/01-building-your-application/01-routing/10-route-handlers.mdx +++ b/docs/02-app/01-building-your-application/01-routing/10-route-handlers.mdx @@ -8,7 +8,7 @@ related: - 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. Route.js Special File **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 diff --git a/docs/02-app/01-building-your-application/02-data-fetching/01-fetching-caching-and-revalidating.mdx b/docs/02-app/01-building-your-application/02-data-fetching/01-fetching-caching-and-revalidating.mdx index b24539de1a..2c4b2b53a1 100644 --- a/docs/02-app/01-building-your-application/02-data-fetching/01-fetching-caching-and-revalidating.mdx +++ b/docs/02-app/01-building-your-application/02-data-fetching/01-fetching-caching-and-revalidating.mdx @@ -15,7 +15,7 @@ There are four ways you can fetch data: ## 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). @@ -84,7 +84,7 @@ fetch('https://...', { cache: 'force-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). diff --git a/docs/02-app/01-building-your-application/02-data-fetching/02-patterns.mdx b/docs/02-app/01-building-your-application/02-data-fetching/02-patterns.mdx index f04319db9f..ad43b0ca1b 100644 --- a/docs/02-app/01-building-your-application/02-data-fetching/02-patterns.mdx +++ b/docs/02-app/01-building-your-application/02-data-fetching/02-patterns.mdx @@ -220,7 +220,7 @@ import { getItem } from '@/utils/get-item' export const preload = (id: string) => { // 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) } export default async function Item({ id }: { id: string }) { @@ -234,7 +234,7 @@ import { getItem } from '@/utils/get-item' export const preload = (id) => { // 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) } export default async function Item({ id }) { diff --git a/docs/02-app/01-building-your-application/02-data-fetching/03-forms-and-mutations.mdx b/docs/02-app/01-building-your-application/02-data-fetching/03-forms-and-mutations.mdx index e723edca12..20769746c1 100644 --- a/docs/02-app/01-building-your-application/02-data-fetching/03-forms-and-mutations.mdx +++ b/docs/02-app/01-building-your-application/02-data-fetching/03-forms-and-mutations.mdx @@ -13,7 +13,7 @@ Forms enable you to create and update data in web applications. Next.js provides > **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. -> - 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. @@ -170,7 +170,7 @@ export default function Page() { } ``` -> **Good to know**: `
` 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**: `` 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 @@ -485,7 +485,7 @@ export default function Page() { -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 'use server' diff --git a/docs/02-app/01-building-your-application/03-rendering/01-server-components.mdx b/docs/02-app/01-building-your-application/03-rendering/01-server-components.mdx index f526187d80..e00f6f4401 100644 --- a/docs/02-app/01-building-your-application/03-rendering/01-server-components.mdx +++ b/docs/02-app/01-building-your-application/03-rendering/01-server-components.mdx @@ -64,7 +64,7 @@ There are three subsets of server rendering: Static, Dynamic, and Streaming. {/* 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. diff --git a/docs/02-app/01-building-your-application/03-rendering/02-client-components.mdx b/docs/02-app/01-building-your-application/03-rendering/02-client-components.mdx index f860e471ff..08312aef99 100644 --- a/docs/02-app/01-building-your-application/03-rendering/02-client-components.mdx +++ b/docs/02-app/01-building-your-application/03-rendering/02-client-components.mdx @@ -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: - **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 diff --git a/docs/02-app/01-building-your-application/03-rendering/03-composition-patterns.mdx b/docs/02-app/01-building-your-application/03-rendering/03-composition-patterns.mdx index 88d21febf0..c94d0c6f0a 100644 --- a/docs/02-app/01-building-your-application/03-rendering/03-composition-patterns.mdx +++ b/docs/02-app/01-building-your-application/03-rendering/03-composition-patterns.mdx @@ -398,7 +398,7 @@ export default function Layout({ children }) { ### 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). diff --git a/docs/02-app/01-building-your-application/03-rendering/index.mdx b/docs/02-app/01-building-your-application/03-rendering/index.mdx index 8049b58767..b388ce05d8 100644 --- a/docs/02-app/01-building-your-application/03-rendering/index.mdx +++ b/docs/02-app/01-building-your-application/03-rendering/index.mdx @@ -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**: 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. 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. diff --git a/docs/02-app/01-building-your-application/05-styling/01-css-modules.mdx b/docs/02-app/01-building-your-application/05-styling/01-css-modules.mdx index 8ae030d618..ddcdb6c0af 100644 --- a/docs/02-app/01-building-your-application/05-styling/01-css-modules.mdx +++ b/docs/02-app/01-building-your-application/05-styling/01-css-modules.mdx @@ -165,7 +165,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. +Then, [`import`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/import) the `styles.css` file. ```jsx filename="pages/_app.js" import '../styles.css' @@ -241,7 +241,7 @@ export default function RootLayout({ children }) { 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` diff --git a/docs/02-app/01-building-your-application/06-optimizing/01-images.mdx b/docs/02-app/01-building-your-application/06-optimizing/01-images.mdx index 44296e3db6..76f210fbb1 100644 --- a/docs/02-app/01-building-your-application/06-optimizing/01-images.mdx +++ b/docs/02-app/01-building-your-application/06-optimizing/01-images.mdx @@ -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. -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. @@ -212,7 +212,7 @@ Because `next/image` is designed to guarantee good performance results, it canno > > **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** > diff --git a/docs/02-app/01-building-your-application/06-optimizing/03-scripts.mdx b/docs/02-app/01-building-your-application/06-optimizing/03-scripts.mdx index 99ddb75b73..63bfa1809f 100644 --- a/docs/02-app/01-building-your-application/06-optimizing/03-scripts.mdx +++ b/docs/02-app/01-building-your-application/06-optimizing/03-scripts.mdx @@ -296,7 +296,7 @@ Refer to the [`next/script`](/docs/pages/api-reference/components/script#onload) ### Additional Attributes -There are many DOM attributes that can be assigned to a `