Cannot find next/google/font module in Typescript

Question

Import Syntax Unclear For Types

The docs here show

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

It compiles but at run-time throws the error "module not found".

But this discussion shows:

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

This version throws this error at compile time.

It would help to at least know whether the "@" is required or not. I hope the docs are up-to-date and the discussion is not. Neither error that is thrown helps to disambiguate these 2 syntaxes!

This is an nx mono-repo

Btw, this is in a NextJs project inside a nrwl nx mono-repo.

I tried updating the package.json to include:

"@types/next": "13.1.1",

but that did not help.

Note that the package.json is at the root of the monorepo (but all other deps and devDeps are there, so it must be the correct place, as sub-projects don't have their own package.json files).

Type Declaration File

Inside the app (ie. the sub-folder) is an index.d.ts file where I tried adding:

declare module 'next/font/google'

and

declare module '@next/font/google'

Neither solved the problem.

Stackoverlfow similar issue

There is this on stackoverflow, but that did not help either.

Yarn lock file

In the yarn.lock file is the following entry, which seems to package next inside the @nrwl namespace, so I tried '@nrwl/next/google/font' but that also did not work

"@nrwl/[email protected]":
  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"

Answer 1

Before Next.js 13.2.0

• You need to add package @next/font yarn add @next/font /or/ npm i @next/font

After Next.js 13.2.0 (Next.js 13.2.0 and higher)

• Next fonts package is included to Next.js by default, so you don't need to install extra package (if you have @next/font installed, remove it) and you need to import from the native package next/font instead of @next/font (without the @)