[{"_1":2,"_129":-5,"_130":-5},"loaderData",{"_3":4},"routes/editions.$slug",{"_5":6,"_28":29},"edition",{"_7":8,"_9":10,"_11":12,"_13":14,"_15":16,"_17":18,"_19":20,"_24":25,"_26":27},"number",3,"title","Next.js App Router: Migration Guide","description","Step-by-step guide to migrating from Pages Router to App Router with real examples.","date","2025-05-18","slug","nextjs-migration","readingTime","10 min","topics",[21,22,23],"Next.js","React","Migration","published",true,"content","\n# Next.js App Router: Migration Guide\n\nEdition #3! Today we're tackling the migration from Next.js Pages Router to the new App Router.\n\n## Why Migrate?\n\n### App Router Benefits\n\n- **Server Components** by default\n- **Streaming** and Suspense support\n- **Layouts** for shared UI\n- **Better data fetching** with async/await\n- **Improved TypeScript** support\n\n## File Structure Changes\n\n### Before (Pages Router)\n\n```\npages/\n _app.js\n _document.js\n index.js\n about.js\n blog/\n [slug].js\n```\n\n### After (App Router)\n\n```\napp/\n layout.js\n page.js\n about/\n page.js\n blog/\n [slug]/\n page.js\n```\n\n## Basic Migration Steps\n\n### 1. Move Root Layout\n\n**Before:**\n```jsx\n// pages/_app.js\nexport default function App({ Component, pageProps }) {\n return ;\n}\n```\n\n**After:**\n```jsx\n// app/layout.js\nexport default function RootLayout({ children }) {\n return (\n \n {children}\n \n );\n}\n```\n\n### 2. Convert Pages\n\n**Before:**\n```jsx\n// pages/index.js\nexport default function Home() {\n return

Welcome

;\n}\n```\n\n**After:**\n```jsx\n// app/page.js\nexport default function Home() {\n return

Welcome

;\n}\n```\n\n### 3. Dynamic Routes\n\n**Before:**\n```jsx\n// pages/blog/[slug].js\nexport default function Post({ post }) {\n return

{post.title}

;\n}\n\nexport async function getStaticProps({ params }) {\n const post = await getPost(params.slug);\n return { props: { post } };\n}\n```\n\n**After:**\n```jsx\n// app/blog/[slug]/page.js\nexport default async function Post({ params }) {\n const post = await getPost(params.slug);\n return

{post.title}

;\n}\n\nexport async function generateStaticParams() {\n const posts = await getPosts();\n return posts.map((post) => ({\n slug: post.slug,\n }));\n}\n```\n\n## Data Fetching\n\n### Server Components (Default)\n\n```jsx\n// app/posts/page.js\nasync function getPosts() {\n const res = await fetch('https://api.example.com/posts', {\n next: { revalidate: 60 } // Revalidate every 60 seconds\n });\n return res.json();\n}\n\nexport default async function Posts() {\n const posts = await getPosts();\n \n return (\n

{post.title}

\n );\n}\n```\n\n### Client Components\n\n```jsx\n'use client';\n\nimport { useState, useEffect } from 'react';\n\nexport default function Counter() {\n const [count, setCount] = useState(0);\n \n return (\n \n );\n}\n```\n\n## Layouts and Templates\n\n### Nested Layouts\n\n```jsx\n// app/layout.js\nexport default function RootLayout({ children }) {\n return (\n \n \n

\n {children}\n