next.js - 在 Typescript 中找不到 next/google/font 模組

類型的匯入語法不明確

這裡的文件顯示

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

它可以編譯，但在運行時拋出錯誤「找不到模組」。

但是這個討論顯示：

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

這個版本在編譯時會拋出此錯誤。

至少知道「@」是否必需會有幫助。我希望文件是最新的，而討論不是。被拋出的任何錯誤都無法幫助分辨這兩種語法！

這是一個 nx 單一倉庫

順便說一下，這是在一個 NextJs 專案中，位於 nrwl nx 的單一倉庫裡。

我嘗試更新 package.json 以包含：

"@types/next": "13.1.1",

但那並沒有幫助。

請注意，package.json 位於 monorepo 的根目錄（但所有其他依賴和開發依賴都在那裡，因此這一定是正確的位置，因為子專案沒有自己的 package.json 文件）。

類型宣告檔

在應用程式內（即子資料夾）有一個 index.d.ts 文件，我嘗試在裡面加入：

declare module 'next/font/google'

和

declare module '@next/font/google'

兩者都沒有解決問題。

Stackoverflow 類似問題

在 Stack Overflow 上有這個，但那也沒有幫助。

Yarn 鎖定檔

在 yarn.lock 文件中有以下條目，看起來似乎是在 @nrwl 名稱空間內打包 next，所以我嘗試了 '@nrwl/next/google/font'，但那也不起作用

"@nrwl/[email ":
  version "15.8.8"
  resolved "https://registry.npmjs.org/@nrwl/next/-/next-15.8.8.tgz"
  integrity sha512-h7sYBf8ljyfXyoSCgiHxukB/AyZsHNL8g+vSVmr7iCkVd6IgFIa1n3myM7vaALAVrJ0EccXYdK7yuKHbVvfLnA==
  dependencies:
    "@babel/plugin-proposal-decorators" "^7.14.5"
    "@nrwl/devkit" "15.8.8"
    "@nrwl/js" "15.8.8"
    "@nrwl/linter" "15.8.8"
    "@nrwl/react" "15.8.8"
    "@nrwl/workspace" "15.8.8"
    "@svgr/webpack" "^6.1.2"
    chalk "^4.1.0"
    copy-webpack-plugin "^10.2.4"
    dotenv "~10.0.0"
    express "^4.18.1"
    fs-extra "^11.1.0"
    http-proxy-middleware "^2.0.6"
    ignore "^5.0.4"
    semver "7.3.4"
    ts-node "10.9.1"
    tsconfig-paths "^4.1.2"
    tsconfig-paths-webpack-plugin "4.0.0"
    url-loader "^4.1.1"
    webpack-merge "^5.8.0"

答案＃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 字型套件預設已包含在 Next.js 中，因此你不需要安裝額外的套件（如果你已經安裝了 @next/font，請將其移除），並且你需要從原生套件 next/font 導入，而不是從 @next/font（不包含 @）導入