Next.js ile Statik Site Oluşturma ve Yayınlama

Statik site oluşturma ve yayınlama, modern web geliştirme süreçlerinde önemli bir yer tutar. Next.js, bu süreci basit ve etkili hale getiren bir React framework’üdür. Bu makalede, Next.js ile statik site oluşturma ve yayınlama adımlarını detaylı bir şekilde ele alacağız.

Giriş

Modern web geliştirme, hızlı ve güvenli statik siteler oluşturmayı gerektirir. Next.js, React tabanlı bir framework olarak, bu süreci kolaylaştırır ve geliştiricilere güçlü araçlar sunar. Bu makalede, Next.js ile nasıl statik site oluşturup yayınlayabileceğinizi öğreneceksiniz.

Next.js’e Giriş

Next.js Nedir?

Next.js, React uygulamaları için geliştirilmiş bir framework’tür. Statik site oluşturma, sunucu tarafı render (SSR) ve istemci tarafı render (CSR) gibi özellikleri destekler. Vercel tarafından geliştirilen Next.js, performans ve SEO optimizasyonu sağlar.

Next.js’in Temelleri

Next.js, dosya tabanlı routing sistemi ve veri getirme metotları ile tanınır. getStaticProps ve getServerSideProps gibi fonksiyonlar, sayfa verilerini önceden getirerek daha hızlı yüklenmesini sağlar.

Next.js’in Avantajları

• Performans: Statik site oluşturma ve önbellekleme sayesinde hızlı yükleme süreleri.
• SEO: Sunucu tarafı render ile SEO dostu yapı.
• Esneklik: Hem statik hem de dinamik içerik yönetimi.

Next.js Kurulumu ve Başlangıç

Proje Kurulumu

Next.js projesi başlatmak için, aşağıdaki komutları kullanabilirsiniz:

npx create-next-app my-next-app
cd my-next-app
npm run dev

Next.js Yapılandırması

Next.js, next.config.js dosyası ile yapılandırılabilir. Bu dosya, özel ayarları ve yapılandırmaları içerir:

module.exports = {
  reactStrictMode: true,
  images: {
    domains: ['example.com'],
  },
}

Next.js ile Statik Site Oluşturma

Sayfa Oluşturma

Next.js, pages klasöründeki dosyaları otomatik olarak sayfa olarak tanır. index.js dosyası, ana sayfa olarak kullanılır:

export default function Home() {
  return (
    <div>
      <h1>Hoşgeldiniz</h1>
      <p>Bu, Next.js ile oluşturulmuş bir statik sitedir.</p>
    </div>
  )
}

Statik Sayfalar ve Dinamik Sayfalar

Statik sayfalar, getStaticProps fonksiyonu kullanılarak önceden oluşturulabilir:

export async function getStaticProps() {
  return {
    props: {
      data: 'Statik veri',
    },
  }
}

Dinamik sayfalar için, [id].js gibi dosya adlandırmaları kullanılır ve getStaticPaths ile dinamik rotalar belirlenir:

export async function getStaticPaths() {
  return {
    paths: [
      { params: { id: '1' } },
      { params: { id: '2' } },
    ],
    fallback: false,
  }
}

export async function getStaticProps({ params }) {
  return {
    props: {
      id: params.id,
    },
  }
}

Veri Getirme ve Entegrasyonlar

Next.js, veri getirme işlemlerini kolaylaştırır. getStaticProps ve getServerSideProps fonksiyonları ile veriler önceden alınabilir. Örneğin, bir API’den veri çekmek:

export async function getStaticProps() {
  const res = await fetch('https://api.example.com/data')
  const data = await res.json()

  return {
    props: {
      data,
    },
  }
}

Statik Site Yayınlama

Next.js Build ve Export Komutları

Next.js projeleri, next build ve next export komutları ile üretim ortamına hazırlanır:

npm run build
npm run export

Vercel ile Yayınlama

Vercel, Next.js projelerini kolayca yayınlamanızı sağlar. Projeyi Vercel’e bağlamak ve deploy etmek için şu adımları izleyin:

1. Vercel hesabı oluşturun.
2. Projenizi Vercel ile bağlayın.
3. Deploy işlemini gerçekleştirin.

Diğer Yayınlama Seçenekleri

Next.js projeleri, Netlify, AWS Amplify veya GitHub Pages gibi diğer platformlarda da yayınlanabilir.

Performans ve SEO Optimizasyonu

Performans İyileştirmeleri

Next.js, performans iyileştirmeleri için çeşitli araçlar sunar. Önbellekleme, resim optimizasyonu ve statik dosya yönetimi ile performans artırılabilir.

SEO Dostu Yapı

Sunucu tarafı render ve statik site oluşturma, Next.js projelerinin SEO dostu olmasını sağlar. Meta tag yönetimi ve sitemap oluşturma ile SEO optimize edilir.

Next.js Özellikleri ve İleri Düzey Konular

ISR (Incremental Static Regeneration)

ISR, statik sayfaların belirli aralıklarla güncellenmesini sağlar. Bu, dinamik verilerin güncel tutulmasına yardımcı olur:

export async function getStaticProps() {
  const res = await fetch('https://api.example.com/data')
  const data = await res.json()

  return {
    props: {
      data,
    },
    revalidate: 10, // sayfa her 10 saniyede bir güncellenir
  }
}

Next.js API Routes

Next.js, API rotaları oluşturmayı destekler. pages/api klasöründe oluşturulan dosyalar, API endpoint’leri olarak kullanılabilir:

export default function handler(req, res) {
  res.status(200).json({ message: 'Hello, World!' })
}

Next.js ve TypeScript Entegrasyonu

Next.js projelerinde TypeScript kullanımı, daha güvenli ve tip kontrolü yapılmış kod yazmayı sağlar. TypeScript entegrasyonu için şu adımları izleyin:

npm install --save-dev typescript @types/react @types/node

Sonrasında, tsconfig.json dosyasını oluşturun ve yapılandırın.

Proje Örnekleri ve En İyi Uygulamalar

Basit Blog Sitesi

Next.js ile basit bir blog sitesi oluşturmak oldukça kolaydır. Yazılar, Markdown dosyalarından veya bir CMS’den çekilebilir.

Portföy Sitesi

Next.js, kişisel portföy siteleri için ideal bir framework’tür. Hızlı yükleme süreleri ve SEO dostu yapısı ile dikkat çeker.

Sonuç ve Öneriler

Next.js, modern web geliştirme için güçlü ve esnek bir araçtır. Bu makalede, Next.js ile statik site oluşturma ve yayınlama sürecini detaylı bir şekilde ele aldık. İlerleyen adımlarda, Next.js projelerinizde deneyim kazanmaya devam edin ve resmi dökümantasyonu takip edin.

Sıkça Sorulan Sorular (FAQ)

Next.js nedir?

Next.js, React tabanlı bir framework’tür. Statik site oluşturma, sunucu tarafı render ve istemci tarafı render gibi özellikleri destekler.

Next.js ile nasıl statik site oluşturulur?

Next.js, getStaticProps ve getStaticPaths gibi fonksiyonlar kullanarak statik sayfalar oluşturmayı sağlar.

Next.js projeleri nasıl yayınlanır?

Next.js projeleri, Vercel, Netlify, AWS Amplify veya GitHub Pages gibi platformlarda yayınlanabilir.

ISR (Incremental Static Regeneration) nedir?

ISR, statik sayfaların belirli aralıklarla güncellenmesini sağlar. Bu, dinamik verilerin güncel tutulmasına yardımcı olur.

Next.js API rotaları nasıl oluşturulur?

Next.js, pages/api klasöründe oluşturulan dosyalar ile API endpoint’leri oluşturmayı destekler.

Next.js projelerinde TypeScript nasıl kullanılır?

Next.js projelerinde TypeScript kullanımı, daha güvenli ve tip kontrolü yapılmış kod yazmayı sağlar. tsconfig.json dosyası oluşturularak TypeScript entegrasyonu yapılır.

Kaynakça

1. Next.js Official Documentation
2. Next.js Incremental Static Regeneration
3. Deploying Next.js on Vercel
4. Next.js API Routes
5. Using TypeScript with Next.js