在 Typescript 中找不到 next/google/font 模块

Question

类型的导入语法不清楚

这里的文档显示

import { <font-name> } from 'next/google/font';

它可以编译，但在运行时会抛出错误“找不到模块”。

但这次讨论表明：

import { <font-name> } from '@next/google/font';

该版本在编译时抛出此错误。

至少知道“@”是否是必需的会有所帮助。我希望文档是最新的，而讨论不是。抛出的错误都无助于消除这两种语法的歧义！

这是一个 nx mono-repo

顺便说一句，这是在 nrwl nx mono-repo 内的 NextJs 项目中。

我尝试更新 package.json 以包括：

"@types/next": "13.1.1",

但这没有帮助。

请注意，它package.json位于 monorepo 的根目录（但所有其他 deps 和 devDeps 都在那里，因此它必须是正确的位置，因为子项目没有自己的 package.json 文件）。

类型声明文件

应用程序内部（即子文件夹）是一个index.d.ts文件，我尝试在其中添加：

declare module 'next/font/google'

和

declare module '@next/font/google'

都没有解决问题。

Stackoverlflow类似问题

stackoverflow 上有这个，但这也没有帮助。

纱线锁文件

文件中yarn.lock包含以下条目，它似乎在 @nrwl 命名空间内打包，所以我尝试了“@nrwl/next/google/font”，但这也不起作用

"@types/next": "13.1.1",

Answer 1

Next.js 13.2.0 之前

• 您需要添加包@next/font yarn add @next/font/或/npm i @next/font

Next.js 13.2.0 之后（Next.js 13.2.0 及更高版本）

• Next fonts 包默认包含在 Next.js 中，因此您不需要安装额外的包（如果您安装了 @next/font，请将其删除），并且您需要从本机包导入而next/font不是@next/font（不带@）