Kaip next/font optimizuoja šriftus?

Question

Accepted Answer

`next/font` automatiškai optimizuoja žiniatinklio šriftus pagerinant našumą ir pašalindamas išdėstymo poslinkius — savitalpiai nuglaudindama šriftus statinio generavimo metu ir tvarkydama įkėlimo detales jūsų vardu. ## Google šrifto naudojimas ```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} ); } ``` ## Ką jis automatiškai daro - **Savitalpa** — statinio generavimo metu Next atsisiunta Google šriftą ir patalpina jį jūsų domene. Nėra iškvietos į Google serverius vykdymo metu → greitesnis ir geresnis privatumui (nėra trečiųjų šalių sekimo). - **Nulinis išdėstymo poslinkis** — jis apskaičiuoja atsarginės šrifto metrikos, kad sutaptų su žiniatinklio šriftu, todėl kai tikrasis šriftas pakeičiama, tekstas nejuda (apsaugo CLS). - **Įkėlimas iš anksto ir poaibiai** — įkelia šriftą iš anksto ir įtraukia tik nurodytus simbolių poaibius, sumažindamas atsisiuntimą. - **Jokia blokavimo užklausa** — šriftai yra jūsų statinio dalis, ne blokuojantis išorinis parsiuntimas. ## Lokalūs šriftai ```tsx import localFont from "next/font/local"; const myFont = localFont({ src: "./MyFont.woff2", display: "swap" }); ``` ## Kodėl šrifto optimizavimas svarbus Šriftai yra klasikinis našumo ir CLS uždavinys: trečiosios šalies parsiuntimas, kuris blokuoja teksto renderavimą, o paskui sukelia išdėstymo poslinkį, kai šriftas įkraunamas (FOUT/FOIT). To tinkamai padaryti rankiniu būdu reikalingas `@font-face`, `font-display`, įkėlimas iš anksto ir atsarginės metrikos atitikimas. ## Kodėl tai svarbu `next/font` automatizuoja visą šrifto-našumo kontrolinį sąrašą — savitalpą (greitis + privatumas), poaibius bei įkėlimą iš anksto (mažiau, greičiau) ir atsarginės metrikos atitikimą (nėra išdėstymo poslinkio) — už vieno importavimo. Jis pašalina sudėtingą, lengvai klaidintiną optimizavimą ir yra rekomenduojamas būdas naudoti tiek Google, tiek lokalius šriftus Next.js.