Merhaba arkadaşlar, bugün başımı çok ağrıtan bir konuyu, Next.js projelerinde global stil ve font yönetimini nasıl temiz bir şekilde hallettiğimi anlatacağım. Özellikle proje büyüdükçe, her component'te aynı font'u import etmek veya CSS değişkenlerini tekrar tekrar tanımlamak can sıkıcı bir hal alıyordu. İşte benim kullandığım en temiz çözüm: _app.js ve _document.js dosyalarını özelleştirmek.
Karşılaştığım Sorun
Next.js'te her sayfaya özel font veya global CSS değişkenleri eklemek istediğimde, ilk başta her `pages/` dizinindeki component'lerin `head` kısmına `<link>` tag'leri ekliyordum. Bu hem tekrar eden kod demekti hem de Google Fonts gibi bir kaynaktan font çektiğimde, performans açısından optimal olmadığını fark ettim. Ayrıca, tema renkleri gibi CSS değişkenlerini her stil dosyasında yeniden tanımlamak yönetilemez bir hal almıştı.
Çözüm: _app.js ve _document.js'nin Gücü
Next.js, `pages/_app.js` dosyasını tüm sayfaların sarmalayıcısı (wrapper), `pages/_document.js` dosyasını ise HTML belgesinin iskeleti olarak kullanır. Bu iki dosyayı özelleştirerek, tüm uygulama genelinde geçerli stilleri ve fontları merkezi bir noktadan yönetebilirsiniz.
İlk adım, global stillerimiz için bir CSS dosyası oluşturmak. Ben `styles/globals.css` yolunu kullanıyorum. Burada CSS değişkenlerimi (custom properties) tanımlıyorum.
_app.js ile Global Stilleri Entegre Etmek
`_app.js` dosyası, her sayfa render edilmeden önce çalışır. Buraya global CSS dosyamızı import ederek, stil değişkenlerimizin her yerde erişilebilir olmasını sağlıyoruz.
Bu kadar! Artık tüm component'lerimde `var(--primary-color)` gibi değişkenleri kullanabilirim.
_document.js ile Fontları Optimize Etmek
Asıl sihir burada. Google Fonts gibi harici fontları, performansı artırmak için `_document.js` içinde preload edebiliriz. Bu, tarayıcıya fontu daha erken yüklemesini söyler, böylece "flash of unstyled text" (FOUT) sorununu azaltır.
Bu yapılandırma ile, fontlar en verimli şekilde yüklenir ve `globals.css` dosyasında tanımladığımız --font-heading ve --font-body değişkenleri hemen kullanılabilir hale gelir.
Sonuç ve Performans Kazanımları
Bu yöntemi uyguladıktan sonra, stil ve font yönetimim merkezileşti ve inanılmaz derecede kolaylaştı. Bir rengi değiştirmem gerektiğinde sadece `globals.css` dosyasındaki değişkeni güncelliyorum. Ayrıca, Lighthouse performans skorumda, font yükleme optimizasyonundan dolayı gözle görülür bir artış oldu.
Siz Next.js projelerinizde global stilleri ve fontları nasıl yönetiyorsunuz? _app.js ve _document.js dışında farklı, daha efektif bir yöntem kullanan var mı? Yorumlarda deneyimlerinizi paylaşın, tartışalım!
Karşılaştığım SorunNext.js'te her sayfaya özel font veya global CSS değişkenleri eklemek istediğimde, ilk başta her `pages/` dizinindeki component'lerin `head` kısmına `<link>` tag'leri ekliyordum. Bu hem tekrar eden kod demekti hem de Google Fonts gibi bir kaynaktan font çektiğimde, performans açısından optimal olmadığını fark ettim. Ayrıca, tema renkleri gibi CSS değişkenlerini her stil dosyasında yeniden tanımlamak yönetilemez bir hal almıştı.
Çözüm: _app.js ve _document.js'nin GücüNext.js, `pages/_app.js` dosyasını tüm sayfaların sarmalayıcısı (wrapper), `pages/_document.js` dosyasını ise HTML belgesinin iskeleti olarak kullanır. Bu iki dosyayı özelleştirerek, tüm uygulama genelinde geçerli stilleri ve fontları merkezi bir noktadan yönetebilirsiniz.
İlk adım, global stillerimiz için bir CSS dosyası oluşturmak. Ben `styles/globals.css` yolunu kullanıyorum. Burada CSS değişkenlerimi (custom properties) tanımlıyorum.
CSS:
:root {
--primary-color: #0070f3;
--secondary-color: #1a202c;
--background-light: #f7fafc;
--text-primary: #2d3748;
--font-heading: 'Inter', -apple-system, sans-serif;
--font-body: 'Open Sans', system-ui, sans-serif;
}
body {
margin: 0;
font-family: var(--font-body);
color: var(--text-primary);
background-color: var(--background-light);
}
h1, h2, h3, h4 {
font-family: var(--font-heading);
}`_app.js` dosyası, her sayfa render edilmeden önce çalışır. Buraya global CSS dosyamızı import ederek, stil değişkenlerimizin her yerde erişilebilir olmasını sağlıyoruz.
JavaScript:
import '../styles/globals.css'
function MyApp({ Component, pageProps }) {
return <Component {...pageProps} />
}
export default MyAppBu kadar! Artık tüm component'lerimde `var(--primary-color)` gibi değişkenleri kullanabilirim.
_document.js ile Fontları Optimize EtmekAsıl sihir burada. Google Fonts gibi harici fontları, performansı artırmak için `_document.js` içinde preload edebiliriz. Bu, tarayıcıya fontu daha erken yüklemesini söyler, böylece "flash of unstyled text" (FOUT) sorununu azaltır.
JavaScript:
import { Html, Head, Main, NextScript } from 'next/document'
export default function Document() {
return (
<Html lang="tr">
<Head>
{/ Preconnect for performance /}
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossOrigin="anonymous" />
{/ Google Fonts - Inter & Open Sans /}
<link
href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Open+Sans:wght@400;600&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>
)
}Bu yapılandırma ile, fontlar en verimli şekilde yüklenir ve `globals.css` dosyasında tanımladığımız --font-heading ve --font-body değişkenleri hemen kullanılabilir hale gelir.
Sonuç ve Performans KazanımlarıBu yöntemi uyguladıktan sonra, stil ve font yönetimim merkezileşti ve inanılmaz derecede kolaylaştı. Bir rengi değiştirmem gerektiğinde sadece `globals.css` dosyasındaki değişkeni güncelliyorum. Ayrıca, Lighthouse performans skorumda, font yükleme optimizasyonundan dolayı gözle görülür bir artış oldu.
Siz Next.js projelerinizde global stilleri ve fontları nasıl yönetiyorsunuz? _app.js ve _document.js dışında farklı, daha efektif bir yöntem kullanan var mı? Yorumlarda deneyimlerinizi paylaşın, tartışalım!