CODEWITHSUNDEEP
next.js
Stefano Borini
Stefano Borini

Reputation: 143805

Next.js example takes a long time to compile due to Inter google fonts

I'm trying with the trivial next.js example blog from their tutorial. However, when I access the page, I get the following situation:

$ npm run dev

> [email protected] dev /Users/<redacted>/tmp/nextjs-blog
> next dev

ready - started server on 0.0.0.0:3000, URL: http://localhost:3000
event - compiled client and server successfully in 386 ms (165 modules)
wait  - compiling /_error (client and server)...
event - compiled client and server successfully in 91 ms (166 modules)
warn  - Fast Refresh had to perform a full reload due to a runtime error.
wait  - compiling / (client and server)...
error - Failed to download `Inter` from Google Fonts. Using fallback font instead.
event - compiled client and server successfully in 152.9s (195 modules)
error - Failed to download `Inter` from Google Fonts. Using fallback font instead.
warn  - Fast Refresh had to perform a full reload due to a runtime error.

I am not sure why it hangs for two minutes and why it can't download the google fonts. I am behind a proxy, so I suspect that could be a factor, but I cannot find anything on how to set up a proxy for next.js in the configuration (assuming the actual problem is that). Note that HTTP_PROXY and HTTPS_PROXY are set correctly.

I'm running with these:

I tried as suggested to run npm run build, and I get the following:

$ npm run build 

> [email protected] build /Users/xxx/tmp/nextjs-blog
> next build

info  - Linting and checking validity of types  
info  - Creating an optimized production build  
Failed to compile.

pages/index.tsx
`@next/font` error:
Failed to fetch `Inter` from Google Fonts.


> Build failed because of webpack errors
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] build: `next build`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the [email protected] build script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

The logs file does not give more info than this.

Upvotes: 17

Views: 25005

Answers (8)

xgqfrms
xgqfrms

Reputation: 12176

Solution 1

Just remove the @next/font/google module, if you don't need it.

import Head from 'next/head'
import Image from 'next/image'
- import { Inter } from '@next/font/google'
import styles from '@/styles/Home.module.css'

- const inter = Inter({ subsets: ['latin'] })

Solution 2

If you are using a VPN, quit your VPN and try it again, as @ashwani-panwar suggested.

enter image description here

References

https://github.com/vercel/next.js/discussions/46012

Upvotes: 10

M.A Shahbazi
M.A Shahbazi

Reputation: 1081

This is indeed a VPN issue, sometimes it loads and sometimes it doesn't.

Unfortunately there's no proper fix for this, however I've used a hack in our app to allow having a good DX, you may want to try it.

Modify your root layout like the following so that you can load the font from Google locally, but keep using the Next.js approach when it's in production.

const interFont = Inter({
    subsets: ["latin"],
    display: "swap",
    variable: "--font-sans",
});

const IS_DEV = process.env.NODE_ENV === "development";

export default function RootLayout({ children }: ReactNode) {
    return (
        <html>
            {IS_DEV && (
                <head>
                    <link href="https://fonts.googleapis.com" rel="preconnect" />
                    <link crossOrigin="" href="https://fonts.gstatic.com" rel="preconnect" />
                    <link
                        href="https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap"
                        rel="stylesheet"
                    />
                    <style
                        dangerouslySetInnerHTML={{
                            __html: ` :root { --font-sans: 'Inter', sans-serif; } `,
                        }}
                    />
                </head>
            )}
            <body className={!IS_DEV ? interFont.variable : ""}>{children}</body>
        </html>
    );
}

Note that I'm using the variable approach so your solution might differ, but it works.

Upvotes: 2

Dhamith Kumara
Dhamith Kumara

Reputation: 864

I also have the same issue in Next.js 14.0.4 . remove the .next folder then it will fix

Upvotes: 0

Vimukthi Bandaragoda
Vimukthi Bandaragoda

Reputation: 31

Update your project as follows.

tailwind.config.js

/** @type {import('tailwindcss').Config} */
module.exports = {
content: [
"./app/**/*.{js,ts,jsx,tsx,mdx}",
"./pages/**/*.{js,ts,jsx,tsx,mdx}",
"./components/**/*.{js,ts,jsx,tsx,mdx}",

// Or if using `src` directory:
"./src/**/*.{js,ts,jsx,tsx,mdx}",
],
sans: [
      "Inter",
      "ui-sans-serif",
      "system-ui",
      "-apple-system",
      "system-ui",
      "Segoe UI",
      "Roboto",
      "Helvetica Neue",
      "Arial",
      "Noto Sans",
      "sans-serif",
      "Apple Color Emoji",
      "Segoe UI Emoji",
      "Segoe UI Symbol",
      "Noto Color Emoji",
    ],
sans: [
      "Inter",
      "ui-sans-serif",
      "system-ui",
      "-apple-system",
      "system-ui",
      "Segoe UI",
      "Roboto",
      "Helvetica Neue",
      "Arial",
      "Noto Sans",
      "sans-serif",
      "Apple Color Emoji",
      "Segoe UI Emoji",
      "Segoe UI Symbol",
      "Noto Color Emoji",
    ],
},
},
},
plugins: [],
};

next.config.js

/** @type {import('next').NextConfig} */
 const nextConfig = {
  swcMinify: true,
  };

  module.exports = nextConfig;

globals.css

@import 'tailwindcss/base';
@import 'tailwindcss/components';
@import 'tailwindcss/utilities';

 html,
 body {
  padding: 0;
  margin: 0;
  overflow: auto;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
  Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
 }

layout.js

import './globals.css'
import { Inter } from 'next/font/google'

const inter = Inter({ subsets: ['latin'] })

export const metadata = {
  title: 'Create Next App',
  description: 'Generated by create next app',
}

export default function RootLayout({ children }) {
  return (
    <html lang="en">
     <body className={inter.className}>{children}</body>
    </html>
 )
}

after updating those files please restart the project and clear the browser cache.

Upvotes: 0

Juan Jose Mayorga
Juan Jose Mayorga

Reputation: 61

Sometimes the version of Node you're using can cause this issue. In my case, I was using version 14, but I was able to fix it by using the LTS version of Node with nvm: nvm use --lts

Upvotes: 5

Kelvin praises
Kelvin praises

Reputation: 458

I had this same issue, but I wasn't behind a proxy, after a lot of code testing I discovered the fault was from @next/font/google, it stuck on compiling /page and didn't show an error. A temporary solution I found is to use a VPN service to change your IP address, there seems to be a network request issue when Next gets the fonts from the server.

Update

visiting https://fonts.google.com seems to indicate whether the issue is from Google's servers or something else, if @next/font/google is causing a slowdown visiting the fonts page ussually hangs too.

Upvotes: 0

Ashwani Panwar
Ashwani Panwar

Reputation: 4588

I Disconnected with the VPN and it solved this problem.

Upvotes: 1

Meng Xiangzhuo
Meng Xiangzhuo

Reputation: 47

Same issue, I suspect it's because @next/font doesn't respect HTTPS_PROXY environment variable. It's really frustrating for a new user (behind a proxy) who read the fantastic docs but cannot even run a minimal create-next-app project (at least the default index.js).

Upvotes: 3

Related Questions