Resolving "Built-in next/font" Error in Next.js

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

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

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:

npx @next/codemod built-in-next-font .

Useful Links

• Codemods - Understand more about codemods and how they can help automate large-scale codebase refactors.
• Optimizing Fonts - Learn how to optimize fonts in your Next.js applications for improved performance.