{"id":34152,"date":"2026-09-24T10:30:30","date_gmt":"2026-09-24T05:00:30","guid":{"rendered":"https:\/\/www.vocso.com\/blog\/?p=34152"},"modified":"2026-09-24T10:40:44","modified_gmt":"2026-09-24T05:10:44","slug":"nextjs-pages-router-to-app-router-migration","status":"publish","type":"post","link":"https:\/\/www.vocso.com\/blog\/nextjs-pages-router-to-app-router-migration\/","title":{"rendered":"Migrating a Next.js App from the Pages Router to the App Router"},"content":{"rendered":"
<\/div>\n

You can migrate a Next.js app from the Pages Router to the App Router one route at a time, because both routers run side by side in the same project. Move shared layout into app\/layout.tsx<\/code>, rebuild each page as a Server Component that fetches its own data, then replace next\/head<\/code> with the Metadata API and API routes with Route Handlers. Only migrate when the App Router gives you something you need, and never as a single big-bang rewrite.<\/p>\n\n\n\n

If you are still on plain React, start with our guide to migrating from React to Next.js<\/a> and come back here afterwards.<\/p>\n\n\n\n

\n
\n

Table of Contents<\/p>\n<\/span><\/div>\n