Next.js in 2026: App Router, server actions, and production stories

[Aior]

Next.js neden bu kadar yaygın?​

Next.js 2016'da Vercel tarafından başlatıldı; bugün React tabanlı production uygulamalarının çoğunluğu Next.js üzerinde. AIOR olarak React projelerinin %75'inde Next.js tercih ediyoruz. Sebebi: SSR, SSG, ISR, API routes, image optimization, font optimization, middleware — hepsi tek paket. Custom Webpack konfigürasyonu yapmadan production-grade React uygulaması ayağa kalkıyor.

App Router vs Pages Router​

Next.js 13'te gelen App Router 2026'da artık varsayılan. Pages Router hâlâ destekleniyor ama yeni projeler App Router ile başlatılıyor. AIOR projelerinde App Router'a göç son 12 ayda tamamlandı.

App Router'ın getirdikleri:

• Server Components by default, Client Components opt-in.
• Nested layouts (root layout, segment layouts).
• Loading.tsx + error.tsx — built-in Suspense ve Error Boundary.
• Streaming SSR — sayfanın yavaş kısmı bekletilmeden hızlı kısımları render edilir.
• Parallel routes ve intercepting routes — kompleks UI senaryoları.

Ödünleşmeler:

• Mental model daha karmaşık (server/client boundary).
• Pages Router'dan migration tek seferde olmuyor; co-existence dönemine ihtiyaç var.
• Bazı eski paketler henüz App Router ile uyumlu değil.

Server Actions — form yönetimini değiştirdi​

Server Actions Next.js 14'te stable oldu. Bir async fonksiyona `'use server'` directive eklemek o fonksiyonu server'da çalışan, form'dan direkt çağrılabilen bir endpoint'e dönüştürüyor:

async function createPost(formData: FormData) {
  'use server';
  await db.posts.create({ title: formData.get('title') });
  revalidatePath('/posts');
}
// Then in component:
<form action={createPost}>
  <input name="title" />
  <button>Create</button>
</form>

AIOR'da müşteri panellerinde Server Actions ile yazdığımız formlar `useState`/`useEffect`/`onSubmit` boilerplate'inden tamamen kurtuluyor. Optimistic updates `useOptimistic` hook ile temiz yazılıyor.

Veri yükleme stratejileri​

Next.js'in SSG/SSR/ISR/CSR seçimleri farklı sayfa türleri için farklı stratejiler kullanmaya imkân veriyor:

• SSG (Static Site Generation) — blog, marketing sayfaları. Build-time'da render.
• SSR (Server-Side Rendering) — kullanıcıya özel içerik. Her istekte render.
• ISR (Incremental Static Regeneration) — sıkça değişen ama her saniyede değil. `revalidate: 60`.
• CSR (Client-Side Rendering) — interaktif dashboard'lar. İlk yükleme sonrası API çağrıları.

AIOR'da müşteri projelerinde bu seçimlerin karışımını kullanıyoruz — tek tip değil. Marketing sayfaları SSG, dashboard SSR + CSR mix.

Middleware kullanımı​

Next.js Middleware (`middleware.ts`) Edge runtime'da çalışan, request'leri intercept eden katman. AIOR'da kullandığımız desenler:

• Auth kontrolü — protected route'lara yetkisiz erişimi yönlendirir.
• A/B testing — kullanıcıyı varyanta atar.
• Geo-routing — kullanıcının bölgesine göre dil/içerik yönlendirme.
• Rate limiting — kötüye kullanım koruması.
• URL rewrites — bilingual slug aliasing.

Deploy stratejileri​

Vercel default deploy hedefi ama AIOR'da müşteri tercihine göre değişiyor:

• Vercel — en sade DX, otomatik scaling, edge functions.
• Self-hosted (Docker + Node.js) — kurumsal müşteriler, veri lokasyonu önemli olanlar.
• AWS Amplify / Cloudflare Pages — alternatif PaaS.
• Standalone build (`output: 'standalone'`) — Docker image'ları minimal.

AIOR olarak Frankfurt/Paris veri merkezlerinde self-hosted Next.js çalıştırdığımız müşterilerimiz var.

Performance ve Core Web Vitals​

Next.js varsayılan optimizasyonları (next/image, next/font, automatic code splitting) Core Web Vitals için belirgin avantaj. AIOR projelerinde Lighthouse skorlarını 90+ tutuyoruz. `next/script` ile 3. parti script yükleme stratejileri (`beforeInteractive`, `afterInteractive`, `lazyOnload`) doğru kullanılırsa Total Blocking Time minimumda kalır.

Test ve CI​

Vitest + Testing Library + Playwright AIOR'ın Next.js standart test setup'ı. CI hattında: type check, lint, unit/integration test, E2E test, build, deploy preview. Vercel preview deployment'ları her PR için otomatik.

Sonuç​

Next.js 2026'da React tabanlı production uygulamaları için fiili standart. App Router + Server Components + Actions kombinasyonu modern web geliştirme paradigmasını şekillendiriyor. AIOR olarak müşteri tarafına en sık teslim ettiğimiz frontend stack. Sizin Next.js üretiminizde App Router'a geçiş tamamlandı mı, yoksa hâlâ Pages Router üzerinde mi koşuyor?

Why is Next.js so widespread?​

Next.js was launched by Vercel in 2016; today the majority of React-based production applications run on Next.js. AIOR uses Next.js on about 75% of React projects. The reason: SSR, SSG, ISR, API routes, image optimisation, font optimisation, middleware — all in one package. A production-grade React app stands up without custom Webpack configuration.

App Router vs Pages Router​

The App Router introduced in Next.js 13 is the default in 2026. The Pages Router is still supported but new projects start with the App Router. AIOR's App Router migration completed in the last 12 months.

What App Router brings:

• Server Components by default, Client Components opt-in.
• Nested layouts (root layout, segment layouts).
• Loading.tsx + error.tsx — built-in Suspense and Error Boundary.
• Streaming SSR — fast parts of a page render without waiting for the slow parts.
• Parallel routes and intercepting routes — for complex UI scenarios.

Trade-offs:

• Mental model is more complex (server/client boundary).
• Migration from Pages Router doesn't happen in one go; co-existence is needed.
• Some older packages aren't App Router-compatible yet.

Server Actions — changed form handling​

Server Actions became stable in Next.js 14. Adding a `'use server'` directive to an async function turns it into a server-side endpoint callable directly from forms:

async function createPost(formData: FormData) {
  'use server';
  await db.posts.create({ title: formData.get('title') });
  revalidatePath('/posts');
}
// Then in component:
<form action={createPost}>
  <input name="title" />
  <button>Create</button>
</form>

Forms written with Server Actions on customer panels at AIOR get rid of `useState`/`useEffect`/`onSubmit` boilerplate completely. Optimistic updates are clean with the `useOptimistic` hook.

Data loading strategies​

Next.js's SSG/SSR/ISR/CSR options let different page types use different strategies:

• SSG (Static Site Generation) — blogs, marketing pages. Render at build time.
• SSR (Server-Side Rendering) — user-specific content. Render per request.
• ISR (Incremental Static Regeneration) — frequently changing but not per second. `revalidate: 60`.
• CSR (Client-Side Rendering) — interactive dashboards. API calls after first load.

On customer projects at AIOR we use mixes of these — not a single strategy. Marketing pages SSG, dashboards SSR + CSR.

Middleware use​

Next.js Middleware (`middleware.ts`) runs in Edge runtime and intercepts requests. Patterns we use at AIOR:

• Auth checks — redirect unauthorised access to protected routes.
• A/B testing — assign the user to a variant.
• Geo-routing — language/content routing by region.
• Rate limiting — abuse protection.
• URL rewrites — bilingual slug aliasing.

Deploy strategies​

Vercel is the default deploy target but it varies with customer preference at AIOR:

• Vercel — best DX, automatic scaling, edge functions.
• Self-hosted (Docker + Node.js) — enterprise customers, those with data locality requirements.
• AWS Amplify / Cloudflare Pages — alternative PaaS.
• Standalone build (`output: 'standalone'`) — minimal Docker images.

AIOR has customers running self-hosted Next.js in Frankfurt/Paris data centres.

Performance and Core Web Vitals​

Next.js defaults (next/image, next/font, automatic code splitting) are a clear advantage for Core Web Vitals. We keep Lighthouse scores at 90+ on AIOR projects. With `next/script` and the right strategy (`beforeInteractive`, `afterInteractive`, `lazyOnload`), Total Blocking Time stays minimal.

Test and CI​

Vitest + Testing Library + Playwright is AIOR's standard test setup for Next.js. CI pipeline: type check, lint, unit/integration test, E2E test, build, deploy preview. Vercel preview deployments are automatic per PR.

Bottom line​

Next.js in 2026 is the de facto standard for React-based production applications. The App Router + Server Components + Actions combination shapes modern web development paradigms. AIOR delivers Next.js as our most frequent frontend stack to customers. Have you completed App Router migration on your Next.js production, or are you still running Pages Router?