Kako next/font optimizira fontove?

Question

Accepted Answer

`next/font` automatski optimizira web fontove kako bi poboljšao performanse i uklonio pomak rasporeda — samohostanjem fontova tijekom vremena izgradnje i rukovanjem detaljima učitavanja umjesto vas. ## Korištenje Google fonta ```tsx // app/layout.tsx import { Inter } from "next/font/google"; const inter = Inter({ subsets: ["latin"], // only load the character sets you need (smaller files) display: "swap", // show fallback text immediately, swap when font loads }); export default function RootLayout({ children }) { return ( {/* apply the font */} {children} ); } ``` ## Što automatski radi - **Samohosting** — tijekom izgradnje, Next preuzima Google font i pokreće ga s **vaše** domene. Bez zahtjeva Google serverima tijekom izvođenja → brže i bolje za privatnost (bez praćenja trećih strana). - **Nula pomaka rasporeda** — izračunava metrike rezervnog fonta kako bi se usklađio s web fontom, pa kada se pravi font zamijeni, tekst ne skače (štiti CLS). - **Preuzimanje i subsetting** — preuzima font i uključuje samo određene podskupove znakova, smanjujući preuzimanje. - **Bez zahtjeva koji blokira renderiranje** — fontovi su dio vaše izgradnje, a ne blokirajuća vanjska dohvata. ## Lokalni fontovi ```tsx import localFont from "next/font/local"; const myFont = localFont({ src: "./MyFont.woff2", display: "swap" }); ``` ## Zašto je optimizacija fontova važna Fontovi su klasičan problem performansi i CLS: dohvata treće strane koja blokira renderiranje teksta, a zatim izaziva pomak rasporeda kada se font učita (FOUT/FOIT). Međutim, ovo zahtijeva `@font-face`, `font-display`, preuzimanje i usklađivanje metriker rezerve. ## Zašto je važno `next/font` automatizira cijelu listu kontrole performansi fontova — samohosting (brzina + privatnost), subsetting i preuzimanje (manja, brža), i usklađivanje metriker rezerve (nema pomaka rasporeda) — iza jednog importa. Uklanja zamršenu, lako pogrešnu optimizaciju i preporučeni je način korištenja Google i lokalnih fontova u Next.js-u.