Next.js İle Uygulama Nasıl Geliştirilir ?

Next.js Nedir?

Next.js, React uygulamalarını geliştirmek için tasarlanmış bir frameworktür. Sunucu tarafında render etme (İngilizcesi: Server-Side Rendering veya SSR), statik site oluşturma (Static Site Generation veya SSG) ve çoklu dış veri entegrasyonu gibi özellikleri destekler.

Avantajları:

SEO Dostu: SSR ve SSG ile tarama botlarına optimize edilmiş içerik sunar.
Performans: Statik dosyalar ve optimize edilen kod yükleme sayesinde hızlı yüklenir.
Esneklik: API rota oluşturma ve çoklu veri kaynağı desteğiyle esnek bir yapı sunar.

Next.js ile Proje Başlatma

Next.js projesi oluşturmak için aşağıdaki adımları takip edebilirsiniz.

Gereksinimler

Node.js: Minimum 16.0 versiyonu kurulu olmalıdır.
Bir Paket Yöneticisi: NPM veya Yarn kullanabilirsiniz.

Kurulum

Yeni bir Next.js projesi başlatmak için terminalde aşağıdaki komutu çalıştırın:
```
npx create-next-app@latest my-next-app
```
Komutları takip ederek proje adını ve diğer ayarları belirleyin.
Proje dizinine gidin ve geliştirme sunucusunu başlatın:
```
cd my-next-app
npm run dev
```
Varsayılan olarak uygulama http://localhost:3000 adresinde çalışır.

Next.js Temel Yapısı

Dosya ve Klasör Yapısı

Next.js projelerinde şu önemli klasörler bulunur:

pages/: Uygulamanın sayfalarını içerir.
- index.js: Ana sayfa.
- [slug].js: Dinamik rotalar.
public/: Statik dosyaları (resimler, dosyalar) barındırır.
styles/: CSS dosyalarını barındırır.

Sayfa Oluşturma

Yeni bir sayfa oluşturmak için pages klasörü altında bir dosya oluşturun. Örneğin:

Örneğin:

// pages/about.js
export default function About() {
  return (
    <div>
      <h1>Hakkımızda</h1>
      <p>Bu sayfa hakkımızda bilgi verir.</p>
    </div>
  );
}

Dinamik Rotalar

Dinamik rotalar Next.js uygulamalarında çok kullanılır. Örneğin:

// pages/blog/[id].js
import { useRouter } from 'next/router';

export default function BlogPost() {
  const router = useRouter();
  const { id } = router.query;

  return (
    <div>
      <h1>Blog Yazısı: {id}</h1>
    </div>
  );
}

Veriyi Almak: getStaticProps ve getServerSideProps

Next.js, veri alma işlemleri için iki ana metod sunar:

`getStaticProps`

Statik sayfalar oluştururken kullanılır:

export async function getStaticProps() {
  const res = await fetch('https://jsonplaceholder.typicode.com/posts');
  const posts = await res.json();

  return {
    props: {
      posts,
    },
  };
}

`getServerSideProps`

Her istek öncesi sunucuda çalışır:

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

  return {
    props: {
      data,
    },
  };
}

Next.js ile SEO Optimizasyonu

Head Etiketi

Next.js, next/head bileşenini kullanarak meta etiketleri eklemeye olanak tanır:

import Head from 'next/head';

export default function Home() {
  return (
    <>
      <Head>
        <title>Anasayfa - My Next.js App</title>
        <meta name="description" content="Next.js ile geliştirilmiş bir uygulama." />
      </Head>
      <h1>Merhaba Dünya!</h1>
    </>
  );
}

Sitemap ve Robots.txt

SEO için sitemap ve robots.txt dosyalarını oluşturun:

Sitemap: next-sitemap paketini kullanabilirsiniz.
robots.txt: public/ klasörüne ekleyin.

Resim Optimizasyonu

next/image bileşeni ile resimler otomatik optimize edilir:

import Image from 'next/image';

<Image src="/example.jpg" alt="Example" width={500} height={500} />

Dağıtım (Deployment)

Next.js uygulamaları, Vercel veya herhangi bir hosting platformunda kolayca yayınlanabilir.

Vercel

Vercel hesabı oluşturun.
Projenizi GitHub ile bağlayın.
Vercel ayarlarından projeyi yayınlayın.

Diğer Hosting Seçenekleri

Netlify
Heroku
AWS
Google Cloud