next/font શું ફોન્ટોને કેવી રીતે શ્રેષ્ઠ બનાવે છે?

Question

Accepted Answer

`next/font` આપોઆપ વેબ ફોન્ટોને શ્રેષ્ઠ બનાવે છે કર્મક્ષમતા સુધારવા અને લેઆઉટ શિફ્ટ દૂર કરવા માટે — બિલ્ડ સમયે ફોન્ટોને સ્વયં-હોસ્ટ કરીને અને લોડિંગ વિગતો તમારા માટે સંભાળીને। ## 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} ); } ``` ## તે આપોઆપ શું કરે છે - **સ્વયં-હોસ્ટિંગ** — બિલ્ડ સમયે, Next Google ફોન્ટ ડાઉનલોડ કરે છે અને તે **તમારી** ડોમેનમાંથી પરિવેશન કરે છે। રનટાઇમ પર Google સર્વરને કોઈ વિનંતી નહીં → વધુ ઝડપી અને ગોપનીયતા માટે વધુ સારું (કોઈ તૃતીય-પક્ષ ટ્રેકિંગ નહીં). - **શૂન્ય લેઆઉટ શિફ્ટ** — તે ફોલબેક ફોન્ટની મેટ્રિક્સ ગણતરી કરે છે વેબ ફોન્ટ સાથે મેળવવા માટે, તેથી જ્યારે વાસ્તવિક ફોન્ટ સ્વિચ થાય છે, ટેક્સ્ટ જમ્પ થતું નથી (CLS સુરક્ષિત કરે છે). - **પૂર્વ-લોડિંગ અને સબસેટિંગ** — ફોન્ટને પૂર્વ-લોડ કરે છે અને માત્ર નિર્દિષ્ટ અક્ષર સબસેટોનો સમાવેશ કરે છે, ડાઉનલોડ ઘટાડીને। - **કોઈ રેન્ડર-બ્લોકિંગ વિનંતી નહીં** — ફોન્ટો તમારી બિલ્ડનો ભાગ છે, બ્લોકિંગ બાહ્ય ફેચ નથી। ## સ્થાનિક ફોન્ટો ```tsx import localFont from "next/font/local"; const myFont = localFont({ src: "./MyFont.woff2", display: "swap" }); ``` ## શા માટે ફોન્ટ ઑપ્ટિમાઇઝેશન મહત્વપૂર્ણ છે ફોન્ટો એક ક્લાસિક કર્મક્ષમતા અને CLS સમસ્યા છે: તૃતીય-પક્ષ ફેચ જે ટેક્સ્ટ રેન્ડરિંગને બ્લોક કરે છે, પછી જ્યારે ફોન્ટ લોડ થાય છે ત્યારે લેઆઉટ જમ્પ કરે છે (FOUT/FOIT). આને યોગ્ય રીતે મેન્યુઅલી કરવા માટે `@font-face`, `font-display`, પૂર્વ-લોડિંગ અને ફોલબેક-મેટ્રિક મેચિંગની જરૂર છે। ## શા માટે તે મહત્વપૂર્ણ છે `next/font` સમગ્ર ફોન્ટ-કર્મક્ષમતા ચેકલિસ્ટ આપોઆપ સંચાલિત કરે છે — સ્વયં-હોસ્ટિંગ (ગતિ + ગોપનીયતા), સબસેટિંગ અને પૂર્વ-લોડિંગ (નાનું, વધુ ઝડપી), અને ફોલબેક મેટ્રિક મેચિંગ (કોઈ લેઆઉટ શિફ્ટ નહીં) — એક આયાત પછી। તે એક મુશ્કેલ, ભૂલ કરવા માટે સરળ ઑપ્ટિમાઇઝેશન દૂર કરે છે અને તે Google અને સ્થાનિક બંને ફોન્ટોને Next.js માં વાપરવાનો ભલામણ કરેલો રસ્તો છે।