Tengo una aplicación Next.js implementada en una ruta secundaria de un dominio (por ejemplo, example.com/my-next-js-app ). Para los scripts y estilos del paquete, pude resolverlos usando la configuración de Next.js:
const isProd = process.env.NODE_ENV === 'production'; module.exports = { basePath: isProd ? '/my-next-js-app' : '', }; Para las imágenes, puedo crear una función que agregará un prefijo a la URL de la imagen si está en un entorno de production .
export function getAssetUrl(path: string) { return process.env.NODE_ENV === 'production' ? `${MAIN_URL}${path}` : path; } Pero para las fuentes, no estoy muy seguro de cuál es la forma recomendada. Actualmente tengo caras de fuentes personalizadas en mis styles/globals.css como se muestra a continuación:
@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; } Entonces, cuando se implementen, las fuentes no estarán en la carpeta pública raíz, sino en example.com/my-next-js-app/fonts/MyCustomFont-xxx.ttf .
Resolví el problema creando un componente que contiene los estilos de fuente en un estilo en línea agregado a <head> con la ayuda de Head from next/head . De esta forma, puedo utilizar la función getAssetUrl() en función de la URL del activo correcta.
import Head from 'next/head'; import React from 'react'; import { getAssetUrl } from '../lib/assets'; export default function FontFaces() { return ( <Head> <style dangerouslySetInnerHTML={{ __html: ` @font-face { font-family: 'MyCustomFont'; font-style: normal; font-weight: 400; src: url('${getAssetUrl('fonts/MyCustomFont-Regular.ttf')}') format('truetype'); font-display: swap; } @font-face { font-family: 'MyCustomFont'; font-style: normal; font-weight: 700; src: url('${getAssetUrl('fonts/MyCustomFont-Bold.ttf')}') format('truetype'); font-display: swap; } @font-face { font-family: 'MyCustomFont'; font-style: italic; font-weight: 700; src: url('${getAssetUrl('fonts/MyCustomFont-BoldItalic.ttf')}') format('truetype'); font-display: swap; } `, }} /> </Head> ); }