M

MLOG

Türkçe

Sağlam, ölçeklenebilir ve global uygulamalar oluşturmak için Next.js Layout'larından nasıl yararlanılacağını öğrenin. Paylaşılan arayüz bileşenleri için en iyi uygulamaları keşfedin.

Next.js Layout'ları: Global Uygulamalar için Paylaşılan Arayüz Bileşen Modellerinde Uzmanlaşma

Next.js, performanslı ve kullanıcı dostu uygulamaların oluşturulmasını kolaylaştırma yeteneğiyle tanınan modern web geliştirmenin temel taşlarından biri haline gelmiştir. Bu yeteneğin merkezinde, arayüz (UI) bileşenlerinin etkili yönetimi ve bunun kalbinde de Next.js Layout'larının gücü yatmaktadır. Bu kapsamlı rehber, sağlam, ölçeklenebilir ve global farkındalığa sahip uygulamalar oluşturmak için Next.js Layout'larından yararlanmanın inceliklerine derinlemesine dalıyor. Kodun yeniden kullanılabilirliğini, sürdürülebilirliğini ve dünya çapındaki kullanıcılar için kusursuz bir kullanıcı deneyimini teşvik eden paylaşılan arayüz bileşenleri oluşturmaya yönelik en iyi uygulamaları keşfedeceğiz.

Next.js'de Layout'ların Önemini Anlamak

Web geliştirme alanında, özellikle Next.js gibi framework'lerde, layout'lar uygulamanızın kullanıcı arayüzünün üzerine inşa edildiği mimari temel olarak hizmet eder. Bunlar, genel kullanıcı deneyimini şekillendiren tutarlı, yeniden kullanılabilir arayüz öğelerinin planıdır. İyi yapılandırılmış bir uygulama tasarımında layout'ları düşünmek, geliştiricilerin kod tekrarından kaçınmasına olanak tanır ve bakımı basitleştirir. Esasen, şunlar için bir çerçeve sağlarlar:

Next.js Layout'larının Temel Kavramları ve Faydaları

1. `_app.js` ve `_document.js` Dosyaları

Next.js'de, iki özel dosya, layout'ları ve global yapılandırmaları tanımlamada kritik bir rol oynar: `_app.js` ve `_document.js`. Amaçlarını anlamak esastır.

2. Layout Kullanmanın Avantajları

Layout'ları kullanmak, özellikle büyük ve karmaşık web uygulamaları oluştururken sayısız avantaj sunar:

Paylaşılan Arayüz Bileşen Modellerini Uygulama

1. Temel Bir Layout Bileşeni Oluşturma

Basit bir layout bileşeni oluşturalım. Bu bileşen bir başlık, ana içerik alanı ve bir alt bilgi içerecektir. Birden çok sayfada paylaşılmak üzere tasarlanmıştır.

// components/Layout.js
import Head from 'next/head';

function Layout({ children, title }) {
  return (
    <>
      <Head>
        <title>{title} | Uygulamam</title>
        <meta name="description" content="Benim Next.js Uygulamam" />
      </Head>
      <header>
        <h1>Uygulamamın Başlığı</h1>
      </header>
      <main>{children}</main>
      <footer>
        <p>© {new Date().getFullYear()} Uygulamam. Tüm hakları saklıdır.</p>
      </footer>
    </>
  );
}

export default Layout;

Bu örnekte, `Layout` bileşeni prop olarak `children` ve `title` alır. `children`, layout içinde oluşturulacak sayfanın içeriğini temsil ederken, `title` sayfanın SEO için başlık etiketini ayarlar.

2. Layout Bileşenini Bir Sayfada Kullanma

Şimdi, bu layout'u sayfalarınızdan birine (örneğin, `pages/index.js`) uygulayalım.

// pages/index.js
import Layout from '../components/Layout';

function HomePage() {
  return (
    <Layout title="Ana Sayfa">
      <h2>Ana Sayfaya Hoş Geldiniz</h2>
      <p>Burası ana sayfanın ana içeriğidir.</p>
    </Layout>
  );
}

export default HomePage;

`pages/index.js` dosyasında, `Layout` bileşenini içe aktarır ve sayfa içeriğini onunla sarmalarız. Ayrıca sayfaya özgü bir `title` sağlarız. `Layout` bileşenindeki `children` prop'u, `index.js` dosyasındaki `<Layout>` etiketleri arasındaki içerikle doldurulacaktır.

3. Gelişmiş Layout Özellikleri

Uluslararası Uygulamalar için Global Hususlar

Global bir kitle için layout'lar oluştururken, birkaç uluslararasılaştırma ve globalleşme (i18n/g11n) yönünü göz önünde bulundurmak çok önemlidir. Bu uygulamalar, uygulamanızın farklı kültürel geçmişlere sahip bireyler için erişilebilir ve kullanıcı dostu olmasını sağlar.

1. Uluslararasılaştırma (i18n) ve Yerelleştirme (l10n)

2. Next.js Layout'larında i18n Uygulama

Next.js'de i18n uygulamak için `next-i18next` gibi çeşitli kütüphaneler veya yönlendirme tabanlı çözümler için yerleşik `next/router` kullanabilirsiniz.

İşte `_app.js` dosyası kullanarak `next-i18next` ile basitleştirilmiş bir örnek. Bu, i18n'i uygulama düzeyinde kurar. `npm install i18next react-i18next next-i18next` kullanarak gerekli paketleri kurduğunuzdan emin olun. Bu örnek, basitleştirilmiş bir entegrasyonu göstermektedir ve özel gereksinimlere göre ayarlamalar gerektirebilir.

// _app.js
import { appWithTranslation } from 'next-i18next';
import '../styles/global.css'; // Global stillerinizi içe aktarın

function MyApp({ Component, pageProps }) {
  return <Component {...pageProps} />;
}

export default appWithTranslation(MyApp);

Bu `_app.js` dosyasında, `appWithTranslation` uygulamaya uluslararasılaştırma context'i sağlar.

Ardından, layout'unuzda `react-i18next` tarafından sağlanan `useTranslation` hook'unu kullanın:

// components/Layout.js
import { useTranslation } from 'react-i18next';
import Head from 'next/head';

function Layout({ children, title }) {
  const { t } = useTranslation(); // Çeviri fonksiyonunu al

  return (
    <>
      <Head>
        <title>{t('layout.title', { title })}</title>
        <meta name="description" content={t('layout.description')} />
      </Head>
      <header>
        <h1>{t('layout.header')}</h1>
      </header>
      <main>{children}</main>
      <footer>
        <p>{t('layout.footer', { year: new Date().getFullYear() })}</p>
      </footer>
    </>
  );
}

export default Layout;

Daha sonra, genellikle `public/locales/[locale]/[namespace].json` yapısında saklanan çeviri dosyalarınız olurdu. Örneğin, `public/locales/en/common.json` şunları içerebilir:

{
  "layout": {
    "title": "{{title}} | My App",
    "description": "My Next.js App Description",
    "header": "My App Header",
    "footer": "© {{year}} My App. All rights reserved."
  }
}

Ve `public/locales/fr/common.json` (Fransızca için) şunları içerebilir:

{
  "layout": {
    "title": "{{title}} | Mon Application",
    "description": "Description de mon application Next.js",
    "header": "En-tête de mon application",
    "footer": "© {{year}} Mon application. Tous droits réservés."
  }
}

Not: Bu örnek, i18n entegrasyonuna temel bir yaklaşım sunar ve ek yapılandırma gerektirir (örneğin, dil tespiti, yönlendirme kurulumu). Kapsamlı rehberlik için `next-i18next` belgelerine başvurun.

3. Duyarlı Tasarım ve Layout'lar

Duyarlı bir tasarım, global bir kitle için kritik öneme sahiptir. Layout'unuz çeşitli ekran boyutlarına ve cihazlara uyum sağlamalıdır. Tüm cihazlarda tutarlı ve kullanıcı dostu bir deneyim sağlamak için Bootstrap, Tailwind CSS gibi CSS framework'lerini kullanın veya özel medya sorguları (media queries) oluşturun.

4. Erişilebilirlik Hususları

Uygulamanızı engelli kişiler için kullanılabilir hale getirmek için erişilebilirlik yönergelerine (WCAG) uyun. Bu şunları içerir:

5. Tarih ve Saat Biçimlendirme

Farklı bölgelerin tarih ve saat formatları için farklı gelenekleri vardır. Tarih ve saatlerin kullanıcının yerel ayarına göre doğru şekilde görüntülendiğinden emin olun. `date-fns` gibi kütüphaneler veya JavaScript'teki yerleşik `Intl` API'si bunu halledebilir.

import { format } from 'date-fns';
import { useTranslation } from 'react-i18next';

function MyComponent() {
  const { i18n } = useTranslation();
  const currentDate = new Date();
  const formattedDate = format(currentDate, 'MMMM d, yyyy', { locale: i18n.language });

  return <p>{formattedDate}</p>;
}

6. Para Birimi Biçimlendirme

Parasal değerleri her yerel ayar için doğru biçimde görüntüleyin. `Intl.NumberFormat` API'si, para birimi biçimlendirmesini işlemek için değerlidir.

function MyComponent() {
  const { i18n } = useTranslation();
  const price = 1234.56;
  const formattedPrice = new Intl.NumberFormat(i18n.language, { // Yerel ayar için i18n.language kullanın
    style: 'currency',
    currency: 'USD', // Veya kullanıcı tercihlerine göre para birimini dinamik olarak belirleyin
  }).format(price);

  return <p>{formattedPrice}</p>
}

7. Sağdan Sola (RTL) Diller

Uygulamanızın Arapça veya İbranice gibi dilleri (RTL dilleri) desteklemesi gerekiyorsa, layout'unuzu bunu karşılayacak şekilde tasarlayın. `direction: rtl;` gibi CSS özelliklerini kullanmayı ve arayüz öğelerinin konumlandırılmasını ayarlamayı düşünün.

8. İçerik Dağıtım Ağları (CDN'ler) ve Performans

Uygulamanızın statik varlıklarını (görseller, CSS, JavaScript) kullanıcılarınıza coğrafi olarak daha yakın sunuculardan sunmak için bir CDN kullanın. Bu, gecikmeyi azaltır ve uluslararası kullanıcılar için sayfa yükleme sürelerini iyileştirir. Next.js'in yerleşik görsel optimizasyonu ve CDN entegrasyonu performansı önemli ölçüde artırabilir.

9. Global Pazarlar için SEO Optimizasyonu

Arama motoru optimizasyonu (SEO), dünya çapında kullanıcıları çekmek için çok önemlidir. Aşağıdaki teknikleri kullanın:

`Layout` bileşeninizin `` bölümünde hreflang etiketleri örneği:


<Head>
  <title>{t('layout.title', { title })}</title>
  <meta name="description" content={t('layout.description')} />
  <link rel="alternate" href="https://www.example.com/" hreflang="x-default" />  {
  <link rel="alternate" href="https://www.example.com/en/" hreflang="en" />
  <link rel="alternate" href="https://www.example.com/fr/" hreflang="fr" />
  // Daha fazla dil varyantı
</Head>

Gelişmiş Layout Stratejileri

1. Layout'larla Kod Bölme (Code Splitting)

Next.js, performansı artırmak için otomatik olarak kod bölme işlemi yapar, ancak bu davranışı özellikle layout'larınız içinde dinamik içe aktarmaları (dynamic imports) kullanarak ince ayar yapabilirsiniz. Daha büyük bileşenleri dinamik olarak içe aktararak, başlangıçtaki JavaScript paket boyutunu azaltabilir ve bu da daha hızlı başlangıç yükleme sürelerine yol açabilir.


import dynamic from 'next/dynamic';

const DynamicComponent = dynamic(() => import('../components/LargeComponent'));

function Layout({ children }) {
  return (
    <>
      <header>...</header>
      <main>
        {children}
        <DynamicComponent />  <!-- Dinamik olarak yüklenen bileşen -->
      </main>
      <footer>...</footer>
    </>
  );
}

Örnekte, `LargeComponent` dinamik olarak yüklenir. Dinamik içe aktarma, bu bileşenin indirilmesini gerçekten ihtiyaç duyulana kadar geciktirir.

2. Sunucu Taraflı Oluşturma (SSR) ile Layout'lar

Next.js'in SSR yetenekleri, içeriği sunucuda önceden oluşturmanıza olanak tanıyarak SEO'yu ve başlangıç yükleme sürelerini iyileştirir. Sayfa istemciye teslim edilmeden önce veri çekmek için layout'larınız içinde SSR uygulayabilirsiniz. Bu, sık değişen veya arama motorları tarafından dizine eklenmesi gereken içerikler için özellikle önemlidir.

Bir sayfa içinde `getServerSideProps` kullanarak, layout'a veri aktarabilirsiniz:


// pages/posts/[id].js
import Layout from '../../components/Layout';

export async function getServerSideProps(context) {
  const { id } = context.params;
  const res = await fetch(`https://api.example.com/posts/${id}`);
  const post = await res.json();

  return {
    props: {
      post,
    },
  };
}

function PostPage({ post }) {
  return (
    <Layout title={post.title}>
      <h1>{post.title}</h1>
      <p>{post.content}</p>
    </Layout>
  );
}

export default PostPage;

`getServerSideProps` fonksiyonu gönderi verilerini çeker. `post` verisi daha sonra `Layout`'a bir prop olarak aktarılır.

3. Statik Site Oluşturma (SSG) ile Layout'lar

Sık değişmeyen içerikler için SSG önemli performans avantajları sağlar. Sayfaları derleme zamanında (build time) önceden oluşturur ve doğrudan kullanıcıya sunulan statik HTML dosyaları üretir. SSG kullanmak için, sayfa bileşenlerinizde `getStaticProps` fonksiyonunu uygulayın ve veriler layout'a aktarılabilir.


// pages/about.js
import Layout from '../components/Layout';

export async function getStaticProps() {
  const aboutData = { title: 'Hakkımızda', content: 'Şirketimiz hakkında bazı bilgiler.' };
  return {
    props: {
      aboutData,
    },
  };
}

function AboutPage({ aboutData }) {
  return (
    <Layout title={aboutData.title}>
      <h2>{aboutData.title}</h2>
      <p>{aboutData.content}</p>
    </Layout>
  );
}

export default AboutPage;

Bu SSG örneğinde, `getStaticProps` derleme zamanında veri çeker ve ardından bunu `Layout` bileşeni kullanılarak oluşturulan `AboutPage`'e aktarır.

4. İç İçe Layout'lar (Nested Layouts)

Karmaşık uygulamalar için iç içe layout'lar gerekebilir. Bu, layout'lar içinde layout'lar olması anlamına gelir. Örneğin, ana bir uygulama layout'unuz olabilir ve ardından web sitenizin belirli bölümleri için farklı layout'lar kullanabilirsiniz. Bu, kullanıcı arayüzü üzerinde ince taneli kontrol sağlar.


// components/MainLayout.js
function MainLayout({ children }) {
  return (
    <>
      <header>Ana Başlık</header>
      <main>{children}</main>
      <footer>Ana Alt Bilgi</footer>
    </>
  );
}

export default MainLayout;


// components/SectionLayout.js
function SectionLayout({ children }) {
  return (
    <div className="section-wrapper">
      <aside>Bölüm Navigasyonu</aside>
      <div className="section-content">{children}</div>
    </div>
  );
}

export default SectionLayout;


// pages/section/[page].js
import MainLayout from '../../components/MainLayout';
import SectionLayout from '../../components/SectionLayout';

function SectionPage({ page }) {
  return (
    <MainLayout>
      <SectionLayout>
        <h1>Bölüm Sayfası: {page}</h1>
        <p>Bölüm sayfası {page} için içerik.</p>
      </SectionLayout>
    </MainLayout>
  );
}

export async function getServerSideProps(context) {
  const { page } = context.query;
  return {
    props: {
      page,
    },
  };
}

export default SectionPage;

Bu durumda, `SectionPage` iç içe bir layout yapısı oluşturmak için hem `MainLayout` hem de `SectionLayout` tarafından sarmalanmıştır.

En İyi Uygulamalar ve Optimizasyon İpuçları

1. Bileşen Kompozisyonu

Bileşen kompozisyonunu kullanın. Layout'larınızı ve arayüz öğelerinizi daha küçük, yeniden kullanılabilir bileşenlere ayırın. Bu, kodun okunabilirliğini ve sürdürülebilirliğini artırır.

2. Performans İzleme

Google Lighthouse veya WebPageTest gibi araçları kullanarak layout'larınızın ve uygulamanızın performansını sürekli olarak izleyin. Bu araçlar, performans darboğazlarını ve optimizasyon alanlarını belirlemenize yardımcı olabilir.

3. Önbellekleme Stratejileri

Sunucu yükünü azaltmak ve yanıt sürelerini iyileştirmek için önbellekleme stratejileri uygulayın. Sık erişilen verileri önbelleğe almayı, statik varlıklar için tarayıcı önbelleğini kullanmayı ve içeriği kullanıcıya daha yakın bir yerde önbelleğe almak için bir İçerik Dağıtım Ağı (CDN) uygulamayı düşünün.

4. Tembel Yükleme (Lazy Loading)

Görseller ve diğer kritik olmayan bileşenler için tembel yükleme kullanın. Bu yaklaşım, kaynakların yüklenmesini ihtiyaç duyulana kadar geciktirerek başlangıçtaki sayfa yükleme süresini azaltır.

5. Aşırı Yeniden Oluşturmalardan (Re-renders) Kaçının

Bileşenlerinizi gereksiz yeniden oluşturmalardan kaçınmak için optimize edin. Bileşenleri ve fonksiyonları hafızaya almak (memoize) için `React.memo`, `useMemo` ve `useCallback` kullanın. React'in değişiklikleri verimli bir şekilde tanımlamasına yardımcı olmak için bileşen listelerini oluştururken `key` prop'unu doğru şekilde kullanın.

6. Test Etme

Layout bileşenlerinizin beklendiği gibi çalıştığından ve tutarlı davranış sergilediğinden emin olmak için birim testleri ve entegrasyon testleri de dahil olmak üzere kapsamlı testler uygulayın. Layout'ları farklı ekran boyutlarında ve yerel ayarlarda test edin.

Sonuç

Next.js Layout'ları, olağanüstü web uygulamaları oluşturmak için güçlü ve çok yönlü araçlar sunar. Bu kılavuzda tartışılan tekniklerde ustalaşarak, iyi yapılandırılmış, sürdürülebilir ve performanslı arayüzler oluşturabilirsiniz. Uygulamanızın global bir kitleyle rezonans kurmasını sağlamak için uluslararasılaştırma ve globalleşme en iyi uygulamalarını benimsemeyi unutmayın. Next.js'in gücünü düşünceli bir layout yaklaşımıyla birleştirerek, modern, ölçeklenebilir ve evrensel olarak erişilebilir web deneyimleri yaratmak için iyi donanımlı olacaksınız.