{"id":913,"date":"2026-05-20T09:56:37","date_gmt":"2026-05-20T01:56:37","guid":{"rendered":"https:\/\/junai.ai\/blog\/nextjs-pages-to-app-migration-23\/"},"modified":"2026-05-20T09:56:37","modified_gmt":"2026-05-20T01:56:37","slug":"nextjs-pages-to-app-migration-23","status":"publish","type":"post","link":"https:\/\/junai.ai\/blog\/nextjs-pages-to-app-migration-23\/","title":{"rendered":"Pages \u2192 App Router \ub9c8\uc774\uadf8\ub808\uc774\uc158 \uac00\uc774\ub4dc"},"content":{"rendered":"\n<!-- WordPress REST API \ubc1c\ud589\uc6a9 HTML (\uc790\ub3d9 \uc0dd\uc131) -->\n<!-- WP-FEATURED-MEDIA-ID: 859 -->\n<div style=\"max-width:800px;margin:0 auto;\">\n<style>\n:root {--color-primary:#4f46e5;--color-accent:#6366f1;--color-bg:#fafbfc;--color-bg-card:#fff;--color-text:#1a202c;--color-text-muted:#64748b;--hero-start:#1e1b4b;--hero-end:#4338ca;}\n*{box-sizing:border-box;}\n.container{max-width:760px;margin:0 auto;padding:0 24px 80px;}\n.hero{background:linear-gradient(135deg,var(--hero-start) 0%,var(--hero-end) 100%);color:#fff;padding:80px 24px 60px;text-align:center;}\n.hero .eyebrow{display:inline-block;font-size:14px;color:#a78bfa;font-weight:700;letter-spacing:0.1em;text-transform:uppercase;margin-bottom:14px;}\n.hero h1{font-size:36px;margin:0 0 16px;line-height:1.3;font-weight:800;}\n.hero p{color:#c7d2fe;font-size:18px;max-width:640px;margin:0 auto;line-height:1.6;}\n.hero img{width:100%;max-width:640px;height:auto;margin:32px auto 0;border-radius:10px;display:block;}\narticle{padding-top:48px;}\narticle h2{font-size:26px;margin:56px 0 20px;padding-left:14px;border-left:5px solid var(--color-accent);line-height:1.4;}\narticle h3{font-size:19px;margin:32px 0 12px;color:var(--color-primary);}\narticle p{margin:16px 0;}\narticle strong{color:var(--color-primary);font-weight:700;}\narticle code{background:#eef2ff;padding:2px 8px;border-radius:4px;font-family:'SF Mono',Menlo,Consolas,monospace;font-size:14px;color:#4338ca;}\n.databox{background:#eef2ff;border-left:4px solid var(--color-accent);padding:16px 20px;margin:24px 0;border-radius:0 8px 8px 0;font-size:15.5px;}\n.databox strong{color:var(--color-primary);}\n.warnbox{background:linear-gradient(135deg,#fef3c7 0%,#fde68a 100%);padding:16px 20px;margin:24px 0;border-radius:8px;font-size:15.5px;}\n.tablewrap{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:22px 0;}\ntable{width:100%;border-collapse:collapse;font-size:15px;background:var(--color-bg-card);}\nth,td{padding:11px 12px;text-align:left;border-bottom:1px solid #e2e8f0;vertical-align:top;}\nth{background:#f1f5f9;font-weight:700;color:#0f172a;}\ntd:first-child,th:first-child{font-weight:700;}\n@media (max-width:560px){.tablewrap table,.tablewrap thead,.tablewrap tbody,.tablewrap tr,.tablewrap th,.tablewrap td{display:block;width:auto;}.tablewrap thead{display:none;}.tablewrap tr{margin:0 0 14px;border:1px solid #e2e8f0;border-radius:10px;overflow:hidden;}.tablewrap td{border:none;border-bottom:1px solid #f1f5f9;padding:9px 14px;}.tablewrap td:first-child{background:#f1f5f9;font-weight:800;font-size:15.5px;}.tablewrap td:last-child{border-bottom:none;}.tablewrap td[data-label]::before{content:attr(data-label) \" \u2014 \";font-weight:700;color:var(--color-primary);}}\n.code-block{background:#0f172a;color:#e2e8f0;padding:16px 20px;border-radius:8px;font-family:'SF Mono',Menlo,Consolas,monospace;font-size:14px;line-height:1.6;margin:20px 0;overflow-x:auto;white-space:pre;}\n.cta{background:linear-gradient(135deg,#4f46e5 0%,#6366f1 100%);color:#fff;padding:28px 24px;border-radius:12px;margin:48px 0 0;text-align:center;}\n.cta h3{color:#fff;margin:0 0 8px;font-size:20px;}\n.cta p{color:#c7d2fe;margin:0;font-size:15.5px;}\n.footer-nav{margin-top:32px;padding-top:20px;border-top:1px solid #e2e8f0;font-size:14px;color:var(--color-text-muted);}\n.footer-nav a{color:var(--color-primary);text-decoration:none;}\n@media (max-width:480px){.hero h1{font-size:26px;}.hero p{font-size:16px;}article h2{font-size:21px;}article h3{font-size:17px;}body{font-size:16px;}}\n<\/style>\n<section class=\"hero\">\n  <span class=\"eyebrow\">Next.js \uad50\uc7ac \u00b7 23\ud3b8 \u00b7 \ub9c8\uc774\uadf8\ub808\uc774\uc158<\/span>\n  <h1>Pages \u2192 App Router \ub9c8\uc774\uadf8\ub808\uc774\uc158 \uac00\uc774\ub4dc<\/h1>\n  <p>\ud68c\uc0ac \ucf54\ub4dc\uc758 25% \uac00 \uc544\uc9c1 Pages Router. \ud55c \ubc88\uc5d0 \ub2e4 \ubc14\uafb8\uc9c0 \ub9d0\uace0 \uc810\uc9c4\uc801\uc73c\ub85c.<\/p>\n  <img decoding=\"async\" src=\"https:\/\/junai.ai\/blog\/wp-content\/uploads\/2026\/05\/hero-5-90.jpg\" alt=\"\uc61b \uad6c\uc870\uc5d0\uc11c \uc0c8 \uad6c\uc870\ub85c \uc810\uc9c4 \uc774\uc804\ud558\ub294 \ucee8\uc149 \uc77c\ub7ec\uc2a4\ud2b8\">\n<\/section>\n\n<div class=\"container\">\n<article>\n\n<p>1\ud3b8\uc5d0\uc11c \uc9da\uc5c8\ub358 \ud1b5\uacc4 \u2014 \ud68c\uc0ac Next.js \ucf54\ub4dc\uc758 70% \uac00 App Router, <strong>25% \uac00 \uc61b Pages Router<\/strong>. \uc2e0\uaddc \uc785\uc0ac\ud558\uba74 \ub9c8\uc774\uadf8\ub808\uc774\uc158 \uc791\uc5c5\uc744 \uc790\uc8fc \ub9cc\ub09c\ub2e4. \ud55c \ubc88\uc5d0 \ud1b5\uc9f8 \ubc14\uafb8\ub294 \uac8c \ud070 \uc0ac\uace0 \u2014 \uc810\uc9c4\uc801 \uc774\uc804\uc774 \uc815\ub2f5.<\/p>\n\n<p>\ub2e4\ud589\ud788 Next.js \ub294 <strong>\ub450 \ub77c\uc6b0\ud130\ub97c \uac19\uc740 \ud504\ub85c\uc81d\ud2b8\uc5d0\uc11c \uacf5\uc874<\/strong>\uc2dc\ud0ac \uc218 \uc788\uac8c \uc124\uacc4\ub410\ub2e4. \ud398\uc774\uc9c0 \ub2e8\uc704\ub85c \uc62e\uae30\uace0 \uac80\uc99d\ud558\uace0 \ubc18\ubcf5. \uc774\ubc88 \ud3b8\uc774 \uadf8 \ub2e8\uacc4\ubcc4 \uac00\uc774\ub4dc.<\/p>\n\n<h2>1. \uacf5\uc874 \ubaa8\ub4dc \u2014 pages\/ \uc640 app\/ \ub3d9\uc2dc \uc0ac\uc6a9<\/h2>\n\n<p>\uac19\uc740 Next.js \ud504\ub85c\uc81d\ud2b8\uc5d0 \ub450 \ub514\ub809\ud1a0\ub9ac\uac00 \ub3d9\uc2dc\uc5d0 \uc788\uc744 \uc218 \uc788\ub2e4.<\/p>\n\n<div class=\"code-block\">my-app\/\n\u251c\u2500\u2500 pages\/           \u2190 \uc61b \ub77c\uc6b0\ud130 (\uadf8\ub300\ub85c)\n\u2502   \u251c\u2500\u2500 index.tsx        \u2192 &#8220;\/&#8221;\n\u2502   \u251c\u2500\u2500 about.tsx        \u2192 &#8220;\/about&#8221;\n\u2502   \u2514\u2500\u2500 blog\/[slug].tsx  \u2192 &#8220;\/blog\/:slug&#8221;\n\u2514\u2500\u2500 app\/             \u2190 \uc0c8 \ub77c\uc6b0\ud130 (\uc774\uc804 \uc911)\n    \u2514\u2500\u2500 dashboard\/\n        \u2514\u2500\u2500 page.tsx     \u2192 &#8220;\/dashboard&#8221;<\/div>\n\n<p>\uac19\uc740 URL \uc774 \ub450 \ub514\ub809\ud1a0\ub9ac\uc5d0 \uc788\uc73c\uba74 \u2014 <strong>app\/ \uac00 \uc6b0\uc120<\/strong>. \ud55c \ud398\uc774\uc9c0\ub97c app \uc73c\ub85c \uc62e\uae30\uba74 \uadf8 \uc989\uc2dc \uc0c8 \ubc84\uc804\uc774 \ub77c\uc774\ube0c, pages \ucabd\uc740 \ubb34\uc2dc. \uc774\uac8c \uc810\uc9c4 \uc774\uc804\uc758 \ud575\uc2ec.<\/p>\n\n<div class=\"databox\">\n<strong>\uc774\uc804 \uc21c\uc11c \uad8c\uc7a5<\/strong> \u2014 \u2460 \uccab \ud398\uc774\uc9c0 \ud55c \uac1c\ub85c \uc6cc\ubc0d\uc5c5, \u2461 \uc790\uc8fc \uc548 \ubc14\ub00c\ub294 \uc815\uc801 \ud398\uc774\uc9c0(\uc57d\uad00\u00b7\uc18c\uac1c), \u2462 \ub370\uc774\ud130 \ud398\uce6d \ub2e8\uc21c\ud55c \ud398\uc774\uc9c0, \u2463 \ub370\uc774\ud130 \ud398\uce6d \ubcf5\uc7a1, \u2464 \ud3fc\u00b7\uc778\uc99d\u00b7\ubcf5\uc7a1\ud55c \uc778\ud130\ub799\uc158 \ub9c8\uc9c0\ub9c9. \ud559\uc2b5 \uace1\uc120\uc774 \uadf8 \uc21c\uc11c\ub85c \uac00\ud30c\ub974\ub2e4.\n<\/div>\n\n<h2>2. \ud398\uc774\uc9c0 \ubcc0\ud658 \u2014 5\uac00\uc9c0 \ucc28\uc774<\/h2>\n\n<div class=\"tablewrap\">\n<table>\n<thead><tr><th>Pages<\/th><th>App<\/th><\/tr><\/thead>\n<tbody>\n<tr><td><code>pages\/index.tsx<\/code><\/td><td data-label=\"App\"><code>app\/page.tsx<\/code><\/td><\/tr>\n<tr><td><code>pages\/about.tsx<\/code><\/td><td data-label=\"App\"><code>app\/about\/page.tsx<\/code><\/td><\/tr>\n<tr><td><code>pages\/blog\/[slug].tsx<\/code><\/td><td data-label=\"App\"><code>app\/blog\/[slug]\/page.tsx<\/code><\/td><\/tr>\n<tr><td><code>_app.tsx<\/code><\/td><td data-label=\"App\"><code>app\/layout.tsx<\/code><\/td><\/tr>\n<tr><td><code>_document.tsx<\/code><\/td><td data-label=\"App\"><code>app\/layout.tsx<\/code>(html\u00b7body)<\/td><\/tr>\n<tr><td><code>pages\/api\/foo.ts<\/code><\/td><td data-label=\"App\"><code>app\/api\/foo\/route.ts<\/code><\/td><\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n\n<p>\ud575\uc2ec \u2014 \ud30c\uc77c \ud55c \uac1c\ub97c <strong>\ud3f4\ub354 + page.tsx<\/strong> \ub85c \ubd84\ub9ac. \ud3f4\ub354 \uc774\ub984\uc774 URL \ub9c8\uc9c0\ub9c9 \uc138\uadf8\uba3c\ud2b8.<\/p>\n\n<h2>3. \ub370\uc774\ud130 \ud398\uce6d \ubcc0\ud658 \u2014 \uac00\uc7a5 \ud070 \ubcc0\ud654<\/h2>\n\n<p>\uc61b \ubc29\uc2dd:<\/p>\n\n<div class=\"code-block\">\/\/ pages\/blog\/[slug].tsx (Pages Router)\nexport const getServerSideProps = async ({ params }) =&gt; {\n  const post = await fetchPost(params.slug);\n  return { props: { post } };\n};\n\nexport default function BlogPost({ post }) {\n  return &lt;article&gt;{post.body}&lt;\/article&gt;;\n}<\/div>\n\n<p>\uc0c8 \ubc29\uc2dd:<\/p>\n\n<div class=\"code-block\">\/\/ app\/blog\/[slug]\/page.tsx (App Router)\nexport default async function BlogPost({ params }) {\n  const { slug } = await params;     \/\/ Next 15: Promise\n  const post = await fetchPost(slug);\n  return &lt;article&gt;{post.body}&lt;\/article&gt;;\n}<\/div>\n\n<p><code>getServerSideProps<\/code>\u00b7<code>getStaticProps<\/code>\u00b7<code>getStaticPaths<\/code> \uac00 \ub2e4 \uc0ac\ub77c\uc9c4\ub2e4. \ucef4\ud3ec\ub10c\ud2b8 \uc790\uccb4\uac00 async, \uadf8 \uc548\uc5d0\uc11c await. 8\ud3b8 \ub370\uc774\ud130 \ud398\uce6d \ucc55\ud130 \uadf8\ub300\ub85c.<\/p>\n\n<div class=\"tablewrap\">\n<table>\n<thead><tr><th>Pages<\/th><th>App<\/th><\/tr><\/thead>\n<tbody>\n<tr><td>getServerSideProps<\/td><td data-label=\"App\"><code>fetch(url, { cache: 'no-store' })<\/code><\/td><\/tr>\n<tr><td>getStaticProps<\/td><td data-label=\"App\"><code>fetch(url, { cache: 'force-cache' })<\/code><\/td><\/tr>\n<tr><td>getStaticProps + revalidate<\/td><td data-label=\"App\"><code>fetch(url, { next: { revalidate: N } })<\/code><\/td><\/tr>\n<tr><td>getStaticPaths<\/td><td data-label=\"App\"><code>export async function generateStaticParams()<\/code><\/td><\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n\n<h2>4. \ud074\ub77c\uc774\uc5b8\ud2b8 \ucef4\ud3ec\ub10c\ud2b8 \ud45c\uc2dc<\/h2>\n\n<p>\uc61b Pages Router \uc758 \ubaa8\ub4e0 \ucef4\ud3ec\ub10c\ud2b8\ub294 \uc790\ub3d9\uc73c\ub85c \ud074\ub77c\uc774\uc5b8\ud2b8. App Router \ub294 \uae30\ubcf8\uc774 \uc11c\ubc84\ub77c \u2014 \uc778\ud130\ub799\ud2f0\ube0c\ud55c \ubd80\ubd84\uc740 <strong><code>'use client'<\/code> \uba85\uc2dc<\/strong>\uac00 \ud544\uc218.<\/p>\n\n<div class=\"code-block\">\/\/ \uc61b: Pages\/components\/Counter.tsx\nimport { useState } from &#8216;react&#8217;;\nexport default function Counter() {\n  const [n, setN] = useState(0);\n  return &lt;button onClick={() =&gt; setN(n + 1)}&gt;{n}&lt;\/button&gt;;\n}\n\n\/\/ \uc0c8: App\/components\/Counter.tsx \u2014 \uccab \uc904 \ucd94\uac00\n&#8216;use client&#8217;;                           \/\/ \u2190 \ucd94\uac00\nimport { useState } from &#8216;react&#8217;;\nexport default function Counter() { \u2026 }<\/div>\n\n<p>\uc548 \ubd99\uc774\uba74 \ube4c\ub4dc \uc5d0\ub7ec \u2014 &#8220;<code>useState<\/code> only works in Client Components&#8221;. 6\ud3b8 server vs client \ucc55\ud130 \ucc38\uc870.<\/p>\n\n<h2>5. \uadf8 \uc678 \ud754\ud55c \ub9c8\uc774\uadf8\ub808\uc774\uc158 \ud56d\ubaa9<\/h2>\n\n<h3>useRouter \ubcc0\uacbd<\/h3>\n\n<div class=\"code-block\">\/\/ \uc61b\nimport { useRouter } from &#8216;next\/router&#8217;;\nconst router = useRouter();\nrouter.push(&#8216;\/dashboard&#8217;);\nrouter.query.id\n\n\/\/ \uc0c8\n&#8216;use client&#8217;;\nimport { useRouter, useParams, useSearchParams } from &#8216;next\/navigation&#8217;;\nconst router = useRouter();\nconst { id } = useParams();\nconst search = useSearchParams();<\/div>\n\n<h3>Head \u2192 Metadata<\/h3>\n\n<div class=\"code-block\">\/\/ \uc61b\nimport Head from &#8216;next\/head&#8217;;\n&lt;Head&gt;\n  &lt;title&gt;\uc18c\uac1c&lt;\/title&gt;\n&lt;\/Head&gt;\n\n\/\/ \uc0c8\nexport const metadata = {\n  title: &#8216;\uc18c\uac1c&#8217;,\n  description: &#8216;&#8230;&#8217;,\n};<\/div>\n\n<p>7\ud3b8 Metadata API \ucc38\uc870.<\/p>\n\n<h3>_app.tsx \uc758 Provider<\/h3>\n\n<p>\uc61b <code>_app.tsx<\/code> \uc5d0\uc11c \uac10\uc2f8\ub358 <code>SessionProvider<\/code>\u00b7<code>ThemeProvider<\/code> \uac19\uc740 \ud074\ub77c\uc774\uc5b8\ud2b8 \ucee8\ud14d\uc2a4\ud2b8\ub294 \u2014 \ubcc4\ub3c4 \ud074\ub77c\uc774\uc5b8\ud2b8 \ucef4\ud3ec\ub10c\ud2b8 (<code>'use client'<\/code>) \ub85c \ube7c\uc11c <code>app\/layout.tsx<\/code> \uc5d0\uc11c children \uc744 \uac10\uc308.<\/p>\n\n<div class=\"warnbox\">\n<strong>\ud754\ud55c \ud568\uc815 5\uac00\uc9c0<\/strong> \u2014 \u2460 params \uac00 Promise \uc778 \uac70 \uae5c\ube61(Next 15), \u2461 <code>useRouter<\/code> import \uacbd\ub85c \uc548 \ubc14\uafc8, \u2462 \ud074\ub77c\uc774\uc5b8\ud2b8 \ucef4\ud3ec\ub10c\ud2b8\uc5d0 <code>metadata<\/code> export(\ubb34\uc2dc\ub428), \u2463 getServerSideProps \uc794\uc874(\ube4c\ub4dc \uc5d0\ub7ec X \uc9c0\ub9cc \ub3d9\uc791 X), \u2464 <code>next\/image<\/code> \uc758 layout prop deprecate. \uc774\uc804 \ud6c4 \ud398\uc774\uc9c0 \ud55c \ubc88\uc529 \ub2e4 \uac80\uc99d \ud544\uc218.\n<\/div>\n\n<h3>\uc694\uc57d \u2014 23\ud3b8 \uc88c\ud45c<\/h3>\n\n<p>\uc5ec\uae30\uae4c\uc9c0 \uc815\ub9ac. <strong>\uacf5\uc874 \ubaa8\ub4dc<\/strong>\ub85c \ud398\uc774\uc9c0 \ub2e8\uc704 \uc810\uc9c4 \uc774\uc804 \u2014 app\/ \uac00 \uc6b0\uc120. \ubcc0\ud658 \ub9e4\ud551 \u2014 <code>_app\u2192layout<\/code>, <code>_document\u2192layout<\/code>, <code>pages\/api\u2192app\/api<\/code>, <code>getServerSideProps\u2192async + fetch<\/code>. \uc778\ud130\ub799\ud2f0\ube0c \ucef4\ud3ec\ub10c\ud2b8\uc5d4 <code>'use client'<\/code> \uccab \uc904 \ud544\uc218. useRouter import \uacbd\ub85c\u00b7Head\u2192Metadata \ub3c4 \uac19\uc774. Next 15 \uc758 <code>params<\/code> Promise \ud654\ub3c4 \uc8fc\uc758. \ud55c \ud398\uc774\uc9c0\uc529 \uc62e\uae30\uace0 QA \ud558\ub294 \uac8c \uc815\uc11d. \ub2e4\uc74c \ud3b8\uc5d0\uc11c <strong>TypeScript \ud1b5\ud569<\/strong>.<\/p>\n\n<div class=\"cta\">\n<h3>\ub2e4\uc74c \ud3b8 \uc608\uace0 \u2014 TypeScript \ud1b5\ud569<\/h3>\n<p>\ud0c0\uc785 \uc548\uc804\ud55c Next.js \ud504\ub85c\uc81d\ud2b8 \uc138\ud305. 24\ud3b8.<\/p>\n<\/div>\n\n<div class=\"footer-nav\">\n\uc2dc\ub9ac\uc988 \u00b7 <a href=\"https:\/\/junai.ai\/blog\/category\/nextjs\/\">\uc27d\uac8c \ubc30\uc6b0\ub294 Next.js<\/a> \u00b7 \uc774\uc804: <a href=\"https:\/\/junai.ai\/blog\/nextjs-testing-22\/\">Ch.22 \ud14c\uc2a4\ud2b8<\/a>\n<\/div>\n\n<\/article>\n<\/div>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>Next.js Pages \u2192 App Router \u2014 \uacf5\uc874 \ubaa8\ub4dc\u00b7\uc810\uc9c4 \uc774\uc804\u00b7data fetching\u00b7useRouter \ubcc0\ud658. \uad50\uc7ac 23\ud3b8.<\/p>\n","protected":false},"author":1,"featured_media":859,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[23],"tags":[],"class_list":["post-913","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-nextjs"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/junai.ai\/blog\/wp-json\/wp\/v2\/posts\/913","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/junai.ai\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/junai.ai\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/junai.ai\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/junai.ai\/blog\/wp-json\/wp\/v2\/comments?post=913"}],"version-history":[{"count":0,"href":"https:\/\/junai.ai\/blog\/wp-json\/wp\/v2\/posts\/913\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/junai.ai\/blog\/wp-json\/wp\/v2\/media\/859"}],"wp:attachment":[{"href":"https:\/\/junai.ai\/blog\/wp-json\/wp\/v2\/media?parent=913"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/junai.ai\/blog\/wp-json\/wp\/v2\/categories?post=913"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/junai.ai\/blog\/wp-json\/wp\/v2\/tags?post=913"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}