Si next/font optimizëson fontet?

Question

Accepted Answer

`next/font` optimizin automatikisht fontet e uebit për të përmirësuar performancën dhe për të eliminuar ndryshimin e paraqitjes — duke ruajtur në vetëzotërim fontet në kohën e ndërtimit dhe duke menaxhuar detajet e ngarkimit për ju. ## Përdorimi i një fonti Google ```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} ); } ``` ## Çfarë bën atë automatikisht - **Ruajtje në vetëzotërim** — në kohën e ndërtimit, Next shkarkon fontin Google dhe e shërben nga **juaja** domen. Asnjë kërkesë për serverët e Google në kohën e ekzekutimit → më i shpejtë dhe më i mirë për privatësinë (pa ndjekje të palës së tretë). - **Zero ndryshim paraqitjeje** — ai llogarit metrikat e fontit zëvendësues që përputhen me fontin e uebit, kështu që kur fonti real ndërrohet, teksti nuk lëviz (mbron CLS). - **Parapërgaditje dhe nënbashkësi** — paraarreston fontin dhe përfshin vetëm nënbashkësitë e specifikuara të karaktereve, duke zvogëluar shkarkim. - **Asnjë kërkesë bllokuese për interpretim** — fontet janë pjesë e ndërtimit tuaj, jo një shkarkim i jashtëm bllokues. ## Fontet lokale ```tsx import localFont from "next/font/local"; const myFont = localFont({ src: "./MyFont.woff2", display: "swap" }); ``` ## Pse optimizimi i fontit është i rëndësishëm Fontet janë një problem klasik i performancës dhe CLS: një shkarkim palës së tretë që bllokon interpretimin e tekstit, pastaj shkakton një ndryshim paraqitjeje kur fonti ngarkohet (FOUT/FOIT). Bërja e kësaj mirë manualisht kërkon `@font-face`, `font-display`, paraparaqitje dhe përputhje metrikash zëvendësuese. ## Pse është i rëndësishëm `next/font` automatizin të gjithë listën e kontrollimit të performancës së fontit — ruajtje në vetëzotërim (shpejtësi + privatësi), nënbashkësi dhe paraarrestion (më i vogël, më i shpejtë) dhe përputhje metrikash zëvendësuese (pa ndryshim paraqitjeje) — pas një importimi. Ai heq një optimizim të vështirë, të lehtë për të bërë gabim dhe është mënyra e rekomanduar për të përdorur si fontet e Google ashtu edhe fontet lokale në Next.js.