Optimizarea fonturilor cu next/font – Self-hosting automat fără cereri externe în Next.js

import { Inter } from 'next/font/google';

const inter = Inter({ subsets: ['latin'] });

export default function Layout({ children }) {
  return <html className={inter.className}>...</html>;
}

Ce face Optimizarea fonturilor cu next/font - Self-hosting automat fără cereri externe

Pachetul next/font revoluționează încărcarea tipografiei web.

Fonturile Google sunt descărcate și stocate local în mod automat la compilare (`next build`). Browserul nu mai face nicio cerere către domeniile `fonts.googleapis.com` sau `fonts.gstatic.com`, garantând conformitate deplină cu normele GDPR de confidențialitate.

Next.js ajustează automat metricile fontului de fallback pentru a asigura Zero Layout Shift în timpul încărcării.

Exemple

Exemplul 1: Configurarea fontului Inter în RootLayout

Aplică fontul pe întreg corpul paginii.

import { Inter } from 'next/font/google';

const inter = Inter({
  subsets: ['latin'],
  display: 'swap',
});

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="ro" className={inter.className}>
      <body>{children}</body>
    </html>
  );
}

Ieșire în terminal

Fontul este servit local cu zero latență externă.

Greșeli frecvente

• Instanțierea fontului în interiorul funcției componentei în loc de nivelul de modul (în afara componentei), provocând re-descărcări la fiecare randare.

Comenzi înrudite

• Componenta <Image> (next/image) - Optimizarea automată a imaginilor: Extinde elementul HTML <img> oferind conversie automată în WebP/AVIF, redimensionare responsivă și eliminarea fenomenului de deplasare a conținutului (CLS).
• app/layout.tsx - Șabloane de structură persistente (RootLayout și Nested Layouts): Definește structura grafică comună partajată între mai multe pagini (antet, meniu, subsol) ce își păstrează starea la navigare.