Next.js es un marco basado en React de pila completa, a diferencia de una aplicación de reacción tradicional donde toda la aplicación se carga y se procesa en el cliente, Next.js permite que el servidor procese la carga de la primera página, lo cual es excelente para SEO & Actuación.
Algunas de las características clave de Next.js son:
- Optimización de imagen
- Enrutamiento de página fácil
- Fuera de la caja Soporte de TypeScript.
- Fácil implementación
- Generación de sitios estáticos
Puede obtener más información sobre Next aquí. En este artículo, aprenderemos a agregar fuentes personalizadas a nuestro proyecto Next.js.
Paso 1: Cree un nuevo proyecto siguiente usando el comando a continuación. (Asegúrese de tener npm y node instalados)
npx create-next-app myproject
Paso 2: abra el proyecto en su editor de código y cree una nueva carpeta en el directorio raíz llamada fuentes .
Paso 3: si ya tiene las fuentes, omita este paso. Descargue las fuentes requeridas de Google Fonts .
Para este artículo, estamos descargando la fuente Rubik de las fuentes de Google.
Paso 4: ahora mueva todas las fuentes al directorio /fonts , para que podamos agregar una ruta relativa en nuestro CSS para acceder a estas fuentes.
Estructura del proyecto:
Paso 5: Agregue CSS para crear una familia de fuentes personalizada para estas fuentes. Agregaremos este CSS en estilos globales para que toda la aplicación pueda acceder a estas fuentes, pero también puede agregar fuentes para una página web específica.
/styles/global.css
@font-face {
font-family: "Rubik";
src: url('../fonts/rubik/Rubik-Regular.ttf');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: "Rubik";
src: url('../fonts/rubik/Rubik-Bold.ttf');
font-weight: bold;
font-style: normal;
}
@font-face {
font-family: "Rubik";
src: url('../fonts/rubik/Rubik-Italic.ttf');
font-weight: normal;
font-style: italic;
}
También podemos agregar varios pesos de fuente y estilos de fuente para la misma familia de fuentes, como se muestra arriba.
Paso 6: probemos esta fuente en nuestro archivo ./pages/index.js (página de inicio). Eliminaremos todo el código repetitivo por simplicidad y agregaremos sus estilos a ./styles/Home.module.css .
./pages/index.js
import styles from '../styles/Home.module.css'
export default function Home() {
return (
<h1 className={styles.testFont}>Hello Geeks</h1>
)
}
./styles/Home.module.css
.testFont {
font-family: 'Rubik' , sans-serif;
font-weight: bold;
color: green;
font-size: 3rem;
}
Producción:
Publicación traducida automáticamente
Artículo escrito por ksangtiani13 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA