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

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

About this issue

Original URL
State: open
Created a year ago
Reactions: 17
Comments: 17

Most upvoted comments

+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.

+24

bchilcott on Jul 31, 2023

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.

daveidivide on Nov 15, 2023

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?

roylleh on Apr 1, 2024

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.

daveidivide on Nov 15, 2023

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

geekysam7 on Feb 29, 2024

@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.

henriqpohl on Mar 17, 2024

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

csdiehl on Mar 6, 2024

@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!

henriqpohl on Mar 6, 2024

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

TorryDo on Mar 5, 2024