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> ); }