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.
Benzer Promptlar
Kod
Zod ile ortam değişkenleri
Eksik gizli anahtarı açılışta yakalayan Zod ortam şeması.
Kod
Next.js dinamik metadata
Promise params ile başlık, açıklama ve mutlak Open Graph adresi.
Kod
Webhook HMAC doğrulaması
timingSafeEqual kullanan webhook imza kontrolü.
Kod
React iyimser beğeni
Beğeni sayısını sunucu yanıtından önce güncelleyen useOptimistic örneği.