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

Question

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:

• "next": "13.0.7"
• npx create-next-app@latest nextjs-blog --use-npm --example
• GitHub Link

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.

Answer 1

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.

References

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