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-appKomutları 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 devVarsayı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-sitemappaketini 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