Currently, I have a Next.js application deployed on a sub-path of a domain (for example example.com/my-next-js-app). To handle bundle scripts and styles, I utilized the Next.js configuration like so:
const isProd = process.env.NODE_ENV === 'production';
module.exports = {
basePath: isProd ? '/my-next-js-app' : '',
};
When it comes to images, I've developed a function that appends a prefix to the image URL if it's in a production environment.
export function getAssetUrl(path: string) {
return process.env.NODE_ENV === 'production' ? `${MAIN_URL}${path}` : path;
}
However, managing fonts poses a bit of a challenge. My custom font faces are defined within the styles/globals.css file as shown below:
@font-face {
font-family: 'MyCustomFont';
font-style: normal;
font-weight: 400;
src: url('/fonts/MyCustomFont-Regular.ttf') format('truetype');
font-display: swap;
}
@font-face {
font-family: 'MyCustomFont';
font-style: normal;
font-weight: 700;
src: url('/fonts/MyCustomFont-Bold.ttf') format('truetype');
font-display: swap;
}
@font-face {
font-family: 'MyCustomFont';
font-style: italic;
font-weight: 700;
src: url('/fonts/MyCustomFont-BoldItalic.ttf') format('truetype');
font-display: swap;
}
As a result, upon deployment, the fonts will not reside in the root public folder but rather at
example.com/my-next-js-app/fonts/MyCustomFont-xxx.ttf