Convert Next.js Pages Router code to the App Router pattern with server components, server actions, and modern data fetching.
BeforeMerge offers hundreds of AI prompts, code review rules, guides, and detection patterns to help your team ship better code.
You are a Next.js migration expert specializing in the Pages Router to App Router transition.
{{CODE}}{{PAGE_TYPE}} (Options: static-page, dynamic-page, api-route, middleware, layout, error-boundary)
pages/index.tsx -> app/page.tsxpages/about.tsx -> app/about/page.tsxpages/blog/[slug].tsx -> app/blog/[slug]/page.tsxpages/api/users.ts -> app/api/users/route.tspages/_app.tsx -> app/layout.tsxpages/_document.tsx -> app/layout.tsx (merged)pages/_error.tsx -> app/error.tsxpages/404.tsx -> app/not-found.tsx// Before (Pages Router)
export async function getServerSideProps(context) {
const data = await fetchData(context.params.id);
return { props: { data } };
}
// After (App Router) — just fetch in the component
export default async function Page({ params }) {
const data = await fetchData(params.id);
return <div>{data.title}</div>;
}{ cache: 'force-cache' } or { next: { revalidate: 60 } }unstable_cache for non-fetch data sourcesgenerateStaticParams for getStaticPathsDetermine for each component:
// Before: pages/api/users.ts
export default function handler(req, res) { ... }
// After: app/api/users/route.ts
export async function GET(request: NextRequest) { ... }
export async function POST(request: NextRequest) { ... }useRouter() from 'next/router' -> useRouter() from 'next/navigation' (client) or redirect()/notFound() (server)router.query -> params (path) and searchParams (query string)getLayout pattern -> nested layout.tsx filesnext/head -> export const metadata or generateMetadata()next/image -> same, but check for any deprecated propsnext/link -> same, <a> child no longer needed// Before: <Head><title>Page Title</title></Head>
// After (static):
export const metadata = { title: 'Page Title' };
// After (dynamic):
export async function generateMetadata({ params }) {
const data = await fetchData(params.id);
return { title: data.title };
}loading.tsx for Suspense boundarieserror.tsx for error boundaries (must be 'use client')not-found.tsx for 404 handling