Could not use relative URLs with "next/font"
Nobody has claimed this yet.
- Dominant language
- JavaScript
- Stars
- 142k
- Forks
- 32.4k
- Avg merge
- 2d 14h
- Merged PRs (30d)
- 351
Description
Verify canary release
- I verified that the issue exists in the latest Next.js canary release
Provide environment information
Operating System:
Platform: win32
Arch: x64
Version: Windows 11 Enterprise
Binaries:
Node: 20.3.1
npm: N/A
Yarn: N/A
pnpm: N/A
Relevant Packages:
next: 13.4.8-canary.13
eslint-config-next: 13.4.7
react: 18.2.0
react-dom: 18.2.0
typescript: 5.1.6
Next.js Config:
output: export
Which area(s) of Next.js are affected? (leave empty if unsure)
Font optimization (next/font)
Link to the code that reproduces this issue or a replay of the bug
npx create-next-app
To Reproduce
I want to export my pages using relative URL's like:
href="_next/static/...."
I am using the solution here: https://github.com/vercel/next.js/issues/2581
I am using the basic project created by create-next-app without Tailwind CSS.
(Every option in create-next-app is default except for Tailwind CSS )
Here is my next.config.js:
const nextConfig = {
output: 'export',
assetPrefix: './'
}
module.exports = nextConfig
When I run "next build", an error occurs:
app\layout.tsx
`next/font` error:
assetPrefix must start with a leading slash or be an absolute URL(http:// or https://)
Describe the Bug
If I comment everything related to "next/font" in "app\layout.tsx"
import './globals.css'
// import { Inter } from 'next/font/google'
// const inter = Inter({ subsets: ['latin'] })
export const metadata = {
title: 'Create Next App',
description: 'Generated by create next app',
}
export default function RootLayout({
children,
}: {
children: React.ReactNode
}) {
return (
<html lang="en">
{/*<body className={inter.className}>{children}</body>*/}
<body>{children}</body>
</html>
)
}
Everything works fine.
So the bug is with next/font module.
Expected Behavior
"next/font" should support a relative path in assetPrefix like "./"
Which browser are you using? (if relevant)
No response
How are you deploying your application? (if relevant)
No response
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start with next.config.js and app/layout.tsx, then run next build on the create-next-app reproduction using output: 'export' and assetPrefix: './'. Trace the next/font error requiring a leading slash or absolute URL, and verify that relative asset paths work without breaking font optimization.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- next.js
- Domain
- frontend
- Issue type
- Bug
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 35/100