Troubleshooting `next/font` Error in `pnpm create next-app`

Are you having trouble with the `next/font` error when using `pnpm create next-app`? Don't worry, you're not alone. In this article, we will walk you through the steps to troubleshoot and fix this error. By the end of this article, you will have a better understanding of what the error is, why it happens, and how to fix it.

What is the `next/font` error?

The `next/font` error is an error that occurs when you try to use the `next/font` module in a Next.js application created with `pnpm create next-app`. This error occurs because the `next/font` module is not included in the default configuration of `pnpm create next-app`.

Why does the `next/font` error happen?

The `next/font` error happens because the `next/font` module is not included in the default configuration of `pnpm create next-app`. This means that when you try to use the `next/font` module, the application will not be able to find it and will throw an error.

How to fix the `next/font` error

To fix the `next/font` error, you need to manually install the `next/font` module and configure your Next.js application to use it. Here are the steps to do that:

1. Open a terminal window and navigate to the root directory of your Next.js application.

2. Run the following command to install the `next/font` module:

   npm install --save next/font
   

3. Open the `next.config.js` file in your Next.js application.

4. Add the following code to the `next.config.js` file:

   module.exports = {
     webpack: (config, { isServer }) => {
       if (!isServer) {
         config.resolve.fallback = {
           ...config.resolve.fallback,
           "fs": false,
           "path": false,
           "os": false,
         };
       }
       return config;
     },
     experimental: {
       fontLoaders: [
         {
           loader: "@next/font/google",
           options: {
             subsets: ["latin"],
           },
         },
       ],
     },
   };
   

5. Save the `next.config.js` file.

6. Restart your Next.js application.

After following these steps, the `next/font` error should be fixed. You can now use the `next/font` module in your Next.js application.

The `next/font` error is a common error that occurs when using `pnpm create next-app`. By following the steps outlined in this article, you can easily troubleshoot and fix this error. Remember to always install the `next/font` module and configure your Next.js application to use it. With this knowledge, you can now confidently use the `next/font` module in your Next.js applications.

References