Next.js 14 ile Modern Web Geliştirme: Server Actions ve App Router

Next.js 14, web geliştirme dünyasında önemli bir adım atarak Server Actions ve App Router gibi güçlü özelliklerle geldi. Bu yazıda, bu özellikleri nasıl etkin kullanabileceğimizi göreceğiz.

App Router Mimarisi

App Router, dosya sistemi tabanlı yönlendirmeyi daha esnek ve güçlü hale getiriyor. layout.tsx, page.tsx ve loading.tsx gibi özel dosyalarla sayfa yapısını yönetmek artık çok daha kolay.

typescript
// app/blog/page.tsx
export default async function BlogPage() {
  const posts = await getPosts();
  
  return (
    <main>
      <h1>Blog Yazıları</h1>
      <ul>
        {posts.map(post => (
          <li key={post.id}>{post.title}</li>
        ))}
      </ul>
    </main>
  );
}

Server Actions

API rotaları oluşturmadan sunucu tarafı işlemlerini doğrudan bileşenler içinden çağırmamıza olanak tanır. Form işlemleri için harika bir çözümdür.

typescript
// app/actions.ts
'use server'

export async function createPost(formData: FormData) {
  const title = formData.get('title');
  await db.post.create({ data: { title } });
  revalidatePath('/blog');
}