Replies: 2 comments 2 replies
-
|
Well the NextJs docs are not clear on this at all. It turns out that next/font is a separate package. So the solution looks like this, dead simple: package.json _app.tsx import { AppProps } from 'next/app';
import Head from 'next/head';
import 'swiper/css';
import 'swiper/css/pagination';
import './styles.css'
import { Figtree } from '@next/font/google';
// import localFont from '@next/font/local' <- if you want to use local fonts
const googleFont = Figtree({
weight: '400',
subsets: ['latin'],
})
function CustomApp({ Component, pageProps }: AppProps) {
return (
<>
<Head>
<title>Welcome to www.dicer.ai!</title>
</Head>
<main className={`app ${googleFont.className}`}>
<Component {...pageProps} />
</main>
</>
);
}
export default CustomApp; |
Beta Was this translation helpful? Give feedback.
-
|
Hi, Starting with Next 13.2,
In the docs there's a Version History details element which says:
|
Beta Was this translation helpful? Give feedback.
-
|
Getting: so it's still something wrong. :( |
Beta Was this translation helpful? Give feedback.
-
|
What's your setup? every create-next-app made nowadays uses |
Beta Was this translation helpful? Give feedback.
Uh oh!
There was an error while loading. Please reload this page.
Uh oh!
There was an error while loading. Please reload this page.
-
Summary
Import Syntax Unclear For Types
The docs here show
import { <font-name> } from 'next/google/font';But this discussion shows:
import { <font-name> } from '@next/google/font';I have tried both, neither work. Both say module not found. The first at run-time, the 2nd 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. The error that is thrown doesn't really help 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:
but that did not help.
Note that the
package.jsonis 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.tsfile 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.lockfile 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 workAdditional information
I also found this similar issue, but it's not quite the same: #44225
If I look inside my node_modules, it seems that next/font is not installed. Does nrwl not include it perhaps?
Example
No response
Beta Was this translation helpful? Give feedback.
All reactions