我第一次使用create-next-app
创建了一个新的Next.js项目,并且成功运行了npm run dev
。
问题是,每次Next.js启动时都会显示:
FetchError: request to https://fonts.gstatic.com/s/inter/v12/UcC73FwrK3iLTeHuS_fvQtMwCp50KnMa1ZL7W0Q5nw.woff2 failed, reason:
at ClientRequest.<anonymous> (C:\Users\user\Desktop\documents\node_modules\next\dist\compiled\node-fetch\index.js:1:65756)
at ClientRequest.emit (node:events:511:28)
at TLSSocket.socketErrorListener (node:_http_client:495:9)
at TLSSocket.emit (node:events:511:28)
at emitErrorNT (node:internal/streams/destroy:151:8)
at emitErrorCloseNT (node:internal/streams/destroy:116:3)
at process.processTicksAndRejections (node:internal/process/task_queues:82:21) {
type: 'system',
errno: 'ENETUNREACH',
code: 'ENETUNREACH'
}
- error Failed to download `Inter` from Google Fonts. Using fallback font instead.
我的目标是让 Next.js 使用实际字体而不是备用字体。
我不知道为什么会发生这种情况,因为我还没有在 Next.js 中做出任何更改。即使在浏览器中打开 URL https://fonts.gstatic.com/s/inter/v12/UcC73FwrK3iLTeHuS_fvQtMwCp50KnMa1ZL7W0Q5nw.woff2
也可以正常工作,所以我猜这不是一个网络问题。
我尝试在 Next.js 的文档中进行搜索,但没有找到重复内容。
这是位于 src/app/
内的 layout.tsx
:
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,
}: {
children: React.ReactNode
}) {
return (
<html lang="en">
<body className={inter.className}>{children}</body>
</html>
)
}
此外,我正在运行的是 Node 版本 20.3.0
和 npm 版本 9.4.1
,使用 Next.js 13.4
。基本上是写这个问题时的最新版本。
.__className_f6fa1f
是body
元素*。 - undefined