diff --git a/errors/class-component-in-server-component.mdx b/errors/class-component-in-server-component.mdx index 701ebfd30c9f97..d1be416ae50f85 100644 --- a/errors/class-component-in-server-component.mdx +++ b/errors/class-component-in-server-component.mdx @@ -10,7 +10,7 @@ You are rendering a React Class Component in a Server Component, `React.Componen Use a Function Component. -##### Before +### Before ```jsx filename="app/page.js" export default class Page extends React.Component { @@ -20,7 +20,7 @@ export default class Page extends React.Component { } ``` -##### After +### After ```jsx filename="app/page.js" export default function Page() { @@ -30,7 +30,7 @@ export default function Page() { Mark the component rendering the React Class Component as a Client Component by adding `'use client'` at the top of the file. -##### Before +### Before ```jsx filename="app/page.js" export default class Page extends React.Component { @@ -40,7 +40,7 @@ export default class Page extends React.Component { } ``` -##### After +### After ```jsx filename="app/page.js" 'use client' diff --git a/errors/context-in-server-component.mdx b/errors/context-in-server-component.mdx index 1c395922615da6..925e72b7006a0c 100644 --- a/errors/context-in-server-component.mdx +++ b/errors/context-in-server-component.mdx @@ -10,7 +10,7 @@ You are using `createContext` in a Server Component but it only works in Client Mark the component using `createContext` as a Client Component by adding `'use client'` at the top of the file. -##### Before +### Before ```jsx filename="app/example-component.js" import { createContext } from 'react' @@ -18,7 +18,7 @@ import { createContext } from 'react' const Context = createContext() ``` -##### After +### After ```jsx filename="app/example-component.js" 'use client' diff --git a/errors/css-global.mdx b/errors/css-global.mdx index 50a6de82a76e0f..1c0b53bd851623 100644 --- a/errors/css-global.mdx +++ b/errors/css-global.mdx @@ -15,7 +15,7 @@ There are two possible ways to fix this error: - Move all global CSS imports to your [`pages/_app.js` file](/docs/pages/building-your-application/routing/custom-app). - If you do not wish your stylesheet to be global, update it to use [CSS Modules](/docs/pages/building-your-application/styling/css). This will allow you to import the stylesheet and scope the styles to a specific component. -#### Example +### Example Consider the stylesheet named [`styles.css`](/docs/pages/building-your-application/styling/css) diff --git a/errors/custom-document-image-import.mdx b/errors/custom-document-image-import.mdx index c98c978cecadda..f646c105fd72c5 100644 --- a/errors/custom-document-image-import.mdx +++ b/errors/custom-document-image-import.mdx @@ -12,7 +12,7 @@ Custom documents aren't compiled for the browser and images statically imported If your image needs to be displayed on every page you can relocate it to your [`pages/_app.js`](/docs/pages/building-your-application/routing/custom-app) file. -#### Example +### Example ```jsx filename="pages/_app.js" import yourImage from 'path/to/your/image' diff --git a/errors/dynamic-server-error.mdx b/errors/dynamic-server-error.mdx index 398ffc03fc75bd..e9ecc9b0bb37c0 100644 --- a/errors/dynamic-server-error.mdx +++ b/errors/dynamic-server-error.mdx @@ -2,7 +2,7 @@ title: DynamicServerError - Dynamic Server Usage --- -#### Why This Message Occurred +## Why This Message Occurred You attempted to use a Next.js function that depends on Async Context (such as `headers` or `cookies` from `next/headers`) but it was not bound to the same call stack as the function that ran it (e.g., calling `cookies()` inside of a `setTimeout` or `setInterval`). diff --git a/errors/empty-configuration.mdx b/errors/empty-configuration.mdx index 007d4f7f8517f9..d3cc163aaf6df3 100644 --- a/errors/empty-configuration.mdx +++ b/errors/empty-configuration.mdx @@ -2,7 +2,7 @@ title: 'Detected `next.config.js`, no exported configuration found' --- -#### Why This Warning Occurred +## Why This Warning Occurred There is no object exported from next.config.js or the object is empty. diff --git a/errors/experimental-jest-transformer.mdx b/errors/experimental-jest-transformer.mdx index 339310d35c2987..c676743bb631ac 100644 --- a/errors/experimental-jest-transformer.mdx +++ b/errors/experimental-jest-transformer.mdx @@ -2,7 +2,7 @@ title: '`next/jest` Experimental' --- -#### Why This Message Occurred +## Why This Message Occurred You are using `next/jest` which is currently an experimental feature of Next.js. In a future version of Next.js `next/jest` will be marked as stable. diff --git a/errors/failed-loading-swc.mdx b/errors/failed-loading-swc.mdx index 77857f9564536d..083e44a0a96bed 100644 --- a/errors/failed-loading-swc.mdx +++ b/errors/failed-loading-swc.mdx @@ -2,7 +2,7 @@ title: SWC Failed to Load --- -#### Why This Message Occurred +## Why This Message Occurred Next.js now uses Rust-based compiler [SWC](https://swc.rs/) to compile JavaScript/TypeScript. This new compiler is up to 17x faster than Babel when compiling individual files and up to 5x faster Fast Refresh. diff --git a/errors/get-initial-props-export.mdx b/errors/get-initial-props-export.mdx index 0ba52a4d91ca98..453c00e8bb470a 100644 --- a/errors/get-initial-props-export.mdx +++ b/errors/get-initial-props-export.mdx @@ -2,7 +2,7 @@ title: '`getInitialProps` Export Warning' --- -#### Why This Warning Occurred +## Why This Warning Occurred You attempted to statically export your application via `output: 'export'` or `next export`, however, one or more of your pages uses `getInitialProps`. diff --git a/errors/google-fonts-missing-subsets.mdx b/errors/google-fonts-missing-subsets.mdx index a9501c078beb54..31b7cfa5b016c0 100644 --- a/errors/google-fonts-missing-subsets.mdx +++ b/errors/google-fonts-missing-subsets.mdx @@ -8,7 +8,7 @@ Preload is enabled for a font that is missing a specified subset. ## Possible Ways to Fix It -##### Specify which subsets to preload for that font. +### Specify which subsets to preload for that font. ```js filename="example.js" const inter = Inter({ subsets: ['latin'] }) @@ -16,7 +16,7 @@ const inter = Inter({ subsets: ['latin'] }) Note: previously it was possible to specify default subsets in your `next.config.js` with the `experimental.fontLoaders` option, but this is no longer supported. -##### Disable preloading for that font +### Disable preloading for that font If it's not possible to preload your intended subset you can disable preloading. diff --git a/errors/invalid-route-source.mdx b/errors/invalid-route-source.mdx index 391f7e22a2c9d6..43af254438f80d 100644 --- a/errors/invalid-route-source.mdx +++ b/errors/invalid-route-source.mdx @@ -12,7 +12,7 @@ This could have been due to trying to use normal `RegExp` syntax like negative l Wrap the `RegExp` part of your `source` as an un-named parameter. -##### Custom Routes +### Custom Routes **Before** @@ -32,7 +32,7 @@ Wrap the `RegExp` part of your `source` as an un-named parameter. } ``` -##### Middleware +### Middleware **Before** diff --git a/errors/missing-root-layout-tags.mdx b/errors/missing-root-layout-tags.mdx index 4becf81f873f1f..6fa4d7f069f14f 100644 --- a/errors/missing-root-layout-tags.mdx +++ b/errors/missing-root-layout-tags.mdx @@ -2,11 +2,11 @@ title: Missing Root Layout tags --- -#### Why This Error Occurred +## Why This Error Occurred You forgot to define the `` and/or `` tags in your Root Layout. -#### Possible Ways to Fix It +## Possible Ways to Fix It To fix this error, make sure that both `` and `` are present in your Root Layout. @@ -24,6 +24,6 @@ export default function Layout({ children }: { children: React.ReactNode }) { } ``` -### Useful Links +## Useful Links - [Root Layout](https://nextjs.org/docs/app/building-your-application/routing/layouts-and-templates#root-layout-required) diff --git a/errors/missing-suspense-with-csr-bailout.mdx b/errors/missing-suspense-with-csr-bailout.mdx index 27b8e796ffd190..9481ffce54bfc7 100644 --- a/errors/missing-suspense-with-csr-bailout.mdx +++ b/errors/missing-suspense-with-csr-bailout.mdx @@ -2,11 +2,11 @@ title: Missing Suspense boundary with useSearchParams --- -#### Why This Error Occurred +## Why This Error Occurred Reading search parameters through `useSearchParams()` without a Suspense boundary will opt the entire page into client-side rendering. This could cause your page to be blank until the client-side JavaScript has loaded. -#### Possible Ways to Fix It +## Possible Ways to Fix It Ensure that calls to `useSearchParams()` are wrapped in a Suspense boundary. @@ -56,7 +56,7 @@ export function Searchbar() { This will ensure the page does not de-opt to client-side rendering. -#### Disabling +## Disabling > Note: This is only available with Next.js version 14.x. If you're in versions above 14 please fix it with the approach above. @@ -72,6 +72,6 @@ module.exports = { This configuration option will be removed in a future major version. -### Useful Links +## Useful Links - [`useSearchParams`](https://nextjs.org/docs/app/api-reference/functions/use-search-params) diff --git a/errors/module-not-found.mdx b/errors/module-not-found.mdx index c28e25607c6fc9..8db4f35ac799a9 100644 --- a/errors/module-not-found.mdx +++ b/errors/module-not-found.mdx @@ -13,7 +13,7 @@ A module not found error can occur for many different reasons: ## Possible Ways to Fix It -##### The module you're trying to import is not installed in your dependencies +### The module you're trying to import is not installed in your dependencies When importing a module from [npm](https://npmjs.com) this module has to be installed locally. @@ -28,11 +28,11 @@ The `swr` module has to be installed using a package manager. - When using `npm`: `npm install swr` - When using `yarn`: `yarn add swr` -##### The module you're trying to import is in a different directory +### The module you're trying to import is in a different directory Make sure that the path you're importing refers to the right directory and file. -##### The module you're trying to import has a different casing +### The module you're trying to import has a different casing Make sure the casing of the file is correct. @@ -51,7 +51,7 @@ import MyComponent from '../components/Mycomponent' Incorrect casing will lead to build failures on case-sensitive environments like most Linux-based continuous integration and can cause issues with Fast Refresh. -##### The module you're trying to import uses Node.js specific modules +### The module you're trying to import uses Node.js specific modules `getStaticProps`, `getStaticPaths`, and `getServerSideProps` allow for using modules that can only run in the Node.js environment. This allows you to do direct database queries or reading data from Redis to name a few examples. diff --git a/errors/next-dynamic-api-wrong-context.mdx b/errors/next-dynamic-api-wrong-context.mdx index edc0e3827ee0db..1b725299889da7 100644 --- a/errors/next-dynamic-api-wrong-context.mdx +++ b/errors/next-dynamic-api-wrong-context.mdx @@ -2,13 +2,13 @@ title: Dynamic API was called outside request --- -#### Why This Error Occurred +## Why This Error Occurred A Dynamic API was called outside a request scope. (Eg.: Global scope). Note that Dynamic APIs could have been called deep inside other modules/functions (eg.: third-party libraries) that are not immediately visible. -#### Possible Ways to Fix It +## Possible Ways to Fix It Make sure that all Dynamic API calls happen in a request scope. @@ -34,7 +34,7 @@ export async function GET() { } ``` -### Useful Links +## Useful Links - [`headers()` function](https://nextjs.org/docs/app/api-reference/functions/headers) - [`cookies()` function](https://nextjs.org/docs/app/api-reference/functions/cookies) diff --git a/errors/next-image-unconfigured-host.mdx b/errors/next-image-unconfigured-host.mdx index ea0496b71fbbd6..3796831f4cd833 100644 --- a/errors/next-image-unconfigured-host.mdx +++ b/errors/next-image-unconfigured-host.mdx @@ -25,7 +25,7 @@ module.exports = { } ``` -#### Fixing older versions of Next.js +### Fixing older versions of Next.js
Using Next.js prior to 12.3.0? diff --git a/errors/next-prerender-crypto.mdx b/errors/next-prerender-crypto.mdx index 79a91f10cea480..8bae011ab56b9a 100644 --- a/errors/next-prerender-crypto.mdx +++ b/errors/next-prerender-crypto.mdx @@ -2,13 +2,13 @@ title: Cannot access `crypto.getRandomValue()`, `crypto.randomUUID()`, or another web or node crypto API that generates random values synchronously while prerendering --- -#### Why This Error Occurred +## Why This Error Occurred An API that produces a random value synchronously from the Web Crypto API or from Node's `crypto` API was called outside of a `"use cache"` scope and without first calling `await connection()`. Random values that are produced synchronously must either be inside a `"use cache"` scope or be preceded with `await connection()` to explicitly communicate to Next.js whether the random values produced can be reused across many requests (cached) or if they must be unique per Request (`await connection()`). If the API used has an async version you can also switch to that in instead of using `await connection()`. -#### Possible Ways to Fix It +## Possible Ways to Fix It If you are generating a token to talk to a database that itself should be cached move the token generation inside the `"use cache"`. @@ -91,7 +91,7 @@ export default async function Page() { } ``` -### Useful Links +## Useful Links - [`connection` function](https://nextjs.org/docs/app/api-reference/functions/connection) - [Web Crypto API](https://developer.mozilla.org/en-US/docs/Web/API/Web_Crypto_API) diff --git a/errors/next-prerender-current-time.mdx b/errors/next-prerender-current-time.mdx index af309310f7769c..dfdf90281cf871 100644 --- a/errors/next-prerender-current-time.mdx +++ b/errors/next-prerender-current-time.mdx @@ -2,15 +2,15 @@ title: Cannot infer intended usage of current time with `Date.now()`, `Date()`, or `new Date()` --- -#### Why This Error Occurred +## Why This Error Occurred Reading the current time can be ambiguous. Sometimes you intend to capture the time when something was cached, other times you intend to capture the time of a user Request. You might also be trying to measure runtime performance to track elapsed time. In this instance Next.js cannot determine your intent from usage so it needs you to clarify your intent. The way you do that depends on your use case. See the possible solutions below for how to move forward. -#### Possible Ways to Fix It +## Possible Ways to Fix It -##### Performance use case +### Performance use case If you are using the current time for performance tracking with elapsed time use `performance.now()`. @@ -41,7 +41,7 @@ export default async function Page() { Note: If you need report an absolute time to an observability tool you can also use `performance.timeOrigin + performance.now()`. -##### Cacheable use cases +### Cacheable use cases If you want to read the time when some cache entry is created (such as when a Next.js page is rendered at build-time or when revalidating a static page), move the current time read inside a cached function using `"use cache"`. @@ -94,7 +94,7 @@ export default async function Page() { } ``` -##### Reactive use case +### Reactive use case If you want the current time to change and be reactive, consider moving this usage to a Client Component. Note that Server Side Rendering timestamps in a Client Component is also considered ambiguous so to implement this properly Next.js needs you to only read the time in the browser, for instance by using `useLayoutEffect()` or `useEffect()`. @@ -149,7 +149,7 @@ export default async function Page() { } ``` -##### Request-time use case +### Request-time use case If you want the current time to represent the time of a user Request, add `await connection()` before you read the current time. This instructs Next.js that everything after the `await connection()` requires there to be a user Request before it can run. If you add `await connection()` you will also need to ensure there is a Suspense boundary somewhere above the waiting component that describes a fallback UI React can use. The Suspense can be anywhere in the parent component stack but it is shown here above the waiting component for demonstration purposes. @@ -192,7 +192,7 @@ async function DynamicBanner() { } ``` -### Useful Links +## Useful Links - [`Date.now` API](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/now) - [`Date constructor` API](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/Date) diff --git a/errors/next-prerender-missing-suspense.mdx b/errors/next-prerender-missing-suspense.mdx index 2ef787073c9674..d5731a6bbd417c 100644 --- a/errors/next-prerender-missing-suspense.mdx +++ b/errors/next-prerender-missing-suspense.mdx @@ -2,7 +2,7 @@ title: Cannot access data, headers, params, searchParams, or a short-lived cache a Suspense boundary nor a `"use cache"` above it. --- -#### Why This Error Occurred +## Why This Error Occurred When the experimental flag `dynamicIO` is enabled, Next.js expects a parent `Suspense` boundary around any component that awaits data that should be accessed on every user request. The purpose of this requirement is so that Next.js can provide a useful fallback while this data is accessed and rendered. @@ -10,9 +10,9 @@ While some data is inherently only available when a user request is being handle The proper fix for this specific error depends on what data you are accessing and how you want your Next.js app to behave. -#### Possible Ways to Fix It +## Possible Ways to Fix It -##### Accessing Data +### Accessing Data When you access data using `fetch`, a database client, or any other module which does asynchronous IO, Next.js interprets your intent as expecting the data to load on every user request. @@ -89,7 +89,7 @@ export default async function Page() { } ``` -##### Headers +### Headers If you are accessing request headers using `headers()`, `cookies()`, or `draftMode()`. Consider whether you can move the use of these APIs deeper into your existing component tree. @@ -155,7 +155,7 @@ export default async function Page() { Alternatively you can add a Suspense boundary above the component that is accessing Request headers. -##### Params and SearchParams +### Params and SearchParams Layout `params`, and Page `params` and `searchParams` props are promises. If you await them in the Layout or Page component you might be accessing these props higher than is actually required. Try passing these props to deeper components as a promise and awaiting them closer to where the actual param or searchParam is required @@ -210,7 +210,7 @@ export default async function Page({ searchParams }) { Alternatively you can add a Suspense boundary above the component that is accessing `params` or `searchParams` so Next.js understands what UI should be used when while waiting for this request data to be accessed. -##### Short-lived Caches +### Short-lived Caches `"use cache"` allows you to describe a `cacheLife()` that might be too short to be practical to prerender. The utility of doing this is that it can still describe a non-zero caching time for the client router cache to reuse the cache entry in the browser and it can also be useful for protecting upstream APIs while experiencing high request traffic. @@ -253,7 +253,7 @@ export default async function Page() { Alternatively you can add a Suspense boundary above the component that is accessing this short-lived cached data so Next.js understands what UI should be used while accessing this data on a user request. -### Useful Links +## Useful Links - [`Suspense` React API](https://react.dev/reference/react/Suspense) - [`headers` function](https://nextjs.org/docs/app/api-reference/functions/headers) diff --git a/errors/next-prerender-random.mdx b/errors/next-prerender-random.mdx index 0f632350b78892..210dbc76ef9575 100644 --- a/errors/next-prerender-random.mdx +++ b/errors/next-prerender-random.mdx @@ -2,11 +2,11 @@ title: Cannot access `Math.random()` while prerendering --- -#### Why This Error Occurred +## Why This Error Occurred A function is calling `Math.random()`. Random values are not prerenderable and must be excluded. The correct solution depends on your use case. You can find more information below about possible ways to resolves this issue. -#### Possible Ways to Fix It +## Possible Ways to Fix It If your random value is intended to be unique per Request add `await connection()` before you call `Math.random()` and ensure there is a Suspense boundary somewhere above this component. This will inform Next.js that this component should be excluded from prerendering and communicate the necessary fallback UI that should be rendered while the component renders on each Request. @@ -45,7 +45,7 @@ async function DynamicProductsView() { } ``` -### Useful Links +## Useful Links - [`connection` function](https://nextjs.org/docs/app/api-reference/functions/connection) - [`Suspense` React API](https://react.dev/reference/react/Suspense) diff --git a/errors/next-prerender-sync-headers.mdx b/errors/next-prerender-sync-headers.mdx index d83244e6276de3..5c54377cfcec75 100644 --- a/errors/next-prerender-sync-headers.mdx +++ b/errors/next-prerender-sync-headers.mdx @@ -2,13 +2,13 @@ title: Cannot access Request information synchronously with `cookies()`, `headers()`, or `draftMode()` --- -#### Why This Error Occurred +## Why This Error Occurred In Next.js 15 global functions that provide access to Request Header information such as `cookies()`, `headers()`, and `draftMode()` are each now `async` and return a `Promise` rather than the associated object directly. To support migrating to the async APIs Next.js 15 still supports accessing properties of the underlying object directly on the returned Promise. However when `dynamicIO` is enabled it is an error to do so. -#### Possible Ways to Fix It +## Possible Ways to Fix It If you haven't already followed the Next.js 15 upgrade guide which includes running a codemod to auto-convert to the necessary async form of these APIs start there. @@ -57,7 +57,7 @@ export default async function Page() { If you do not find instances of this string then it is possible the synchronous use of Request Header data is inside a 3rd party library. You should identify which library is using this function and see if it has published a Next 15 compatible version that adheres to the new Promise return type. -as a last resort you can add `await connection()` before calling the 3rd party function which uses this API. This will inform Next.js that everything after this await should be excluded from prerendering. This will continue to work until we remove support for synchronously access Request data which is expected to happen in the next major version. +As a last resort you can add `await connection()` before calling the 3rd party function which uses this API. This will inform Next.js that everything after this await should be excluded from prerendering. This will continue to work until we remove support for synchronously access Request data which is expected to happen in the next major version. Before: @@ -88,7 +88,7 @@ export default async function Page() { Note that with `await connection()` and `dynamicIO` it is still required that there is a Suspense boundary somewhere above the component that uses `await connection()`. If you do not have any Suspense boundary parent you will need to add one where is appropriate to describe a fallback UI. -### Useful Links +## Useful Links - [`headers` function](https://nextjs.org/docs/app/api-reference/functions/headers) - [`cookies` function](https://nextjs.org/docs/app/api-reference/functions/cookies) diff --git a/errors/next-prerender-sync-params.mdx b/errors/next-prerender-sync-params.mdx index 59e8f07e4bdcf0..94436ecb3fdaf1 100644 --- a/errors/next-prerender-sync-params.mdx +++ b/errors/next-prerender-sync-params.mdx @@ -2,13 +2,13 @@ title: Cannot access Request information synchronously with Page or Layout or Route `params` or Page `searchParams` --- -#### Why This Error Occurred +## Why This Error Occurred In Next.js 15 `params` passed into Page and Layout components and `searchParams` passed into Page components are now Promises. To support migrating to the async `params` and `searchParams` Next.js 15 still supports accessing param and searchParam values directly on the Promise object. However when `dynamicIO` is enabled it is an error to do so. -#### Possible Ways to Fix It +## Possible Ways to Fix It If you haven't already followed the Next.js 15 upgrade guide which includes running a codemod to auto-convert to the necessary async form of `params` and `searchParams` start there. diff --git a/errors/next-prerender-sync-request.mdx b/errors/next-prerender-sync-request.mdx index cd9b8022475b62..b94a942da66880 100644 --- a/errors/next-prerender-sync-request.mdx +++ b/errors/next-prerender-sync-request.mdx @@ -2,13 +2,13 @@ title: Cannot access Request information synchronously in route.js without awaiting connection first --- -#### Why This Error Occurred +## Why This Error Occurred When `dyanmicIO` is enabled Next.js treats most access to Request information as explicitly dynamic. However routes have a Request object and you can read values like the current pathname from that object synchronously. If you need to access Request information in a route handler you should first call `await connection()` to inform Next.js that everything after this point is explicitly dynamic. This is only needed in `GET` handlers because `GET` is the only handler Next.js will attempt to prerender. -#### Possible Ways to Fix It +## Possible Ways to Fix It Look for access of the Request object in your route.js and add `await connection()` before you access any properties of the Request. diff --git a/errors/next-request-in-use-cache.mdx b/errors/next-request-in-use-cache.mdx index 5747cd957f5d65..0c6e111b0b04d4 100644 --- a/errors/next-request-in-use-cache.mdx +++ b/errors/next-request-in-use-cache.mdx @@ -2,11 +2,11 @@ title: Cannot access `cookies()` or `headers()` in `"use cache"` --- -#### Why This Error Occurred +## Why This Error Occurred A function is trying to read from the current incoming request inside the scope of a function annotated with `"use cache"`. This is not supported because it would make the cache invalidated by every request which is probably not what you intended. -#### Possible Ways to Fix It +## Possible Ways to Fix It Instead of calling this inside the `"use cache"` function, move it outside the function and pass the value in as an argument. The specific value will now be part of the cache key through its arguments. @@ -44,7 +44,7 @@ export default async function Page() { } ``` -### Useful Links +## Useful Links - [`headers()` function](https://nextjs.org/docs/app/api-reference/functions/headers) - [`cookies()` function](https://nextjs.org/docs/app/api-reference/functions/cookies) diff --git a/errors/next-script-for-ga.mdx b/errors/next-script-for-ga.mdx index 75d1009dd1bf28..6c86d2497e3a11 100644 --- a/errors/next-script-for-ga.mdx +++ b/errors/next-script-for-ga.mdx @@ -10,7 +10,7 @@ An inline script was used for Google Analytics which might impact your webpage's ## Possible Ways to Fix It -#### Use `@next/third-parties` to add Google Analytics +### Use `@next/third-parties` to add Google Analytics **`@next/third-parties`** is a library that provides a collection of components and utilities that improve the performance and developer experience of loading popular third-party libraries in your Next.js application. It is available with Next.js 14 (install `next@latest`). diff --git a/errors/no-on-app-updated-hook.mdx b/errors/no-on-app-updated-hook.mdx index 788ce06ce93be5..5f7da5660a7c43 100644 --- a/errors/no-on-app-updated-hook.mdx +++ b/errors/no-on-app-updated-hook.mdx @@ -2,6 +2,8 @@ title: '`Router.onAppUpdated` has been removed' --- +## Why This Error Occurred + Due to [this bug fix](https://github.com/vercel/next.js/pull/3849), we had to remove the `Router.onAppUpdated` hook. But the default functionality of this feature is still in effect. We use this hook to detect a new app deployment when switching pages and act accordingly. @@ -16,6 +18,8 @@ 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. +## Possible Ways to Fix It + 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: diff --git a/errors/no-script-tags-in-head-component.mdx b/errors/no-script-tags-in-head-component.mdx index a384949b446ec8..bbdd837ad98f20 100644 --- a/errors/no-script-tags-in-head-component.mdx +++ b/errors/no-script-tags-in-head-component.mdx @@ -10,7 +10,7 @@ For the best performance, we recommend using `next/script`. Using `next/script` ## Possible Ways to Fix It -#### Script Component +### Script Component The **Script component**, [`next/script`](/docs/pages/api-reference/components/script), allows you to optimally load third-party scripts anywhere in your Next.js application. It is an extension of the HTML `