由于 Inter google 字体，Next.js 示例需要很长时间才能编译

Question

我正在尝试使用他们教程中的简单 next.js 示例博客。但是，当我访问该页面时，出现以下情况：

$ npm run dev

> nextjs-blog@0.1.0 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.

我不知道为什么它挂起两分钟以及为什么它无法下载谷歌字体。我在代理后面，所以我怀疑这可能是一个因素，但我找不到有关如何在配置中为 next.js 设置代理的任何信息（假设实际问题是这样）。请注意，HTTP_PROXY 和 HTTPS_PROXY 设置正确。

我正在运行这些：

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

我尝试按照建议运行 npm run build，得到以下结果：

$ npm run build 

> nextjs-blog@0.1.0 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! nextjs-blog@0.1.0 build: `next build`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the nextjs-blog@0.1.0 build script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

日志文件不会提供比这更多的信息。

Answer 1

一些解决方案

解决方案1

@next/font/google如果不需要，只需删除该模块即可。

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'] })

解决方案2

如果您正在使用 VPN，请退出 VPN 并重试。

正如@ashwani-panwar 建议的那样。

这个对我有用。

参考文献

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

Answer 2

有时，您使用的Node版本可能会导致此问题。就我而言，我使用的是版本 14，但我可以通过使用 Node 的 LTS 版本和 nvm 来修复它：nvm use --lts

Answer 3

同样的问题，我怀疑这是因为 @next/font 不尊重HTTPS_PROXY 环境变量。对于阅读了精彩文档但甚至无法运行最小的 create-next-app 项目（至少是默认项目）的新用户（在代理后面）来说，这确实令人沮丧index.js。