next.js Could not use relative URLs with "next/font"

Verify canary release

[X] 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

Jun 30 '23 17:06 HalfLegend

+1. It seems Next doesn't have great support for being exported and served on a path that isn't the root, which is really frustrating.

Jul 31 '23 15:07 bchilcott

any update to resolve that?

Nov 13 '23 22:11 henriqpohl

I'm finding I can't use output: 'export' in my next.config.js to output a static build, without getting errors locally.

If I don't add any assetPrefix, then all of my files in a local static build don't link properly.

In my index.html, the scripts/css/fonts etc all have src attributes like this: src="/_next/static/chunks/webpack-6207a2ddf87fc86b.js". I need it to be src="./_next/....... to work.

I have tried adding assetPrefix: './', in the config, but then I get this build error: next/font error: assetPrefix must start with a leading slash or be an absolute URL(http:// or https://)

Why won't NextJS let me add the ./!?

I understand this would likely work on a server if deployed there, but you'd think I'd be able to check it locally.

Nov 15 '23 21:11 daveidivide

Turns out you can run a simple web server from your terminal python3 -m http.server 3000.

cd into the folder where your static build lives.
Run python3 -m http.server 3000
Go to http://localhost:9000/

I know this doesn't fix the initial question, but this worked for me wanting to check the build locally.

I can only confirm the above works on a mac. But getting a simple web server running from a command is an easy google.

Nov 15 '23 22:11 daveidivide

Any updates on this? I'm not sure why won't you allow to have ./ as prefix when we are anyways doing an export?

Feb 29 '24 11:02 geekysam7

Seems like we have to replace /_next/... to ./_next/... manually in out folder using replace all command and hope that this issue will be fixed in the future 🤔

Mar 01 '24 03:03 dofire

@TorryDo seems like this. Do we have any script to do this? I think someone mentioned all-relative can be used but it's not customizable

Mar 01 '24 04:03 geekysam7

Also running into this issue. I need to export a static build that uses a relative path, ./ to upload the build on our CMS, but I get the error "assetPrefix must start with a leading slash or be an absolute URL(http:// or https://)"

has there been any progress on allowing relative paths as the asset prefix? Thanks!

Mar 04 '24 19:03 csdiehl

@geekysam7 @csdiehl , I use this script to change /_next/ to ./_next/ in Linux and it works fine. Gist

Mar 05 '24 04:03 dofire

Hi @TorryDo, Thanks for share it.

But I have some problem here, o paste the .sh in my project but after buil o got this message "find: out: No such file or directory" I paste the .sh in main directory together with my package.json

Should I need to do any more special thing? Thanks!

Mar 06 '24 10:03 henriqpohl

@henriqpohl did you add output="export"? here is the docs. "out" is the default output directory of generated static site

Mar 06 '24 10:03 dofire

@TorryDo I found the problem... You are using Linux and I'm using Mac OS, in that case the .sh command should be like code below:

LC_ALL=C find "out" -type f -exec sed -i '' 's/\/_next/\.\/_next/g' {} +

Now, everything is working for me.

Cheers!

Mar 06 '24 11:03 henriqpohl

thank you @henriqpohl ! that worked for me on Mac OS. I also had to make a couple more changes in the post-processing script:

# replace paths in the CSS
LC_ALL=C find "out/_next/static/css" -type f -exec sed -i '' 's/.\/_next\/static/\.\./g' {} +

# fix the regular expressions that are not escaped - add a \ before any / if there isn't one there already
LC_ALL=C find "out/_next/static/chunks" -type f -exec sed -i '' 's/\.\\/_next\\/data/.\/_next\/data/g' {} +

After that, it worked! hope this helps someone else trying to serve a Next.js static build from any root

Mar 06 '24 21:03 csdiehl

Are there any updates about fixing this build issue?

Mar 17 '24 00:03 emilkrebs

@emilkrebs follow what @TorryDo share on Gist, I modified little bit and work perfect for me, I leaved here my modified also you can found and read in some comments above.

Mar 17 '24 09:03 henriqpohl

If people were using ./ just fine before but can't anymore, then this is a breaking change. Yes I can manually run scripts but why not just let the old functionality be as well?

Apr 01 '24 23:04 roylleh

For Next.js to have such an issue is really funny to me. I am working on implementing the above scripts but why should we need to do it? I saw someone close similar issue by saying:

I recently closed a similar issue to this one as it would involve a lot of work for very minimal gains. https://github.com/vercel/next.js/issues/6059#issuecomment-454357410

What a joke!! I am trying to automate deploys of different sites within 1 S3 bucket as a means of building my pipeling to intake more customers. This is not a "very minimal gains" issue 🙄

Apr 28 '24 17:04 dtbayles

The nextjs team is not going to solve this problem??? What’s amazing is that I already had this kind of problem after building without changing anything after installation. It’s such a high-star project.

Jun 17 '24 22:06 aboutjquery

+1

Edit by maintainer bot: Comment was automatically minimized because it was considered unhelpful. (If you think this was by mistake, let us know). Please only comment if it adds context to the issue. If you want to express that you have the same problem, use the upvote 👍 on the issue description or subscribe to the issue for updates. Thanks!

Jul 21 '24 08:07 TooWhiteT

So will this be fixed? Why enforce http/https prefixes? I run into this weird problem while building an electron application and using static exports. I wish next.js would let go of the restrictions.

Oct 20 '24 14:10 observerkei

This was super frustrating to me as well, and unfortunately I needed to do it in Windows which made things a lot more complicated. I put up a gist that takes @TorryDo 's idea and converts it to PowerShell commands for those of us forced to work in Windows.

Oct 22 '24 17:10 kbuffington

@TorryDo 's idea is working but my images is not loading and when I login the dashboard it show white blank.

Oct 24 '24 07:10 AsimAlam

Unfortunately, I'm having the same problem with nextjs15.

Dec 14 '24 12:12 fevrax

Seeing the same issue, hopping for a quick fix since aside from this Next15 has been great,

Jan 03 '25 05:01 Mylab6

Lol! It should be fixed asap 🤦‍♀️ OMG, these workarounds with a script.

Feb 10 '25 00:02 madfcat

I am also facing the same issue,this needs to be fixed asap

Feb 16 '25 18:02 Mubashirshariq

Any updates?

Edit by maintainer bot: Comment was automatically minimized because it was considered unhelpful. (If you think this was by mistake, let us know). Please only comment if it adds context to the issue. If you want to express that you have the same problem, use the upvote 👍 on the issue description or subscribe to the issue for updates. Thanks!

Apr 05 '25 10:04 SemyonKushnarenko

I had a similar issue with my portfolio website. The generated website code is stored in docs and the github pages publishing source option is set to docs.

The following set of steps resolved my website rendering issue:

Delete the old static website code from repo. (In my case delete docs folder)
Set both assetPath and basePath to '' in next.config.mjs.
Build the website and store the generated code to out folder (npm run build)
Renamed the out to docs.
Added an empty file .nojekyll to docs: source
Pushed the changes to github. The website is rendering properly now.

Apr 06 '25 15:04 nsreekum

I can resolve this issue by changing all the assets' locations in the root file.

Apr 07 '25 05:04 AsimAlam

Any updates? Disappointed to meet such problem... Finding and replacing all "/_next" to "./_next" does solve this problem... yet it is not elegant...

May 09 '25 13:05 Yang-Xijie

next.js next.js copied to clipboard

Could not use relative URLs with "next/font"

Verify canary release

Provide environment information

Which area(s) of Next.js are affected? (leave empty if unsure)

Link to the code that reproduces this issue or a replay of the bug

To Reproduce

Describe the Bug

Expected Behavior

Which browser are you using? (if relevant)

How are you deploying your application? (if relevant)

next.js
next.js copied to clipboard