Next.js, Vercel'in (2016) geliştirdiği React framework. Tek sayfalık React'ı production-ready yapan tüm yazılım katmanını ekler: - Routing - Server-side rendering (SSR) - Static site generation (SSG) - API routes / Server Actions - Image optimization - Font handling - Middleware 2025-26'da popüler çünkü: - Vercel deploy tek-tık - React 19 + RSC mainstream - AI editor desteği (Cursor, v0) - Türkiye'de en yaygın choice (LinkedIn iş ilanları)

App Router (Mainstream 2026)

App Router, Next.js 13'te lanse oldu, 16'da default. File-based routing: app/ page.tsx → / layout.tsx → kök layout blog/ page.tsx → /blog [slug]/ page.tsx → /blog/:slug api/ hello/ route.ts → /api/hello Pages Router (eski) artık önerilmez yeni projelerde.

Default'ta tüm component'lar Server Components (RSC). Server'da render, client'a HTML gelir. Avantaj: - Bundle size küçülür - DB query'leri direkt component'ten - SEO için ideal (HTML hazır) Client Component için "use client" ekle dosya en üstüne. tsx // app/dashboard/page.tsx - Server Component (default) import { db } from '@/lib/db'; export default async function Dashboard() { const items = await db.from('items').select(); return <ItemList items={items} /; } // app/dashboard/interactive.tsx "use client"; export function InteractiveButton() { const [count, setCount] = useState(0); return <button onClick={...} /; }

Form submit gibi mutations için Server Action — API route yazmadan. tsx // app/actions.ts "use server"; export async function createPost(formData: FormData) { await db.from('posts').insert({...}); } // app/page.tsx import { createPost } from './actions'; <form action={createPost} <input name="title" / <buttonSave</button </form

SSG (build time): blog, marketing, docs - SSR (every request): dashboard, personalized - ISR (revalidate periodically): mid-frequency content App Router'da: tsx export const revalidate = 3600; // ISR 1 saat export const dynamic = 'force-dynamic'; // SSR export const dynamic = 'force-static'; // SSG

bash vercel # preview vercel --prod # production Custom domain: Vercel dashboard → Domains → DNS instructions.

Türk Projeler için Pratik

TL ödeme: iyzico integration — app/api/iyzico/webhook/route.ts - KVKK: middleware ile cookie consent - Email: Resend or Postmark API, Türkçe template - CDN: Vercel Edge zaten İstanbul/Frankfurt - Analytics: Plausible (KVKK uyumlu) + Vercel Analytics

Next.js mı React mi?

Next.js = React + framework. Sıfırdan React Vite OK, ama SaaS için Next.js daha hızlı.

App Router mu Pages Router mu?

Yeni proje: App Router. Eski proje: kalsın olduğu gibi.

Server vs Client Component karar?

Default Server. Interactive (form, state, event) → Client.

Next.js Nedir? 2026 Türkçe Pillar Rehber — Rehber

Q: Server Actions

Form submit gibi mutations için Server Action — API route yazmadan. tsx // app/actions.ts "use server"; export async function createPost(formData: FormData) { await db.from('posts').insert({...}); } // app/page.tsx import { createPost } from './actions'; <form action={createPost} <input name="title" / <buttonSave</button </form

Q: SSG vs SSR vs ISR

SSG (build time): blog, marketing, docs - SSR (every request): dashboard, personalized - ISR (revalidate periodically): mid-frequency content App Router'da: tsx export const revalidate = 3600; // ISR 1 saat export const dynamic = 'force-dynamic'; // SSR export const dynamic = 'force-static'; // SSG

Q: Vercel Deploy

bash vercel # preview vercel --prod # production Custom domain: Vercel dashboard → Domains → DNS instructions.

Q: Türk Projeler için Pratik

TL ödeme: iyzico integration — app/api/iyzico/webhook/route.ts - KVKK: middleware ile cookie consent - Email: Resend or Postmark API, Türkçe template - CDN: Vercel Edge zaten İstanbul/Frankfurt - Analytics: Plausible (KVKK uyumlu) + Vercel Analytics

Q: Next.js mı React mi?

Next.js = React + framework. Sıfırdan React Vite OK, ama SaaS için Next.js daha hızlı.

Q: App Router mu Pages Router mu?

Yeni proje: App Router. Eski proje: kalsın olduğu gibi.

Q: Server vs Client Component karar?

Default Server. Interactive (form, state, event) → Client.

Next.js Nedir? 2026 Türkçe Pillar Rehber

TL;DR. Next.js, React tabanlı full-stack framework. Vercel tarafından geliştirilen, 2025'te v16 ile App Router ve Server Components'i mainstream yaptı. SaaS, blog, eticaret, dashboard — hepsi için 2026'da en yaygın choice. Vibe coding tool'larından Bolt ve Cursor Next.js'ı first-class destekler. Bu rehber: App Router, RSC, Server Actions, deploy, Türk projeleri için pratik. Next.js Nedir? Next.js…

Tüm rehberler

İlgili rehberler

Next.js 16 Türkçe Tam 2026
AI ile Uygulama Geliştirme Kalite Kontrol Rehberi
AI Mobil Uygulama - 2026 Tam Rehber ve Kullanim Ipuc
10K MRR'a Nasıl Ölçeklenir Türkçe 2026
7 Günde SaaS Yapma Türkçe 2026