Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Fonts are loaded from assetPrefix client-side only #39722

Open
1 task done
florian-milky opened this issue Aug 18, 2022 · 2 comments
Open
1 task done

Fonts are loaded from assetPrefix client-side only #39722

florian-milky opened this issue Aug 18, 2022 · 2 comments
Labels
bug Issue was opened via the bug report template.

Comments

@florian-milky
Copy link

Verify canary release

  • I verified that the issue exists in the latest Next.js canary release

Provide environment information

Operating System:
  Platform: darwin
  Arch: x64
  Version: Darwin Kernel Version 19.6.0: Thu Jun 18 20:49:00 PDT 2020; root:xnu-6153.141.1~1/RELEASE_X86_64
Binaries:
  Node: 14.17.5
  npm: 6.14.14
  Yarn: N/A
  pnpm: N/A
Relevant packages:
  next: 12.2.6-canary.1
  eslint-config-next: N/A
  react: 17.0.2
  react-dom: 17.0.2

What browser are you using? (if relevant)

No response

How are you deploying your application? (if relevant)

next start

Describe the Bug

Thanks to assetPrefix, it's easy to use a CDN for JS and CSS code.

However, it is interfering with fonts and is not working as expected.

Screenshot 2022-08-18 at 10 07 38

It appears that the client code uses the assetPrefix for fonts, but the server-side generated code is not using it, creating mismatched requests.

Important note: our environment variables are used at runtime and not at build time, because we reuse the build for different environments.

Expected Behavior

Fonts to be handled consistently by assetPrefix. It should either work like JS and CSS file, or not be handled at all.

Link to reproduction

https://github.com/florian-milky/asset-font-bug

To Reproduce

1- npm run build

2- npm run copy

3- npx serve -C -p 3006 and in another tab: npm run start

4- open http://localhost:3000/

5- Debug network requests. Observe that font is preloaded from localhost:3000 and then loaded from localhost:3006

@florian-milky florian-milky added the bug Issue was opened via the bug report template. label Aug 18, 2022
@florian-milky
Copy link
Author

florian-milky commented Aug 18, 2022

Related to that issue, I would like to understand how we could setup other types of assets (images) to use our CDN. We can't tweak webpack configuration because it is only called at build time. However I know that webpack has support for dynamic public path, and I would assume that assetPrefix is using that capability. Is it possible to plugin into that?

@florian-milky
Copy link
Author

florian-milky commented Oct 27, 2022

Workaround:

import getConfig from 'next/config';
const { publicRuntimeConfig } = getConfig();

/**
 * Issue with nextjs not using assetPrefix server-side
 * https://github.com/vercel/next.js/issues/39722
 */
export const getAssetUrlWithAssetPrefix = (assetUrl: string) =>
  assetUrl.startsWith('/') ? `${publicRuntimeConfig.ASSET_PREFIX}${assetUrl}` : assetUrl;

In _app

import Font from '../assets/fonts/font.woff2';

...

<link
   rel="preload"
   href={getAssetUrlWithAssetPrefix(Font)}
   as="font"
   crossOrigin="anonymous"
/>

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Issue was opened via the bug report template.
Projects
None yet
Development

No branches or pull requests

1 participant