Next.js Font Optimization Sinhala Guide | next/font | Performance Tips
අපි හැමෝම කැමතියි වේගවත් වෙබ් අඩවි වලට, නේද? Google එකේ පොඩි search එකක් කරද්දී වුණත්, loading වෙන්න වැඩි වෙලාවක් යන site එකක් ආවොත්, අපි ඉක්මනටම ඒක skip කරලා වෙන site එකකට යනවා. ඉතින්, අපේ users ලාට හොඳ අත්දැකීමක් දෙන්න නම්, අපේ වෙබ් අඩවියේ වේගය ඉතා වැදගත්. Next.js වගේ Modern Frameworks වලදී මේ performance එක වැඩි දියුණු කරගන්න අපිට ගොඩක් දේවල් කරන්න පුළුවන්. ඒ වගේ එක වැදගත් අංගයක් තමයි Font Optimization කියන්නේ.
Font Optimization කියන්නේ, අපේ වෙබ් අඩවියේ තියෙන fonts, ඉතාමත් කාර්යක්ෂම විදියට load කරගන්න එකයි. මේක හරියට කළේ නැත්නම්, අපේ site එක slow වෙන්න විතරක් නෙවෙයි, Cumulative Layout Shift (CLS) වගේ කරදරකාරී ප්‍රශ්නත් ඇති වෙන්න පුළුවන්. CLS කියන්නේ, පිටුව load වෙන අතරතුරේදී, content එකේ පිහිටීම අනපේක්ෂිත ලෙස වෙනස් වීම. හිතන්න, ඔයා button එකක් click කරන්න යනකොටම, අකුරු ටික load වෙලා button එකේ තැන වෙනස් වුණා කියලා. ඒක කොච්චර කරදරයක්ද?
වාසනාවකට වගේ, Next.js, මේ ප්‍රශ්නයට නියම විසඳුමක් අරන් ඇවිත් තියෙනවා: ඒ තමයි next/font. මේ guide එකෙන්, අපි next/font කියන්නේ මොකක්ද, ඒක කොහොමද භාවිතා කරන්නේ, ඒකෙන් අපේ site එකේ performance එක වැඩි දියුණු කරගන්නේ කොහොමද කියලා සිංහලෙන් සරලව කතා කරමු.
1. next/font කියන්නේ මොකක්ද?
next/font කියන්නේ Next.js 13 ඉඳලා ආව built-in feature එකක්. මේකෙන් අපිට පුළුවන්, third-party requests නැතිව, අපේ fonts automaticව optimize කරලා, self-host කරගන්න. මේකෙන් වෙන්නේ, අපේ fonts, අපේම server එකෙන් load වෙන එක නිසා, network request අඩු වෙනවා, site එක ඉක්මනට load වෙනවා.
next/font වල විශේෂාංග මොනවාද?
- Automatic Self-Hosting: Google Fonts වුණත්, මේක auto deploy කරනවා. External request එකක් නැතුව අපේම domain එකෙන් serve කරනවා.
- Automatic Subsetting: අපේ site එකේ භාවිතා වෙන අකුරු ටික විතරක් load කරගන්න පුළුවන්. උදාහරණයක් විදියට, ඉංග්‍රීසි අකුරු විතරක් පාවිච්චි කරනවා නම්, Chinese වගේ fonts load වෙන්නේ නැහැ. මේකෙන් font file size එක ගොඩක් අඩු වෙනවා.
- Automatic CLS Prevention: Font loading එකත් එක්ක එන CLS issues,
size-adjust,ascent-override,descent-override,line-gap-overrideවගේ CSS properties භාවිතා කරලා auto handle කරනවා. මේකෙන් layout shifts නැති වෙනවා. - CSS Variable Support: අපිට පුළුවන් fonts, CSS variables විදියට export කරලා, අපේ CSS styles වලදී පහසුවෙන් භාවිතා කරන්න.
සරලව කිව්වොත්, next/font කියන්නේ, අපේ වෙබ් අඩවියේ fonts load වෙන විදිය ගොඩක් smart කරන, අපිට මහන්සි වෙන්න දෙයක් නැතිවම performance එක වැඩි කරන tool එකක්!
2. Google Fonts, next/font එක්ක භාවිතා කරමු
මුලින්ම බලමු, Google Fonts එකක් next/font එක්ක implement කරන්නේ කොහොමද කියලා. මේක ගොඩක්ම සරලයි.
පියවර 1: Font එක Import කරගන්න
අපි _app.js (Pages Router) හෝ layout.js (App Router) file එකේ මේ font එක define කරන්න ඕනේ. උදාහරණයක් විදියට, අපි 'Roboto' කියන Google Font එක භාවිතා කරමු.
// app/layout.js (App Router) හෝ pages/_app.js (Pages Router)
import { Roboto } from 'next/font/google';
const roboto = Roboto({
weight: ['400', '700'], // අපිට ඕන කරන font weights තෝරන්න පුn
subsets: ['latin'], // අපිට ඕන කරන font subsets තෝරන්න (optional)
display: 'swap', // Font loading behaviour එක control කරන්න
});
export default function RootLayout({ children }) {
return (
<html lang="en" className={roboto.className}> {/* className එක add කරන්න */}
<body>{children}</body>
</html>
);
}
මේ code එකෙන් අපි කරන්නේ, Roboto font එක next/font/google වලින් import කරලා, ඒකේ weights (ඝනකම්) ටිකක් specify කරන එක. subsets: ['latin'] කියන්නේ, ඉංග්‍රීසි අකුරු ටික විතරක් load කරන්න කියන එක. display: 'swap' කියන්නේ, font එක load වෙනකල් fallback font එකක් පෙන්නලා, load වුණාට පස්සේ අලුත් font එකට swap කරන්න කියන එක. මේක CLS අවම කරන්න උදව් වෙනවා.
පියවර 2: Font එක HTML Element එකකට Apply කරන්න
දැන්, අපි roboto.className එක, අපේ root HTML element එකට (<html> tag එකට) add කරලා තියෙනවා. ඒ කියන්නේ, අපේ site එකේ හැම text එකකටම මේ Roboto font එක apply වෙනවා.
අපිට මේක CSS variable එකක් විදියටත් export කරන්න පුළුවන්:
// app/layout.js
import { Inter } from 'next/font/google';
const inter = Inter({
subsets: ['latin'],
variable: '--font-inter', // මෙතන CSS variable එකක් විදියට define කරනවා
display: 'swap'
});
export default function RootLayout({ children }) {
return (
<html lang="en" className={`${inter.variable}`}>
<body>{children}</body>
</html>
);
}
දැන් අපේ global CSS file එකේ (උදාහරණයක් විදියට globals.css) අපිට මේ variable එක භාවිතා කරන්න පුළුවන්:
/* app/globals.css */
:root {
--font-inter: 'Inter', sans-serif;
}
body {
font-family: var(--font-inter);
}
මේ විදියට CSS variables භාවිතා කරන එක, අපේ styles manage කරගන්න ගොඩක් පහසුයි.
3. Local Fonts, next/font එක්ක භාවිතා කරමු
සමහර වෙලාවට අපිට custom fonts හෝ Google Fonts වල නැති fonts භාවිතා කරන්න ඕනේ වෙනවා. එහෙමත් නැත්නම්, Google Fonts API එකට request එකක් යවන එකත් වළක්වන්න ඕනේ වෙනවා. එතකොට අපිට පුළුවන් local fonts, අපේම server එකේ host කරලා, next/font එක්ක භාවිතා කරන්න.
පියවර 1: Font Files Add කරන්න
මුලින්ම, අපේ font files (.woff, .woff2, .ttf, .otf වගේ) අපේ project එකේ public folder එකේ හෝ වෙනත් font folder එකක තියන්න.
my-next-app/
├── public/
│ └── fonts/
│ ├── MyCustomFont-Regular.woff2
│ └── MyCustomFont-Bold.woff2
├── app/
└── ...
පියවර 2: Font එක Import කරගන්න
දැන් අපි next/font/local භාවිතා කරලා මේ local font එක import කරගමු.
// app/layout.js
import localFont from 'next/font/local';
const myCustomFont = localFont({
src: [
{ path: '../public/fonts/MyCustomFont-Regular.woff2', weight: '400', style: 'normal' },
{ path: '../public/fonts/MyCustomFont-Bold.woff2', weight: '700', style: 'normal' },
],
variable: '--font-my-custom', // CSS variable එකක් විදියටත් define කරන්න පුළුවන්
display: 'swap',
});
export default function RootLayout({ children }) {
return (
<html lang="en" className={myCustomFont.variable}>
<body>{children}</body>
</html>
);
}
src array එක ඇතුලේ, අපිට පුළුවන් අපේ font file එකේ path එක, ඒකේ weight එක සහ style එක specify කරන්න. මේකෙන් next/font ට පුළුවන්, මේ fonts ටිකත් optimize කරලා load කරන්න. ඉතිරි ක්‍රියාවලිය Google Fonts වල වගේමයි, className හෝ variable භාවිතා කරලා apply කරන එක.
/* app/globals.css */
:root {
--font-my-custom: 'MyCustomFont', sans-serif;
}
body {
font-family: var(--font-my-custom);
}
4. Font Loading එක Verify කරමු සහ Troubleshoot කරමු
අපි next/font භාවිතා කරලා fonts implement කළාට පස්සේ, ඒක හරියට වැඩ කරනවද කියලා verify කරගන්න එක වැදගත්.
Browser Developer Tools වලින් Verify කරගන්න
- ඔයාගේ වෙබ් අඩවිය open කරලා, browser එකේ Developer Tools (F12) open කරන්න.
- Network tab එකට යන්න.
- Page එක refresh කරලා, filter bar එකේ 'font' කියලා type කරන්න.
- ඔයාට පේන්න ඕනේ, ඔයාගේ fonts, ඔයාගේම domain එකෙන් (
_next/static/media/වගේ path එකකින්) load වෙනවා. External domains (likefonts.googleapis.com) වලින් load වෙනවා නම්,next/fontහරියට configure වෙලා නැති වෙන්න පුළුවන්. - ඔයාට පුළුවන් Lighthouse report එකක් run කරලා, site එකේ performance score එක check කරන්න. Font related warnings හෝ suggestions අඩු වෙලාද කියලා බලන්න.
CLS Issues Debug කරන හැටි
next/font, CLS issues auto handle කරනවා වුණත්, සමහර වෙලාවට custom configurations නිසා CLS එන්න පුළුවන්.
- Check for FOUT/FOIT: FOUT (Flash of Unstyled Text) කියන්නේ font එක load වෙනකල් plain text පෙන්නලා, පස්සේ font එකට swap වෙන එක. FOIT (Flash of Invisible Text) කියන්නේ font එක load වෙනකල් text එක නොපෙන්වා ඉඳලා, load වුණාට පස්සේ text එක පෙන්වන එක.
display: 'swap'FOUT handle කරනවා.next/fontමේවාට optimal settings auto apply කරනවා. - CSS Override: සමහර වෙලාවට ඔයාගේ custom CSS නිසා font properties override වෙලා CLS එන්න පුළුවන්. Developer Tools වල Elements tab එකෙන් ගිහින්, font-family, font-size වගේ properties investigate කරන්න.
- Layout Shifts Visualizer: සමහර browser extensions (web vitals checker) හෝ Chrome DevTools වල Performance Insights tab එකේ Layout Shifts visualizer එක භාවිතා කරලා, මොන elements ද shift වෙන්නේ කියලා බලන්න.
5. හොඳම ක්‍රමවේද සහ පොදු ගැටළු (Best Practices & Common Pitfalls)
next/font භාවිතා කරද්දී මතක තියාගන්න ඕනේ වැදගත් කරුණු කිහිපයක් මෙන්න:
next/fontහැමවිටම භාවිතා කරන්න: Font Optimization සඳහා Next.js එකේ built-in method එක වනnext/fontහැමවිටම භාවිතා කරන්න.@font-facerules හෝ external Google Fonts links (<link>tags) භාවිතා කිරීමෙන් වළකින්න.- Self-hosting වලට මුල් තැන දෙන්න: පුළුවන් හැම වෙලාවකම fonts self-host කරන්න. Local fonts භාවිතා කරන එකෙන් network requests අඩු වෙනවා, privacy වැඩි වෙනවා, performance control එකත් වැඩි වෙනවා.
- අවශ්‍ය subsets විතරක් තෝරන්න: ඔයාගේ project එකට අවශ්‍ය භාෂා වලට අදාළ subsets විතරක් import කරන්න. උදාහරණයක් විදියට, ඉංග්‍රීසි site එකකට
latinsubset එක ඇති. මේකෙන් font file size එක සැලකිය යුතු ලෙස අඩු වෙනවා. displayproperty එක තේරුම් ගන්න:display: 'swap'කියන්නේ font එක load වෙනකල් fallback font එකක් පෙන්නලා, load වුණාට පස්සේ swap කරන එක. මේක බොහෝ අවස්ථාවල හොඳයි.display: 'optional'කියන්නේ font එක load වෙන්න වැඩි වෙලාවක් යනවා නම්, fallback font එකම භාවිතා කරලා, load වෙන්න ඉඩ දෙන එක. මේක CLS සම්පූර්ණයෙන්ම වළක්වනවා, නමුත් සමහර වෙලාවට original font එක පේන්නේ නැති වෙන්න පුළුවන්. Context එක අනුව මේක තෝරන්න.- Fallback Fonts: ඔයාගේ
font-familyCSS rule එකේදී,serif,sans-serif,monospaceවගේ generic font families ඇතුළත් කරන්න. Font එක load නොවෙන අවස්ථාවකදී මේවා fallback fonts විදියට වැඩ කරනවා. - Font Preloading:
next/fontauto preloading කරනවා. ඒ නිසා manually preloading කරන්න අවශ්‍ය නැහැ.
අවසන් වශයෙන්
next/font කියන්නේ Next.js ecosystem එකට එකතු වුණ ඉතාමත් වටිනා feature එකක්. මේකෙන් අපිට පුළුවන්, වෙබ් අඩවි වල font loading එක හා සම්බන්ධ ප්‍රශ්න පහසුවෙන් විසඳගෙන, users ලාට වේගවත්, සුමට අත්දැකීමක් දෙන්න. Performance කියන්නේ web development වලදී කිසිම වෙලාවක අමතක නොකළ යුතු දෙයක්. ඒ නිසා, ඔයාගේ ඊළඟ Next.js project එකේදී next/font භාවිතා කරන්න අමතක කරන්න එපා. මේක ඔයාගේ site එකේ loading speed එකට සහ user experience එකට පුදුම හිතෙන වෙනසක් කරයි!
මේ article එකෙන් ඔයාට next/font ගැන හොඳ අවබෝධයක් ලැබෙන්න ඇති කියලා හිතනවා. ඔයාගේ අත්දැකීම්, ප්‍රශ්න, හෝ අදහස් පහලින් comment කරන්න. අපි කතා කරමු!