Error using font in next.js

[tonyxiao]

What version of Bun is running?

1.2.1

What platform is your computer?

Darwin 24.3.0 arm64 arm

What steps can reproduce the bug?

Create app

❯ bun create next-app
✔ What is your project named? … bun-nextjs
✔ Would you like to use TypeScript with this project? … No / Yes
✔ Would you like to use ESLint with this project? … No / Yes
Creating a new Next.js app in /Users/tony/Code/tonyxiao/bun-nextjs.

Using npm.

Installing dependencies:
- react
- react-dom
- next
- @next/font
- typescript
- @types/react
- @types/node
- @types/react-dom
- eslint
- eslint-config-next


added 302 packages, and audited 303 packages in 17s

124 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities

Initializing project with template: default

Initialized a git repository.

Success! Created bun-nextjs at /Users/tony/Code/tonyxiao/bun-nextjs

A new version of `create-next-app` is available!
You can update by running: npm i -g create-next-app

Run app

❯ bun dev
$ next dev
   ▲ Next.js 15.1.6
   - Local:        http://localhost:3000
   - Network:      http://192.168.18.52:3000

 ✓ Starting...
 ✓ Ready in 2.3s

Visit home page, voila error!

⚠ Your project has `@next/font` installed as a dependency, please use the built-in `next/font` instead. The `@next/font` package will be removed in Next.js 14. You can migrate by running `npx @next/codemod@latest built-in-next-font .`. Read more: https://nextjs.org/docs/messages/built-in-next-font
 ○ Compiling / ...
 ✓ Compiled / in 1038ms (317 modules)
 ⨯ Error: @next/font/google failed to run or is incorrectly configured.
If you just installed `@next/font`, please try restarting `next dev` and resaving your file.

Read more: https://nextjs.org/docs/basic-features/font-optimization
    at @next/font/google (.next/server/pages/index.js:86:18)
    at __webpack_require__ (.next/server/webpack-runtime.js:33:42)
    at eval (webpack-internal:///./pages/index.tsx:11:75)
    at ./pages/index.tsx (.next/server/pages/index.js:65:1)
    at __webpack_require__ (.next/server/webpack-runtime.js:33:42) {
  page: '/'
}
 ✓ Compiled /_error in 45ms (319 modules)
 GET / 500 in 1519ms

I've determined error to come from usage @next/font inside index.tsx. If i remove import and usage of it then app starts successfully.

import Head from 'next/head'
import Image from 'next/image'
// import { Inter } from '@next/font/google'
import styles from '../styles/Home.module.css'

// const inter = Inter({ subsets: ['latin'] })

What is the expected behavior?

No crash. Node.js works out of the box.

What do you see instead?

crash

Additional information

If i use fonts, it crash.

[RiskyMH]

@tonyxiao I think this sounds like a cache issue with bun using a really old version of create-next-app

Can you run this command to verify its version:

bun create next-app --version 
// hopefully above v15

And this should in theory have it working

bun create next-app@latest

---

context of this error is next.js used to have a @next/font package but then it was so used they just added it in built into next.js.

[tonyxiao]

This is fixed after upgrading to latest create next app. Thanks!

[RiskyMH]

Nice, I wonder why Bun was using a really old version. Maybe it doesn't try to force latest every so often like untaged on bunx does

[DonIsaac]

Closing this as complete. If we want to change installation behavior of bun create, we can open a new issue.