Missing fonts when previewing Next.js app in Experience Editor

Question

I've got a Next.js-based app that uses custom fonts. On the Rendering host the fonts are accessible via the following url:

https://www.myapp.localhost/_next/static/media/lato-latin-400-normal.b7ffde23.woff2

Experience Editor tries to load fonts from CM but the fonts are not found and 404 is returned:

https://cm.localhost/_next/static/media/lato-latin-400-normal.b7ffde23.woff2

In the same time, the webpack.js file is requested from the Rendering host and successfully received:

https://www.myapp.localhost/_next/static/chunks/webpack.js?ts=1665501553546

How to make Experience Editor request fonts from the Rendering host?

Answer 1

Tell your NextJS app to render the fonts using absolute URL.

We did it in our app by setting the PUBLIC_URL variable to the base URL of our app, which in your case, https://www.myapp.localhost.

You will also need to configure your NextJS app to allow cross domain request from your CM hostname. See this doc to see how you can modify http headers in NextJS.