Next.js Giriş Rehberi: Modern Web Uygulamaları Oluşturmanın En İyi Seçeneği

Giriş

Günümüzün hızlı gelişen ön uç geliştirme alanında, Next.js dikkat çeken bir çerçevedir ve geliştiricilere yüksek performanslı, modern web uygulamaları oluşturmak için güçlü araçlar ve esneklik sunar. İster yeni başlayan olun, ister mevcut projelerinize Next.js'i dahil etmek isteyen bir geliştirici, bu makale size Next.js'in temel kavramlarını ve kullanım yöntemlerini anlamanıza yardımcı olacak kapsamlı bir giriş rehberi sunacaktır.

Next.js Nedir?

Next.js, geliştiricilerin üretime hazır uygulamalar hızlı bir şekilde oluşturmalarına yardımcı olmak için tasarlanmış bir React çerçevesidir. Birçok güçlü özellik sunar, örneğin:

Sunucu Tarafı Render (SSR) ve Statik Üretim (SSG): Sayfaların sunucuda önceden render edilmesini destekler, yükleme hızını ve SEO performansını artırır.
Yönlendirme: Yerleşik dosya sistemi yönlendirmesi, sayfa ve API yönlendirmelerinin yönetimini basitleştirir.
API Yönlendirmesi: Aynı projede kolayca API oluşturmanıza olanak tanır, ek bir sunucuya ihtiyaç duymaz.
Performans Optimizasyonu: Otomatik kod bölme, başlangıç yükleme süresini azaltır.

Next.js Kurulumu

Next.js'i kurmak oldukça basittir, sadece geliştirme ortamınızda Node.js'in yüklü olduğundan emin olun. Aşağıdaki komutla hızlıca yeni bir proje oluşturabilirsiniz:

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

Yukarıdaki komutları çalıştırdıktan sonra, http://localhost:3000 adresinde yeni bir Next.js uygulamasının başlatıldığını göreceksiniz.

Proje Yapısı

Next.js uygulamanızı oluşturduktan sonra, varsayılan bir dizin yapısı göreceksiniz:

my-next-app/
├── node_modules/
├── public/
├── src/
│   ├── pages/
│   ├── styles/
│   └── components/
├── package.json
└── next.config.js

pages/: Sayfaların bulunduğu dizin, her .js dosyası otomatik olarak bir yönlendirme ile eşleşir.
public/: Statik dosyaların dizini, bu dizinde bulunan herhangi bir dosyaya doğrudan erişilebilir.
styles/: CSS dosyalarının bulunduğu dizin, genel veya belirli bileşen stilleri için kullanılabilir.

Sayfa ve Yönlendirme Oluşturma

Next.js'in sayfaları dosya sistemi üzerinden yönlendirme yönetimi yapar. pages/ dizininde about.js adında bir dosya oluşturun, içeriği şöyle olsun:

export default function About() {
  return 

# Hakkımızda

;
}

Bu, otomatik olarak /about yönlendirmesini oluşturur ve bu sayfaya erişim sağlar.

Statik Üretim ve Sunucu Tarafı Render

Next.js, veri alma stratejisine göre statik üretim (Static Generation) ve sunucu tarafı render (Server-side Rendering) destekler. Nasıl uygulanacağını görelim:

Statik Üretim (Static Generation)

Proje oluşturulurken, içerikleri önceden oluşturmak istiyorsanız getStaticProps kullanabilirsiniz. Örneğin:

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

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

export default function Page({ data }) {
  return {data.title};
}

Sunucu Tarafı Render (Server-side Rendering)

Her istekte veri almak istiyorsanız getServerSideProps kullanabilirsiniz:

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

  return { props: { data } };
}

export default function Page({ data }) {
  return {data.title};
}

CSS ve Stil Ekleme

Next.js, CSS stillerini eklemek için çeşitli yollar sunar, en basit yol styles/ dizininde CSS dosyası oluşturarak ve ihtiyaç duyulan sayfalarda içe aktararak yapılır:

import styles from './styles/Home.module.css';

export default function Home() {
  return 

# Next.js'e Hoş Geldiniz!

;
}

Ayrıca, stilleri yönetmek için styled-components veya Emotion gibi CSS-in-JS kütüphanelerini de kullanabilirsiniz.

API Yönlendirmesi

pages/api/ dizininde API yönlendirmeleri oluşturabilirsiniz. Örneğin, hello.js adında bir dosya oluşturun:

export default function handler(req, res) {
  res.status(200).json({ message: 'Merhaba API' });
}

API yönlendirmeleri, istekleri ve yanıtları işleyebilir, ön uca dinamik veri işleme yeteneği sağlar.

Next.js Uygulamasını Dağıtma

En basit dağıtım yöntemi Vercel kullanmaktır, bu Next.js'in geliştirme ekibi tarafından oluşturulmuş ücretsiz bir barındırma platformudur. Tek yapmanız gereken kodu GitHub'a itmek ve ardından Vercel ile GitHub hesabınızı bağlamaktır, böylece otomatik olarak inşa ve dağıtım yapılır.

Özet

Next.js, modern web uygulamaları oluşturmak için ideal bir çerçevedir, güçlü özellikleri ve esnekliği geliştiricilerin uygulama inşasına ve optimizasyonuna odaklanmalarını sağlar. Bu makalenin tanıtımıyla, Next.js'in temel kullanımına dair ilk bir anlayışa sahip olduğunuzu umuyorum. Gelecek projelerinizde Next.js'in avantajlarından tam olarak yararlanarak daha verimli web uygulamaları oluşturmanızı dilerim.

Herhangi bir sorunuz varsa veya daha fazla öğrenme kaynağına ihtiyaç duyuyorsanız, lütfen Next.js'in resmi belgelerine göz atın.