From 6527d29c8a1b5f7f497107bb39a46025e4459318 Mon Sep 17 00:00:00 2001 From: Lee Robinson Date: Wed, 5 Jul 2023 19:22:34 -0700 Subject: [PATCH] docs: Improve some of the error messages pages. (#52271) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Now that we've improved `/messages` (https://github.com/vercel/next.js/pull/52038), we'd like to start updating some of the content as well 🙏 --- errors/404-get-initial-props.mdx | 12 ++++++++---- errors/amp-bind-jsx-alt.mdx | 13 ++++++++----- errors/amp-export-validation.mdx | 11 ++++++----- errors/api-routes-response-size-limit.mdx | 12 +++++++----- errors/api-routes-static-export.mdx | 18 ++++++++++++------ errors/app-container-deprecated.mdx | 16 ++++++++++++---- errors/app-dir-dynamic-href.mdx | 19 +++++++++++++------ errors/app-static-to-dynamic-error.mdx | 17 ++++++++++------- errors/babel-font-loader-conflict.mdx | 11 ++++++----- errors/beta-middleware.mdx | 11 ++++++----- errors/build-dir-not-writeable.mdx | 13 ++++++++----- errors/built-in-css-disabled.mdx | 15 ++++++++------- errors/built-in-next-font.mdx | 17 +++++++++++------ 13 files changed, 115 insertions(+), 70 deletions(-) diff --git a/errors/404-get-initial-props.mdx b/errors/404-get-initial-props.mdx index 070c9b3cbf..b47aee94f7 100644 --- a/errors/404-get-initial-props.mdx +++ b/errors/404-get-initial-props.mdx @@ -1,17 +1,21 @@ --- title: 404.js Cannot Have getInitialProps +description: This document provides an understanding of the "404.js Cannot Have getInitialProps" error in Next.js and offers solutions to fix it. --- ## Why This Error Occurred -In your `404.js` page you added `getInitialProps` or `getServerSideProps` which is not allowed as this prevents the page from being static and `404.js` is meant to provide more flexibility for a static 404 page. Having a static 404 page is the most ideal as this page can be served very often and if not static puts extra strain on your server and more invocations for serverless functions which increase the cost of hosting your site unnecessarily. +The "404.js Cannot Have `getInitialProps`" error usually occurs when either `getInitialProps` or `getServerSideProps` is used in your `404.js` page. The `404.js` page in Next.js is designed to be static to ensure consistent performance. ## Possible Ways to Fix It -Remove `getInitialProps` from `404.js` and make sure no HOC's used in `404.js` attach `getInitialProps`. +Adding `getInitialProps` or `getServerSideProps` to your `404.js` page will cause it to be rendered on the server-side. -If you want to fetch data for your `404.js` page move it to a client side fetch inside of `componentDidMount` or `useEffect(() => {}, [])`. +To fix this error, you should remove `getInitialProps` from your `404.js` page. Additionally, ensure that no Higher-Order Components (HOCs) used in the `404.js` page are attaching `getInitialProps`. + +If your `404.js` page requires data fetching, we recommend incrementall adopting the App Router and the [`not-found`](/docs/app/api-reference/file-conventions/not-found) file, which does support fetching data before displaying the 404 page. ## Useful Links -- [Automatic Static Optimization](/docs/pages/building-your-application/rendering/automatic-static-optimization) +- [Automatic Static Optimization](/docs/pages/building-your-application/rendering/automatic-static-optimization) - Learn more about how Next.js automatically optimizes your pages for better performance. +- [`not-found`](/docs/app/api-reference/file-conventions/not-found) diff --git a/errors/amp-bind-jsx-alt.mdx b/errors/amp-bind-jsx-alt.mdx index 2284f663b4..52f944a4c2 100644 --- a/errors/amp-bind-jsx-alt.mdx +++ b/errors/amp-bind-jsx-alt.mdx @@ -1,16 +1,19 @@ --- -title: AMP Bind JSX Error +title: Resolving "AMP Bind JSX Error" in Next.js +description: This document explains the "AMP Bind JSX Error" in Next.js and provides a valid solution to resolve it. --- ## Why This Error Occurred -Somewhere you used `[prop]='something'` syntax which is not allowed in JSX. +The "AMP Bind JSX Error" arises when you use the `[prop]='something'` syntax somewhere in your code. + +JSX is a syntax extension for JavaScript used by React (and by extension, Next.js). JSX does not support the usage of this particular syntax, hence the error. ## Possible Ways to Fix It -Instead you can use `data-amp-bind-prop='something'` which is a valid AMP alternative +To fix this issue, instead of using `[prop]='something'`, you can use `data-amp-bind-prop='something'`. This is a valid alternative in Accelerated Mobile Pages (AMP) that works well with JSX. ## Useful Links -- [AMP HTML Specification](https://www.ampproject.org/docs/fundamentals/spec) -- [Possible future syntax](https://github.com/ampproject/amphtml/issues/21600) +- [AMP HTML Specification](https://www.ampproject.org/docs/fundamentals/spec) - Understand the underlying standards and rules for creating AMP pages. +- [Possible future syntax](https://github.com/ampproject/amphtml/issues/21600) - Check out the discussions on potential syntax changes that may be applicable in the future. diff --git a/errors/amp-export-validation.mdx b/errors/amp-export-validation.mdx index 78a53d4193..fd00950ea8 100644 --- a/errors/amp-export-validation.mdx +++ b/errors/amp-export-validation.mdx @@ -1,17 +1,18 @@ --- -title: AMP Export Validation +title: Troubleshooting "AMP Export Validation" Error in Next.js +description: This document provides insights on the "AMP Export Validation" error in Next.js and how to address it. --- ## Why This Error Occurred -During export we validate AMP pages using [amphtml-validator](https://www.npmjs.com/package/amphtml-validator). Errors received from the validator will fail the export. +The "AMP Export Validation" error typically occurs during the export process when the AMP pages are validated using the [amphtml-validator](https://www.npmjs.com/package/amphtml-validator). If the validator returns any errors, the export process will fail. -Validation errors will cause pages to not be [indexed by AMP Caches](https://www.ampproject.org/docs/fundamentals/how_cached). +AMP validation errors are crucial as they can prevent your pages from being indexed by AMP Caches. AMP Caches are systems that store and serve valid AMP documents to ensure faster delivery of AMP pages to users. ## Possible Ways to Fix It -Look at the error messages and follow their appropriate links to learn more about the error and how to correct the problem. +To resolve this issue, carefully review the error messages provided by the validator. These messages usually provide detailed insights into the problem and how to fix it. Following the links associated with these error messages can also guide you to more information about the particular error and its solution. ## Useful Links -- [AMP HTML Specification](https://www.ampproject.org/docs/fundamentals/spec) +- [AMP HTML Specification](https://www.ampproject.org/docs/fundamentals/spec) - Get more details about AMP standards and conventions to ensure your pages are compliant. diff --git a/errors/api-routes-response-size-limit.mdx b/errors/api-routes-response-size-limit.mdx index 824e8d1ad1..e66b346204 100644 --- a/errors/api-routes-response-size-limit.mdx +++ b/errors/api-routes-response-size-limit.mdx @@ -1,14 +1,15 @@ --- -title: API Routes Response Size Limited to 4MB +title: Addressing "API Routes Response Size Limited to 4MB" Error in Next.js +description: This document explains the "API Routes Response Size Limited to 4MB" error in Next.js and guides developers on how to modify response size limits. --- ## Why This Error Occurred -API Routes are meant to respond quickly and are not intended to support responding with large amounts of data. The maximum size of responses is 4MB. +The "API Routes Response Size Limited to 4MB" error arises when your API Route is trying to send a response larger than the allowed size of `4MB`. API Routes in Next.js are designed to deliver quick responses and are not built to support the transmission of large amounts of data. ## Possible Ways to Fix It -If you are not using Next.js in a serverless environment, and understand the performance implications of not using a CDN or dedicated media host, you can set this limit to `false` inside your API Route. +If you are not utilizing Next.js in a serverless environment, and you're fully aware of the performance implications, you can disable this limit in your API Route. Here is how you can set `responseLimit` to `false`: ```js filename="pages/api/example.js" export const config = { @@ -18,8 +19,7 @@ export const config = { } ``` -`responseLimit` can also take the number of bytes or any string format supported by `bytes`, for example `1000`, `'500kb'` or `'3mb'`. -This value will be the maximum response size before a warning is displayed. The default value is 4MB. +Alternatively, `responseLimit` can also accept a numeric value (in bytes) or any string format supported by the `bytes` module. This can be a value like `1000`, `'500kb'`, or `'3mb'`. This value will set the maximum response size before a warning is displayed. For example, to set the limit to 8MB: ```js filename="pages/api/example.js" export const config = { @@ -28,3 +28,5 @@ export const config = { }, } ``` + +**Note:** Increasing the response limit can have significant impacts on performance and should only be done after careful consideration. diff --git a/errors/api-routes-static-export.mdx b/errors/api-routes-static-export.mdx index 3709519d04..541902b61c 100644 --- a/errors/api-routes-static-export.mdx +++ b/errors/api-routes-static-export.mdx @@ -1,17 +1,23 @@ --- -title: API routes in Static export +title: Understanding "API Routes in Static Export" Warning in Next.js +description: This document explains the "API Routes in Static Export" warning in Next.js and offers steps to resolve it. --- -#### Why This Warning Occurred +## Why This Warning Occurred -An `exportPathMap` path was matched to an API route. Statically exporting a Next.js application via `next export` disables API routes. +The "API Routes in Static Export" warning is typically raised when an `exportPathMap` path is matched to an API route while trying to statically export a Next.js application via the `next export` command. This command disables API routes as it is designed for a static-only setup. -This command is meant for a static-only setup, and is not necessary to make your application static. Pages in your application without server-side data dependencies will be automatically statically exported by `next build`, including pages powered by `getStaticProps` +Running `next export` is not necessary to make your application static. Pages in your application that do not have server-side data dependencies will be automatically statically optimized when you run `next build`. This includes pages powered by `getStaticProps`. ## Possible Ways to Fix It -Use `next build` with platforms that don't require `next export` like https://vercel.com or remove any paths using API routes from your `exportPathMap` in `next.config.js`. +To resolve this issue, you have two main options: + +1. Use the `next build` command instead of `next export` if you're deploying your application on platforms that don't require `next export`. For example, [Vercel](https://vercel.com) is a popular hosting platform for Next.js applications that supports this feature. +2. If you still need to use `next export`, make sure to remove any paths that use API routes from your `exportPathMap` in your `next.config.js` file. +3. Consider [incrementally adopting the App Router](/docs/app/building-your-application/upgrading/app-router-migration), which supportes [Route Handlers](/docs/app/building-your-application/routing/router-handlers). These "API Routes" can be used to create endpoints that can be statically exported in your application. ## Useful Links -- [Static HTML export](/docs/pages/building-your-application/deploying/static-exports) +- [Static HTML export](/docs/pages/building-your-application/deploying/static-exports) - Learn more about how you can create a static HTML export of your Next.js application. +- [Route Handlers](/docs/app/building-your-application/routing/router-handlers) - Learn more about how you can use Route Handlers to create endpoints that can be statically exported in your application. diff --git a/errors/app-container-deprecated.mdx b/errors/app-container-deprecated.mdx index c2de94260f..e2acca8176 100644 --- a/errors/app-container-deprecated.mdx +++ b/errors/app-container-deprecated.mdx @@ -1,15 +1,17 @@ --- -title: App Container Deprecated +title: Addressing "App Container Deprecated" Error in Next.js +description: This document guides developers on how to resolve the "App Container Deprecated" error in Next.js by updating their custom App component. --- ## Why This Error Occurred -In versions prior to v9.0.4 the `` component was used in `./pages/_app.js` to handle scrolling to hashes. -This handling has been moved up the tree so the `` component is no longer needed in your custom ``! +The "App Container Deprecated" error usually occurs when you are using the `` component in your custom `` (`pages/_app.js`). Prior to version `9.0.4` of Next.js, the `` component was used to handle scrolling to hashes. + +From version `9.0.4` onwards, this functionality was moved up the component tree, rendering the `` component unnecessary in your custom ``. ## Possible Ways to Fix It -Remove the `` component from your Custom `` (`./pages/_app.js`). +To resolve this issue, you need to remove the `` component from your custom `` (`pages/_app.js`). **Before** @@ -46,3 +48,9 @@ class MyApp extends App { export default MyApp ``` + +After making this change, your custom `` should work as expected without the `` component. + +## Useful Links + +- [Custom App](/docs/pages/building-your-application/routing/custom-app) diff --git a/errors/app-dir-dynamic-href.mdx b/errors/app-dir-dynamic-href.mdx index b2f9e82aa4..1e4f60691e 100644 --- a/errors/app-dir-dynamic-href.mdx +++ b/errors/app-dir-dynamic-href.mdx @@ -1,16 +1,21 @@ --- -title: 'Dynamic `href` is not supported in the App Router' +title: Handling "Dynamic href is not Supported in the App Router" Error in Next.js +description: This document describes the dynamic href is not supported in the App Router error in Next.js and provides a solution to fix it. --- ## Why This Error Occurred -You have tried to use a dynamic `href` with `next/link` in the `app` directory. This is not supported as the new client-side router no longer uses a mapping of dynamic routes -> url, instead it always leverages the url. +The "Dynamic `href` is not supported in the App Router" error happens when you try to use a dynamic `href` with `next/link` in the `app` directory. + +The new client-side router in Next.js does not use a mapping of dynamic routes to URLs, but rather it leverages the URL directly. This means it doesn't support dynamic `href` use. ## Possible Ways to Fix It +You need to replace the dynamic `href` with a direct path in the `next/link` component. Here's a before and after comparison of what your code should look like: + **Before** -```jsx filename="app/page.js" +```jsx link ``` **After** -```jsx filename="app/page.js" +```jsx link ``` +In the revised code, the dynamic part of the `href` (`[slug]`) is replaced directly with the actual value (`1`), which simplifies the `href` and makes it a direct path. + ## Useful Links -[`next/link` documentation](/docs/pages/api-reference/components/link#href-required) +- [`next/link` documentation](/docs/app/api-reference/components/link#href-required) - Learn more about the usage of `next/link` in Next.js. diff --git a/errors/app-static-to-dynamic-error.mdx b/errors/app-static-to-dynamic-error.mdx index b8ffcd00f2..03424b988c 100644 --- a/errors/app-static-to-dynamic-error.mdx +++ b/errors/app-static-to-dynamic-error.mdx @@ -1,20 +1,23 @@ --- -title: 'App Router Static to Dynamic Error' +title: Resolving "app/ Static to Dynamic Error" in Next.js +description: This document explains the "app/ Static to Dynamic Error" in Next.js and provides potential solutions to resolve it. --- ## Why This Error Occurred -Inside one of your `app/` pages, the page was initially generated statically at build time, and then during runtime either a fallback path or path being revalidated attempted to leverage dynamic server values e.g. `cookies()` or `headers()`. +The "`app/` Static to Dynamic Error" happens when one of your routes in the `app/` directory is initially generated statically at build time, but during runtime it attempts to use dynamic server values (such as `cookies()` or `headers()`) either for a fallback path or while a path is being revalidated. -This is a hard error by default as a path generated statically can't switch between types during runtime currently. +Currently, Next.js does not support switching between static and dynamic types during runtime, so the system throws an error. ## Possible Ways to Fix It -Prevent usage of these dynamic server values conditionally which can cause the static/dynamic mode of the page to differ between build time and runtime. +To resolve this issue, you have two main options: -Leverage `export const dynamic = 'force-static'` to ensure the page is handled statically regardless of the usage of dynamic server values. Alternatively, if you prefer your page to always be dynamic you can set `export const dynamic = 'force-dynamic'` and it won't attempt to have the page be statically generated. +1. Prevent the conditional use of dynamic server values that may cause the static/dynamic mode of the page to differ between build time and runtime. This ensures consistency in the rendering mode of your page. + +2. Leverage the `dynamic` export to control the handling of your page. If you want to ensure your page is always handled statically, regardless of the usage of dynamic server values, you can use `export const dynamic = 'force-static'`. Conversely, if you prefer your page to always be dynamic, you can use `export const dynamic = 'force-dynamic'`, and your page won't attempt to be statically generated. ## Useful Links -- [static/dynamic rendering](/docs/app/building-your-application/rendering/static-and-dynamic-rendering) -- [dynamic server value methods](/docs/app/building-your-application/rendering/static-and-dynamic-rendering#dynamic-functions) +- [Static and Dynamic Rendering](/docs/app/building-your-application/rendering/static-and-dynamic-rendering) - Learn more about the differences between static and dynamic rendering in Next.js. +- [Dynamic Functions](/docs/app/building-your-application/data-fetching/fetching#server-component-functions) - Understand more about the usage of dynamic server functions in your Next.js application. diff --git a/errors/babel-font-loader-conflict.mdx b/errors/babel-font-loader-conflict.mdx index 10bfb86296..524a78dfdd 100644 --- a/errors/babel-font-loader-conflict.mdx +++ b/errors/babel-font-loader-conflict.mdx @@ -1,16 +1,17 @@ --- -title: 'Babel and `next/font` conflict' +title: Resolving "Babel and `next/font` Conflict" in Next.js +description: This document explains the "Babel and `next/font` Conflict" in Next.js and provides a solution to resolve this issue. --- ## Why This Error Occurred -You have tried to use `next/font` with a custom babel config. When your application has a custom babel config you opt-out of the Next.js Compiler which is required to use `next/font`. +The "Babel and `next/font` Conflict" error arises when you attempt to use `next/font` in conjunction with a custom Babel configuration in your Next.js application. When you have a custom Babel config, you opt out of the Next.js Compiler, which is a requirement for using `next/font`. ## Possible Ways to Fix It -- Remove your custom babel config and use the Next.js Compiler +To address this issue, you should remove your custom Babel configuration (e.g. `.babelrc`) and instead make use of the Next.js Compiler. This ensures compatibility between your Babel configuration and `next/font`. ## Useful Links -- [Next.js Compiler](/docs/architecture/nextjs-compiler) -- [Customizing Babel Config](/docs/pages/building-your-application/configuring/babel) +- [Next.js Compiler](/docs/architecture/nextjs-compiler) - Learn more about the Next.js Compiler and how it benefits your application. +- [Customizing Babel Config](/docs/pages/building-your-application/configuring/babel) - Understand more about how to customize your Babel configuration in a Next.js application, and the implications of doing so. diff --git a/errors/beta-middleware.mdx b/errors/beta-middleware.mdx index 9c39975163..20a46f34d8 100644 --- a/errors/beta-middleware.mdx +++ b/errors/beta-middleware.mdx @@ -1,17 +1,18 @@ --- -title: Beta Middleware Used +title: Addressing "Beta Middleware Used" Error in Next.js +description: This document clarifies the "Beta Middleware Used" error in Next.js and provides a potential solution to fix it. --- ## Why This Error Occurred -[Middleware](/docs/pages/building-your-application/routing/middleware) was beta in versions prior to `v12.2` and not yet covered by [semver](https://semver.org/). +The "Beta Middleware Used" error occurs if you are using [Middleware](/docs/pages/building-your-application/routing/middleware) in a version of Next.js prior to `v12.2`. The Middleware feature was still in beta in those versions and not yet covered by [semver](https://semver.org/) or Semantic Versioning rules. ## Possible Ways to Fix It -You can continue to use Middleware in versions prior to `v12.2`. However, you will need to make changes to upgrade to newer versions. +Despite this error, you can continue using Middleware in versions prior to `v12.2`. Be aware that **upgrading to newer versions of Next.js will require changes to your application to accommodate updates in Middleware handling**. -If you're using Next.js on Vercel, your existing deploys using Middleware will continue to work, and you can continue to deploy your site using Middleware. When you upgrade your site to `v12.2` or later, you will need to follow the [upgrade guide](/docs/messages/middleware-upgrade-guide). +If you're using Next.js on Vercel, your existing deployments using Middleware will remain functional, and you can keep deploying your site with Middleware. However, when you decide to upgrade your site to Next.js `v12.2` or later, you'll need to follow the provided [upgrade guide](/docs/messages/middleware-upgrade-guide) to ensure compatibility. ## Useful Links -- [Middleware Upgrade Guide](/docs/messages/middleware-upgrade-guide) +- [Middleware Upgrade Guide](/docs/messages/middleware-upgrade-guide) - Learn more about the necessary steps to upgrade your application to a version of Next.js that includes the official version of Middleware. diff --git a/errors/build-dir-not-writeable.mdx b/errors/build-dir-not-writeable.mdx index 661336b6a0..4944f80186 100644 --- a/errors/build-dir-not-writeable.mdx +++ b/errors/build-dir-not-writeable.mdx @@ -1,14 +1,17 @@ --- -title: Build directory not writeable +title: Handling "Build Directory Not Writeable" Error in Next.js +description: This document explains the "Build Directory Not Writeable" error in Next.js and provides a solution to resolve this issue. --- ## Why This Error Occurred -The filesystem does not allow writing to the specified directory. A common cause for this error is starting a [custom server](/docs/pages/building-your-application/configuring/custom-server) in development mode on a production server, for example, [Vercel](https://vercel.com) which doesn't allow you to write to the filesystem after your app is built. +The "Build Directory Not Writeable" error usually occurs when the file system does not permit writing to the designated directory. A common scenario for this error is when you initiate a [custom server](/docs/pages/building-your-application/configuring/custom-server) in development mode on a production server. + +These production servers often disallow writing to the filesystem after your application is built, causing this error. ## Possible Ways to Fix It -When using a custom server with a server file, for example called `server.js`, make sure you update the scripts key in `package.json` to: +If you're deploying a custom server with a server file (let's assume it's named `server.js`), you should modify the scripts key in your `package.json` to the following: ```json filename="package.json" { @@ -20,7 +23,7 @@ When using a custom server with a server file, for example called `server.js`, m } ``` -and the custom server starts Next in production mode when `NODE_ENV` is `production` +Ensure that your custom server starts Next.js in production mode when `NODE_ENV` is set to `production`: ```js filename="server.js" const dev = process.env.NODE_ENV !== 'production' @@ -29,4 +32,4 @@ const app = next({ dev }) ## Useful Links -- [Custom Server documentation + examples](/docs/pages/building-your-application/configuring/custom-server) +- [Custom Server documentation + examples](/docs/pages/building-your-application/configuring/custom-server) - Learn more about how to effectively set up and manage an ejected server in Next.js. diff --git a/errors/built-in-css-disabled.mdx b/errors/built-in-css-disabled.mdx index f4ed35fc9f..ddaeb51607 100644 --- a/errors/built-in-css-disabled.mdx +++ b/errors/built-in-css-disabled.mdx @@ -1,20 +1,21 @@ --- -title: Built-in CSS Support Disabled +title: Resolving "Built-in CSS Support Disabled" Error in Next.js +description: This document provides a comprehensive explanation of the "Built-in CSS Support Disabled" error in Next.js and suggests ways to fix it. --- ## Why This Error Occurred -Custom CSS configuration was added in `next.config.js` which disables the built-in CSS/SCSS support to prevent conflicting configuration. +The "Built-in CSS Support Disabled" error typically occurs when a custom CSS configuration is added in the `next.config.js` file. This action deactivates the built-in CSS/SCSS support to avoid conflicts in configuration. -A legacy plugin such as `@zeit/next-css` being added in `next.config.js` can cause this message. +If you have added a legacy plugin like `@zeit/next-css` in your `next.config.js` file, you may encounter this error message. ## Possible Ways to Fix It -If you would like to leverage the built-in CSS/SCSS support you can remove any custom CSS configuration or any plugins like `@zeit/next-css` or `@zeit/next-sass` in your `next.config.js`. +If you want to use the built-in CSS/SCSS support, you need to remove any custom CSS configuration or plugins such as `@zeit/next-css` or `@zeit/next-sass` in your `next.config.js` file. We recommend this approach. -If you would prefer not to leverage the built-in support you can ignore this message. +On the other hand, if you choose not to use the built-in support, you can safely ignore this warning. ## Useful Links -- [Built-in CSS Support docs](/docs/pages/building-your-application/styling) -- [Custom webpack config docs](/docs/pages/api-reference/next-config-js/webpack) +- [Built-in CSS Support docs](/docs/pages/building-your-application/styling) - Learn more about the built-in CSS/SCSS support in Next.js and how to use it effectively. +- [Custom webpack config docs](/docs/pages/api-reference/next-config-js/webpack) - Get more information on customizing your webpack configuration in Next.js. diff --git a/errors/built-in-next-font.mdx b/errors/built-in-next-font.mdx index aec286fdec..a6da744b0a 100644 --- a/errors/built-in-next-font.mdx +++ b/errors/built-in-next-font.mdx @@ -1,20 +1,25 @@ --- -title: 'Built-in `next/font`' +title: Resolving "Built-in next/font" Error in Next.js +description: This document offers a detailed guide on fixing the "Built-in `next/font`" error in Next.js, which typically occurs when you're still using the `@next/font` package in Next.js 13.2 and later. --- +`next/font` will automatically optimize your fonts (including custom fonts) and remove external network requests for improved privacy and performance. + ## Why This Error Occurred -Starting with Next.js 13.2, `next/font` is built-in to Next.js and no longer needs to be installed. The `@next/font` package will be removed in Next.js 14. +The "Built-in `next/font`" error is triggered when the `@next/font` package is still installed and used in your Next.js application. + +From version 13.2 onward, **`next/font` has been built into Next.js**, making the `@next/font` package redundant. The `@next/font` package will be completely removed in Next.js 14. ## Possible Ways to Fix It -Run the `built-in-next-font` codemod to automatically uninstall `@next/font` and change `@next/font` imports to `next/font`: +To resolve this issue, you need to uninstall `@next/font` and replace all `@next/font` imports with `next/font` in your project. This can be done automatically using the `built-in-next-font` codemod: -```bash filename="Terminal" +```sh filename="Terminal" npx @next/codemod built-in-next-font . ``` ## Useful Links -- [Codemods](/docs/pages/building-your-application/upgrading/codemods) -- [Optimizing Fonts](/docs/pages/building-your-application/optimizing/fonts) +- [Codemods](/docs/app/building-your-application/upgrading/codemods) - Understand more about codemods and how they can help automate large-scale codebase refactors. +- [Optimizing Fonts](/docs/app/building-your-application/optimizing/fonts) - Learn how to optimize fonts in your Next.js applications for improved performance.