Pages → App Router migrasyon
Pages Router dosyasını App Router’a taşıma planı.
Prompt Metni
Aşağıdaki Pages Router sayfasını Next.js App Router'a taşı. Veri çekmeyi sunucuda tut; eşdeğer page.tsx ve loading.tsx dosyalarını ver. getServerSideProps, next/router ve _app kullanımındaki temel değişiklikleri açıkla.
export async function getServerSideProps() {
const posts = await fetch('https://api.example.com/posts').then(r => r.json())
return { props: { posts } }
}
export default function Posts({ posts }) {
return posts.map(post => <a href={'/posts/' + post.slug}>{post.title}</a>)
}Prompt Sonucu
app/posts/page.tsx
import Link from 'next/link'
type Post = {
id: string
slug: string
title: string
}
export default async function PostsPage() {
const response = await fetch('https://api.example.com/posts', {
cache: 'no-store',
})
if (!response.ok) {
throw new Error('Yazılar alınamadı.')
}
const posts = await response.json() as Post[]
return (
<main>
<h1>Yazılar</h1>
<ul>
{posts.map((post) => (
<li key={post.id}>
<Link href={'/posts/' + post.slug}>{post.title}</Link>
</li>
))}
</ul>
</main>
)
}
app/posts/loading.tsx
export default function Loading() {
return <p role="status">Yazılar yükleniyor…</p>
}
Temel değişiklikler:
- App Router'da getServerSideProps yoktur; async Server Component içinde doğrudan veri çekilir.
- next/router yerine Client Component gerektiğinde next/navigation kullanılır.
- _app.tsx görevi app/layout.tsx dosyasına taşınır.
- cache: 'no-store', isteğin her sayfa görüntülemesinde yeniden yapılmasını sağlar.
- Dahili gezinmede a yerine next/link kullanılır.