Merhaba arkadaşlar, bugün sizlere Next.js projelerinde stil ve font yönetimini nasıl merkezi ve temiz hale getirdiğimi anlatacağım. Özellikle global CSS, Google Fonts veya custom font'lar eklerken yaşadığım dağınıklıktan ve performans sıkıntılarından bıkmıştım. Her component'te ayrı ayrı font import etmek ya da CSS dosyalarını yanlış yere koymak, geliştirme sürecini yavaşlatıyordu. İşte bu sorunlara karşı custom `_app.js` ve `_document.js` dosyalarını kullanarak bulduğum en temiz çözümü paylaşıyorum.
Sorun: Dağınık Stil ve Font Yönetimi
Next.js varsayılan olarak harika, ama global stiller ve font'lar için en iyi yeri bulmak ilk başta kafamı karıştırmıştı. `styles/globals.css` dosyasına her şeyi koymak, `head` içine font link'leri eklemek... Hepsi ayrı yerlerdeydi. Ayrıca, font'ların render bloğu oluşturmadan ve en hızlı şekilde yüklenmesini sağlamak istiyordum. Bu hatayı ilk gördüğümde, fontların geç yüklenmesi nedeniyle layout'un atlaması (FOUT/FOIT) beni çıldırtmıştı.
Çözüm: Custom `_app.js` ile Global Stiller
İlk adım, tüm sayfaları saran ve global stilleri import edebileceğimiz `pages/_app.js` dosyasını oluşturmak. Bu dosya, uygulamanın başlangıç noktası gibidir. Buraya global CSS dosyanızı import edebilirsiniz.
`globals.css` içinde tüm projede geçerli olacak CSS değişkenleri (CSS Custom Properties), reset kuralları veya utility class'larını tanımlayabilirsiniz. `fonts.css` ise `@font-face` tanımlarınız için ideal bir yer. Bu sayede tüm font tanımlarınız bir yerde toplanır.
Sihirli Dokunuş: Custom `_document.js` ile Font Optimizasyonu
Asıl performans ve verimlilik artışı `pages/_document.js` dosyası ile geliyor. Bu dosya, sunucu tarafında (server-side) render edilen HTML belgesinin (`<html>`, `<head>`, `<body>`) yapısını özelleştirmemizi sağlar. Buraya font linklerini veya stil etiketlerini ekleyerek, tarayıcının bu kaynakları en erken aşamada görmesini sağlayabiliriz.
Google Fonts gibi harici fontları en iyi şekilde eklemenin yolu, `next/head` kullanmak değil, doğrudan `_document.js` içindeki `<Head>` bileşenine preconnect ve font linkini yerleştirmektir. İşte benim kullandığım örnek:
Bu yapının en güzel yanı, fontların HTML ile birlikte sunucudan gelmesi ve tarayıcının stil hesaplamasını daha erken yapabilmesi. `preconnect` kullanımı da kaynaklara bağlanma süresini kısaltıyor. Eğer local/project font kullanıyorsanız, onun `@font-face` tanımını yukarıda bahsettiğim `fonts.css` dosyasında yapıp, `_app.js`'te import etmeniz yeterli.
Sonuç ve Performans Kazanımı
Bu iki dosyayı (`_app.js` ve `_document.js`) bu şekilde yapılandırdıktan sonra, stil ve font yönetimi projemde inanılmaz derecede düzene girdi. Lighthouse skorlarımda, özellikle "First Contentful Paint" ve "Cumulative Layout Shift" metriklerinde gözle görülür iyileşmeler oldu. Artık fontlar geç yüklenip layout'u oynatmıyor.
Siz Next.js'te global stiller ve font'lar için nasıl bir yol izliyorsunuz? `next/font` gibi yeni API'leri deneyen oldu mu? Veya custom `_document` dosyasında farklı optimizasyonlar (inline critical CSS gibi) yapıyor musunuz? Yorumlarda deneyimlerinizi paylaşın, tartışalım!
Sorun: Dağınık Stil ve Font YönetimiNext.js varsayılan olarak harika, ama global stiller ve font'lar için en iyi yeri bulmak ilk başta kafamı karıştırmıştı. `styles/globals.css` dosyasına her şeyi koymak, `head` içine font link'leri eklemek... Hepsi ayrı yerlerdeydi. Ayrıca, font'ların render bloğu oluşturmadan ve en hızlı şekilde yüklenmesini sağlamak istiyordum. Bu hatayı ilk gördüğümde, fontların geç yüklenmesi nedeniyle layout'un atlaması (FOUT/FOIT) beni çıldırtmıştı.
Çözüm: Custom `_app.js` ile Global Stillerİlk adım, tüm sayfaları saran ve global stilleri import edebileceğimiz `pages/_app.js` dosyasını oluşturmak. Bu dosya, uygulamanın başlangıç noktası gibidir. Buraya global CSS dosyanızı import edebilirsiniz.
JavaScript:
// pages/_app.js
import '../styles/globals.css'; // Global CSS dosyanızın yolu
import '../styles/fonts.css'; // Özel font tanımlarınız (isteğe bağlı)
function MyApp({ Component, pageProps }) {
return <Component {...pageProps} />;
}
export default MyApp;`globals.css` içinde tüm projede geçerli olacak CSS değişkenleri (CSS Custom Properties), reset kuralları veya utility class'larını tanımlayabilirsiniz. `fonts.css` ise `@font-face` tanımlarınız için ideal bir yer. Bu sayede tüm font tanımlarınız bir yerde toplanır.
Sihirli Dokunuş: Custom `_document.js` ile Font OptimizasyonuAsıl performans ve verimlilik artışı `pages/_document.js` dosyası ile geliyor. Bu dosya, sunucu tarafında (server-side) render edilen HTML belgesinin (`<html>`, `<head>`, `<body>`) yapısını özelleştirmemizi sağlar. Buraya font linklerini veya stil etiketlerini ekleyerek, tarayıcının bu kaynakları en erken aşamada görmesini sağlayabiliriz.
Google Fonts gibi harici fontları en iyi şekilde eklemenin yolu, `next/head` kullanmak değil, doğrudan `_document.js` içindeki `<Head>` bileşenine preconnect ve font linkini yerleştirmektir. İşte benim kullandığım örnek:
JavaScript:
// pages/_document.js
import Document, { Html, Head, Main, NextScript } from 'next/document';
class MyDocument extends Document {
render() {
return (
<Html lang="tr">
<Head>
{/ Preconnect for Google Fonts for better performance /}
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossOrigin="anonymous" />
{/ Specific Google Fonts Link /}
<link
href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;700&family=Roboto+Mono:wght@400;500&display=swap"
rel="stylesheet"
/>
{/ Favicon ve diğer meta tag'ler buraya gelebilir /}
<link rel="icon" href="/favicon.ico" />
</Head>
<body>
<Main />
<NextScript />
</body>
</Html>
);
}
}
export default MyDocument;Bu yapının en güzel yanı, fontların HTML ile birlikte sunucudan gelmesi ve tarayıcının stil hesaplamasını daha erken yapabilmesi. `preconnect` kullanımı da kaynaklara bağlanma süresini kısaltıyor. Eğer local/project font kullanıyorsanız, onun `@font-face` tanımını yukarıda bahsettiğim `fonts.css` dosyasında yapıp, `_app.js`'te import etmeniz yeterli.
Sonuç ve Performans KazanımıBu iki dosyayı (`_app.js` ve `_document.js`) bu şekilde yapılandırdıktan sonra, stil ve font yönetimi projemde inanılmaz derecede düzene girdi. Lighthouse skorlarımda, özellikle "First Contentful Paint" ve "Cumulative Layout Shift" metriklerinde gözle görülür iyileşmeler oldu. Artık fontlar geç yüklenip layout'u oynatmıyor.
Siz Next.js'te global stiller ve font'lar için nasıl bir yol izliyorsunuz? `next/font` gibi yeni API'leri deneyen oldu mu? Veya custom `_document` dosyasında farklı optimizasyonlar (inline critical CSS gibi) yapıyor musunuz? Yorumlarda deneyimlerinizi paylaşın, tartışalım!