Adım 2: Frontend Geliştirme

Kullanıcıların göreceği ve etkileşime gireceği arayüzü geliştireceğimiz adımdır. Backend'den gelen verileri Statik Site Üretimi (SSG) ile sayfalara dönüştürün.

Oluşturulacak Sayfalar:

• Ana Sayfa (`/`): Son yazıları ve "Günün Sözü"nü listeler. (`getStaticProps` kullanır).
• Haber Detay (`/posts/[slug]`): Tek bir yazının içeriğini gösterir. (`getStaticProps` & `getStaticPaths` kullanır).
• Kategori Sayfası (`/category/[slug]`): Bir kategoriye ait tüm yazıları listeler. (`getStaticProps` & `getStaticPaths` kullanır).

Örnek `getStaticProps` ve `getStaticPaths`:

import { GetStaticProps, GetStaticPaths } from 'next';

export const getStaticProps: GetStaticProps = async (ctx) => {
  const slug = ctx.params?.slug as string;
  const res = await fetch(`.../api/posts?where[slug][equals]=${slug}`);
  const post = (await res.json()).docs[0];
  return { props: { post }, revalidate: 60 };
};

export const getStaticPaths: GetStaticPaths = async () => {
  const res = await fetch(`.../api/posts?limit=100`);
  const posts = (await res.json()).docs;
  const paths = posts.map(p => ({ params: { slug: p.slug } }));
  return { paths, fallback: 'blocking' };
};

İleri Seviye Görevler ("Challenge"lar)

Projeyi bir adım öteye taşımak ve ek yeteneklerinizi sergilemek için bu isteğe bağlı görevleri tamamlayabilirsiniz.

• Incremental Static Regeneration (ISR): `revalidate` seçeneğini kullanarak, sitenizi yeniden build etmeden belirli aralıklarla içeriğin güncellenmesini sağlayın. Bu, sitenin hem hızlı hem de güncel kalmasını sağlar.
• Dinamik Tema Değiştirme: Kullanıcının Light/Dark mod arasında geçiş yapmasını sağlayan bir buton ekleyin. Tercihini `localStorage`'da saklayarak kalıcı hale getirin. Tailwind'in `dark: 'class'` özelliğinden faydalanın.
• Üçüncü Parti API Entegrasyonu: Ücretsiz bir API'den (örn: Zen Quotes API) asenkron olarak "Günün Sözü"nü çekip ana sayfada gösterin. Bu, asenkron veri yönetimi becerinizi gösterir.