{"id":871,"date":"2026-05-20T09:50:52","date_gmt":"2026-05-20T01:50:52","guid":{"rendered":"https:\/\/junai.ai\/blog\/nextjs-app-router-structure-3\/"},"modified":"2026-05-20T09:58:34","modified_gmt":"2026-05-20T01:58:34","slug":"nextjs-app-router-structure-3","status":"publish","type":"post","link":"https:\/\/junai.ai\/blog\/nextjs-app-router-structure-3\/","title":{"rendered":"App Router \ud3f4\ub354 \uad6c\uc870 \ud55c\ub208\uc5d0 \ubcf4\uae30 \u2014 Next.js Ch.3"},"content":{"rendered":"\n<!-- WordPress REST API \ubc1c\ud589\uc6a9 HTML (\uc790\ub3d9 \uc0dd\uc131) -->\n<!-- WP-FEATURED-MEDIA-ID: 817 -->\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 3\ud3b8 \u00b7 \ud3f4\ub354 \uad6c\uc870<\/span>\n  <h1>App Router \ud3f4\ub354 \uad6c\uc870 \ud55c\ub208\uc5d0 \ubcf4\uae30<\/h1>\n  <p>\ud3f4\ub354\uac00 \uace7 \ub77c\uc6b0\ud2b8, \ud30c\uc77c \uc774\ub984\uc774 \uace7 \uc5ed\ud560. \ud55c \ubc88 \uc678\uc6cc\ub450\uba74 \ud3c9\uc0dd.<\/p>\n  <img decoding=\"async\" src=\"https:\/\/junai.ai\/blog\/wp-content\/uploads\/2026\/05\/hero-5-50.jpg\" alt=\"app \ub514\ub809\ud1a0\ub9ac\uc758 \ud3f4\ub354 \ud2b8\ub9ac\uac00 \ub77c\uc6b0\ud2b8\ub85c \ud3bc\uccd0\uc9c0\ub294 \ucee8\uc149 \uc544\uc774\uc18c\uba54\ud2b8\ub9ad \uc77c\ub7ec\uc2a4\ud2b8\">\n<\/section>\n\n<div class=\"container\">\n<article>\n\n<p>2\ud3b8\uc5d0\uc11c <code>create-next-app<\/code> \uc73c\ub85c \uccab \ud504\ub85c\uc81d\ud2b8\ub97c \ub9cc\ub4e4\uc5c8\ub2e4. \uc5f4\uc5b4\ubcf4\uba74 <code>app\/<\/code> \uc548\uc5d0 <code>layout.tsx<\/code>\u00b7<code>page.tsx<\/code>\u00b7<code>globals.css<\/code> \uac19\uc740 \ud30c\uc77c\uc774 \ub4e4\uc5b4\uc788\ub2e4. \ubcf4\uae30\uc5d4 \ub2e8\uc21c\ud55c\ub370 \uc774 \uc14b\uc774 <strong>Next.js App Router \uc758 \uc804\ubd80<\/strong>\ub97c \uacb0\uc815\ud55c\ub2e4.<\/p>\n\n<p>\uc774\ubc88 \ud3b8\uc740 <code>app\/<\/code> \uc548\uc5d0\uc11c \uc790\uc8fc \uc4f0\ub294 <strong>\ud2b9\uc218 \ud30c\uc77c \uc774\ub984<\/strong>\uc744 \uc815\ub9ac\ud55c\ub2e4. \uc774\ub984\uc774 \uc815\ud574\uc838 \uc788\uc5b4\uc11c \uc678\uc6cc\uc57c \ud558\ub294\ub370, 7\uac1c \uc815\ub3c4\ub77c 30\ubd84\uc774\uba74 \ub05d\ub09c\ub2e4. \ud55c \ubc88 \uc678\uc6b0\uba74 \ub2e4\uc74c \ucc55\ud130\ubd80\ud130 \ud3f4\ub354 \ubcf4\ub294 \ub208\uc774 \ub2ec\ub77c\uc9c4\ub2e4.<\/p>\n\n<h2>1. \ud575\uc2ec \uc6d0\uce59 \u2014 \ud3f4\ub354 = \ub77c\uc6b0\ud2b8, \ud30c\uc77c = \uc5ed\ud560<\/h2>\n\n<p>App Router \uc758 \ub8f0\uc740 \ub450 \uc904\ub85c \ub05d\ub09c\ub2e4.<\/p>\n\n<ul>\n<li>\ud3f4\ub354\ub97c \ub9cc\ub4e4\uba74 <strong>URL \uacbd\ub85c<\/strong>\uac00 \uc0dd\uae34\ub2e4. <code>app\/about\/<\/code> \u2192 <code>\/about<\/code>.<\/li>\n<li>\uadf8 \ud3f4\ub354 \uc548\uc758 <strong>\ud30c\uc77c \uc774\ub984<\/strong>\uc774 \uc5ed\ud560\uc744 \uacb0\uc815\ud55c\ub2e4. <code>page.tsx<\/code> \ub294 \ud398\uc774\uc9c0, <code>layout.tsx<\/code> \ub294 \uacf5\ud1b5 \ub808\uc774\uc544\uc6c3.<\/li>\n<\/ul>\n\n<p>\uc774\uac8c \ub05d\uc774\ub2e4. \ud3f4\ub354\ub9cc \ub9cc\ub4e4\uace0 \ud398\uc774\uc9c0 \ud30c\uc77c\uc744 \uc548 \ub450\uba74 \uadf8 \uacbd\ub85c\ub294 \uc548 \uc0dd\uae34\ub2e4 (404). \ud3f4\ub354 \uc5c6\uc774 \ud30c\uc77c\ub9cc \ub450\uba74? \uc544\ubb34 \uc77c\ub3c4 \uc548 \uc77c\uc5b4\ub09c\ub2e4.<\/p>\n\n<div class=\"databox\">\n<strong>\uc608\uc2dc<\/strong> \u2014 <code>app\/blog\/page.tsx<\/code> \ub9cc \uc788\uc73c\uba74 <code>\/blog<\/code> \ud55c \ud398\uc774\uc9c0. \uac70\uae30\uc5d0 <code>app\/blog\/[slug]\/page.tsx<\/code> \ub97c \ucd94\uac00\ud558\uba74 <code>\/blog\/hello-world<\/code> \uac19\uc740 \ub3d9\uc801 \ud398\uc774\uc9c0\uac00 \uc0dd\uae34\ub2e4. \ud3f4\ub354 \uc774\ub984\uc758 <code>[slug]<\/code> \uac00 \ubcc0\uc218\uc784\uc744 \ub73b\ud55c\ub2e4(5\ud3b8\uc5d0\uc11c \uc790\uc138\ud788).\n<\/div>\n\n<h2>2. \ud2b9\uc218 \ud30c\uc77c 7\uac00\uc9c0 \u2014 \uc774\uac8c \uc0ac\uc804\uc774\ub2e4<\/h2>\n\n<p>App Router \uac00 \uc54c\uc544\ubcf4\ub294 \ud30c\uc77c \uc774\ub984\uc740 \uc815\ud574\uc838 \uc788\ub2e4. \uadf8 \uc678 \uc774\ub984\uc740 \uadf8\ub0e5 \uc77c\ubc18 \ubaa8\ub4c8(\ucef4\ud3ec\ub10c\ud2b8\u00b7\ud5ec\ud37c) \uc77c \ubfd0, \ub77c\uc6b0\ud305\uc5d0 \uad00\uc5ec\ud558\uc9c0 \uc54a\ub294\ub2e4.<\/p>\n\n<div class=\"tablewrap\">\n<table>\n<thead><tr><th>\ud30c\uc77c<\/th><th>\uc5ed\ud560<\/th><th>\uc0ac\uc6a9 \ube48\ub3c4<\/th><\/tr><\/thead>\n<tbody>\n<tr><td><code>page.tsx<\/code><\/td><td data-label=\"\uc5ed\ud560\">\uc774 \uacbd\ub85c\uc758 \uc2e4\uc81c \ud398\uc774\uc9c0 UI<\/td><td data-label=\"\ube48\ub3c4\">\u2605\u2605\u2605 \ud544\uc218<\/td><\/tr>\n<tr><td><code>layout.tsx<\/code><\/td><td data-label=\"\uc5ed\ud560\">\uc790\uc2dd \ud398\uc774\uc9c0\ub4e4\uc744 \uac10\uc2f8\ub294 \uacf5\ud1b5 \ub808\uc774\uc544\uc6c3<\/td><td data-label=\"\ube48\ub3c4\">\u2605\u2605\u2605 \ub9e4\uc6b0 \uc790\uc8fc<\/td><\/tr>\n<tr><td><code>loading.tsx<\/code><\/td><td data-label=\"\uc5ed\ud560\">\ub370\uc774\ud130 \ubd88\ub7ec\uc624\ub294 \ub3d9\uc548 \ubcf4\uc5ec\uc904 UI<\/td><td data-label=\"\ube48\ub3c4\">\u2605\u2605 \uc790\uc8fc<\/td><\/tr>\n<tr><td><code>error.tsx<\/code><\/td><td data-label=\"\uc5ed\ud560\">\uc5d0\ub7ec \ubc1c\uc0dd \uc2dc \ub300\uccb4 UI<\/td><td data-label=\"\ube48\ub3c4\">\u2605\u2605 \uc790\uc8fc<\/td><\/tr>\n<tr><td><code>not-found.tsx<\/code><\/td><td data-label=\"\uc5ed\ud560\">404 \uc2dc \ubcf4\uc5ec\uc904 UI<\/td><td data-label=\"\ube48\ub3c4\">\u2605 \uac00\ub054<\/td><\/tr>\n<tr><td><code>template.tsx<\/code><\/td><td data-label=\"\uc5ed\ud560\">layout \uacfc \ube44\uc2b7\ud558\uc9c0\ub9cc \ub9e4\ubc88 \uc0c8\ub85c \ub9c8\uc6b4\ud2b8<\/td><td data-label=\"\ube48\ub3c4\">\ub4dc\ubb44<\/td><\/tr>\n<tr><td><code>route.ts<\/code><\/td><td data-label=\"\uc5ed\ud560\">API \uc5d4\ub4dc\ud3ec\uc778\ud2b8 (HTML \uc544\ub2d8)<\/td><td data-label=\"\ube48\ub3c4\">\u2605 API \ub9cc\ub4e4 \ub54c<\/td><\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n\n<p>\uc774 7\uac1c\ub9cc \uc54c\uba74 App Router \uc758 90% \uac00 \ub05d\ub09c\ub2e4. \ub098\uba38\uc9c0\ub294 14\ud3b8 (Route Handlers) \uae4c\uc9c0 \uac00\uba74\uc11c \ud558\ub098\uc529 \ub9cc\uc838\ubcf8\ub2e4.<\/p>\n\n<h2>3. layout \uacfc page \u2014 \uac00\uc7a5 \uc790\uc8fc \ub9cc\uc9c0\ub294 \ub458<\/h2>\n\n<p><code>layout.tsx<\/code> \uc640 <code>page.tsx<\/code> \ub294 \uc774\ub984\uc774 \ube44\uc2b7\ud55c\ub370 \uc5ed\ud560\uc774 \uc644\uc804\ud788 \ub2e4\ub974\ub2e4.<\/p>\n\n<h3>page.tsx \u2014 \uadf8 \uacbd\ub85c\uc758 \ubcf8\ubb38<\/h3>\n\n<div class=\"code-block\">\/\/ app\/about\/page.tsx\nexport default function AboutPage() {\n  return (\n    &lt;main&gt;\n      &lt;h1&gt;\uc18c\uac1c&lt;\/h1&gt;\n      &lt;p&gt;\uc774 \uc0ac\uc774\ud2b8\ub294 \u2026&lt;\/p&gt;\n    &lt;\/main&gt;\n  );\n}<\/div>\n\n<p><code>app\/about\/page.tsx<\/code> \uac00 <code>\/about<\/code> URL \uc758 \ubcf8\ubb38\uc774 \ub41c\ub2e4. \ud568\uc218 \uc774\ub984\uc740 \uc790\uc720, <code>export default<\/code> \uac00 \ud575\uc2ec.<\/p>\n\n<h3>layout.tsx \u2014 \uc790\uc2dd\ub4e4\uc744 \uac10\uc2f8\ub294 \uc637<\/h3>\n\n<div class=\"code-block\">\/\/ app\/layout.tsx  (\ub8e8\ud2b8 \ub808\uc774\uc544\uc6c3, \ud544\uc218)\nexport default function RootLayout({\n  children,\n}: {\n  children: React.ReactNode;\n}) {\n  return (\n    &lt;html lang=&#8221;ko&#8221;&gt;\n      &lt;body&gt;\n        &lt;header&gt;\uacf5\ud1b5 \ud5e4\ub354&lt;\/header&gt;\n        {children}\n        &lt;footer&gt;\uacf5\ud1b5 \ud478\ud130&lt;\/footer&gt;\n      &lt;\/body&gt;\n    &lt;\/html&gt;\n  );\n}<\/div>\n\n<p><code>{children}<\/code> \uc790\ub9ac\uc5d0 <code>page.tsx<\/code> \ub610\ub294 \ub354 \uc548\ucabd layout \uc774 \ub07c\uc6cc\uc9c4\ub2e4. \ud5e4\ub354\u00b7\ud478\ud130\u00b7\uc0ac\uc774\ub4dc\ubc14\ub97c \ud55c \ubc88\ub9cc \uc801\uc5b4\ub450\uba74 \ubaa8\ub4e0 \ud398\uc774\uc9c0\uc5d0 \uc790\ub3d9\uc73c\ub85c \ub4e4\uc5b4\uac04\ub2e4.<\/p>\n\n<p>\ub808\uc774\uc544\uc6c3\uc740 <strong>\uc911\ucca9<\/strong>\uc774 \uac00\ub2a5\ud558\ub2e4. <code>app\/blog\/layout.tsx<\/code> \ub97c \ucd94\uac00\ud558\uba74 <code>\/blog\/*<\/code> \ud398\uc774\uc9c0\ub4e4\ub9cc \uadf8 layout \uc73c\ub85c \uac10\uc2f8\uc9c4\ub2e4. \ub8e8\ud2b8 layout \u2192 \ube14\ub85c\uadf8 layout \u2192 \ud398\uc774\uc9c0 \u2014 \uc591\ud30c\ucc98\ub7fc.<\/p>\n\n<div class=\"warnbox\">\n<strong>\ub8e8\ud2b8 layout \uc758 \ud568\uc815<\/strong> \u2014 <code>app\/layout.tsx<\/code> \ub294 \ubb34\uc870\uac74 <code>&lt;html&gt;<\/code> \uacfc <code>&lt;body&gt;<\/code> \ub97c \ud3ec\ud568\ud574\uc57c \ud55c\ub2e4. \ube60\ub728\ub9ac\uba74 \ube4c\ub4dc \uc5d0\ub7ec. <code>create-next-app<\/code> \uc774 \uc790\ub3d9\uc73c\ub85c \ub9cc\ub4e4\uc5b4\uc8fc\ub2c8\uae4c \uad73\uc774 \uc9c0\uc6b0\uc9c0 \ub9d0 \uac83.\n<\/div>\n\n<h2>4. loading \uacfc error \u2014 UX \uc758 \ub05d\ud310\uc655<\/h2>\n\n<p>\uc774 \ub450 \ud30c\uc77c\uc774 App Router \uac00 \uc61b Pages Router \ubcf4\ub2e4 \uc88b\uc740 \uacb0\uc815\uc801 \uc774\uc720.<\/p>\n\n<h3>loading.tsx \u2014 \ub370\uc774\ud130 \uae30\ub2e4\ub9ac\ub294 \ud654\uba74<\/h3>\n\n<p><code>app\/blog\/loading.tsx<\/code> \ub97c \ub9cc\ub4e4\uace0 \uc2a4\ud53c\ub108 \ucef4\ud3ec\ub10c\ud2b8\ub97c \ub450\uba74, <code>app\/blog\/page.tsx<\/code> \uac00 \ub370\uc774\ud130\ub97c \ubc1b\ub294 \ub3d9\uc548 \uc790\ub3d9\uc73c\ub85c \uadf8 \uc2a4\ud53c\ub108\uac00 \ud654\uba74\uc5d0 \ub72c\ub2e4. \ubcc4\ub3c4 <code>useState<\/code> \uc548 \uc368\ub3c4 \ub41c\ub2e4 \u2014 Next \uac00 \uc54c\uc544\uc11c Suspense \ub85c \uac10\uc2f8 \uc900\ub2e4.<\/p>\n\n<div class=\"code-block\">\/\/ app\/blog\/loading.tsx\nexport default function Loading() {\n  return &lt;p&gt;\ube14\ub85c\uadf8 \uae00\uc744 \ubd88\ub7ec\uc624\ub294 \uc911\u2026&lt;\/p&gt;;\n}<\/div>\n\n<h3>error.tsx \u2014 \ub9dd\uac00\uc84c\uc744 \ub54c \uc548\uc804\ub9dd<\/h3>\n\n<p>\ud398\uc774\uc9c0 \uc548\uc5d0\uc11c \uc608\uc678\uac00 \ub358\uc838\uc84c\uc744 \ub54c \ud654\uba74\uc774 \ud1b5\uc9f8\ub85c \uae68\uc9c0\uc9c0 \uc54a\uac8c \ub9c9\uc544\uc900\ub2e4. \uc0ac\uc6a9\uc790\uc5d0\uac90 \uce5c\uc808\ud55c \uba54\uc2dc\uc9c0 + &#8220;\ub2e4\uc2dc \uc2dc\ub3c4&#8221; \ubc84\ud2bc\uc774 \ub728\uace0, \ub2e4\ub978 \ud398\uc774\uc9c0\ub85c \uc774\ub3d9\uc740 \uac00\ub2a5\ud558\ub2e4.<\/p>\n\n<div class=\"code-block\">\/\/ app\/blog\/error.tsx\n&#8216;use client&#8217;;\nexport default function Error({\n  error, reset,\n}: { error: Error; reset: () => void }) {\n  return (\n    &lt;div&gt;\n      &lt;p&gt;\ubb54\uac00 \uc798\ubabb\ub410\uc5b4\uc694: {error.message}&lt;\/p&gt;\n      &lt;button onClick={() =&gt; reset()}&gt;\ub2e4\uc2dc \uc2dc\ub3c4&lt;\/button&gt;\n    &lt;\/div&gt;\n  );\n}<\/div>\n\n<p><code>error.tsx<\/code> \ub294 \ubc18\ub4dc\uc2dc <code>'use client'<\/code> \uac00 \ud544\uc694\ud558\ub2e4 (\ubc84\ud2bc\uc774 \ud074\ub77c\uc774\uc5b8\ud2b8\uc5d0\uc11c \ub3d9\uc791\ud574\uc57c \ud558\ub2c8\uae4c). 11\ud3b8\uc5d0\uc11c \ub354 \uae4a\uac8c \ub2e4\ub8ec\ub2e4.<\/p>\n\n<h2>5. \ub77c\uc6b0\ud2b8 \uadf8\ub8f9\uacfc \ub3d9\uc801 \uc138\uadf8\uba3c\ud2b8 \u2014 \ud3f4\ub354 \uc774\ub984\uc758 \ud2b8\ub9ad<\/h2>\n\n<p>\ud3f4\ub354 \uc774\ub984\uc5d0 \uad04\ud638\ub97c \ub123\uc5b4 \ub77c\uc6b0\ud305\uc744 \ucee8\ud2b8\ub864\ud55c\ub2e4.<\/p>\n\n<div class=\"tablewrap\">\n<table>\n<thead><tr><th>\ud3f4\ub354 \ud328\ud134<\/th><th>\uc758\ubbf8<\/th><th>\uc608<\/th><\/tr><\/thead>\n<tbody>\n<tr><td><code>(marketing)<\/code><\/td><td data-label=\"\uc758\ubbf8\">\ub77c\uc6b0\ud2b8 \uadf8\ub8f9 \u2014 URL \uc5d0 \uc601\ud5a5 X, \ud3f4\ub354\ub9cc \ubb36\uc74c<\/td><td data-label=\"\uc608\"><code>app\/(marketing)\/about\/page.tsx<\/code> \u2192 <code>\/about<\/code><\/td><\/tr>\n<tr><td><code>[slug]<\/code><\/td><td data-label=\"\uc758\ubbf8\">\ub3d9\uc801 \uc138\uadf8\uba3c\ud2b8 \u2014 \ud55c \ub2e8\uc5b4 \ubcc0\uc218<\/td><td data-label=\"\uc608\"><code>app\/blog\/[slug]\/page.tsx<\/code> \u2192 <code>\/blog\/hello<\/code><\/td><\/tr>\n<tr><td><code>[...slug]<\/code><\/td><td data-label=\"\uc758\ubbf8\">catch-all \u2014 \ub098\uba38\uc9c0 \uacbd\ub85c \ud1b5\uc9f8\ub85c<\/td><td data-label=\"\uc608\"><code>\/docs\/a\/b\/c<\/code> \uac19\uc740 \uac70 \ub2e4 \ubc1b\uc74c<\/td><\/tr>\n<tr><td><code>_private<\/code><\/td><td data-label=\"\uc758\ubbf8\">\uc5b8\ub354\uc2a4\ucf54\uc5b4 \uc2dc\uc791 \u2014 \ub77c\uc6b0\ud305 \uc81c\uc678 (\ud5ec\ud37c\u00b7\uc720\ud2f8 \ubcf4\uad00\uc6a9)<\/td><td data-label=\"\uc608\"><code>app\/_components\/Button.tsx<\/code><\/td><\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n\n<p>5\ud3b8\uc5d0\uc11c \ub3d9\uc801 \ub77c\uc6b0\ud305\uc744 \uae4a\uac8c \ub2e4\ub8e8\ub2c8\uae4c \uc5ec\uae30\uc120 &#8220;\uc774\ub7f0 \uac8c \uc788\ub2e4&#8221; \uc815\ub3c4\ub9cc \ubcf4\uace0 \ub118\uc5b4\uac00\uc790.<\/p>\n\n<h3>\uc694\uc57d \u2014 3\ud3b8 \uc88c\ud45c<\/h3>\n\n<p>App Router \uc758 \ub8f0 \ub450 \uc904 \u2014 <strong>\ud3f4\ub354\uac00 \uace7 URL, \ud30c\uc77c \uc774\ub984\uc774 \uace7 \uc5ed\ud560<\/strong>. \uc678\uc6cc\uc57c \ud560 \ud2b9\uc218 \ud30c\uc77c\uc740 7\uac1c(<code>page<\/code>\u00b7<code>layout<\/code>\u00b7<code>loading<\/code>\u00b7<code>error<\/code>\u00b7<code>not-found<\/code>\u00b7<code>template<\/code>\u00b7<code>route<\/code>), \uadf8\uc911 \uc77c\uc0c1\uc5d0\uc11c \uc790\uc8fc \ub9cc\uc9c0\ub294 \uac74 <code>page<\/code> + <code>layout<\/code> + <code>loading<\/code> + <code>error<\/code> 4\uac1c. \ud3f4\ub354 \uc774\ub984\uc5d0 \uad04\ud638\u00b7\ub300\uad04\ud638\ub97c \uc4f0\uba74 \uadf8\ub8f9\u00b7\ub3d9\uc801 \uc138\uadf8\uba3c\ud2b8\uac00 \ub41c\ub2e4. \ub2e4\uc74c \ud3b8\uc5d0\uc120 <code>page.tsx<\/code>\u00b7<code>layout.tsx<\/code> \ub97c \uc9c1\uc811 \uc5ec\ub7ec \uac1c \ub9cc\ub4e4\uc5b4 \uc0ac\uc774\ud2b8 \uace8\uaca9\uc744 \uc7a1\ub294\ub2e4.<\/p>\n\n<div class=\"cta\">\n<h3>\ub2e4\uc74c \ud3b8 \uc608\uace0 \u2014 \ud398\uc774\uc9c0\uc640 \ub808\uc774\uc544\uc6c3 \uc791\uc131\ud558\uae30<\/h3>\n<p><code>page.tsx<\/code>\u00b7<code>layout.tsx<\/code> \ub97c \uc190\uc73c\ub85c \ub9cc\ub4e4\uba70 \uc0ac\uc774\ud2b8 \uace8\uaca9\uc744 \uc7a1\ub294\ub2e4. 4\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-create-next-app-2\/\">Ch.2 create-next-app<\/a>\n<\/div>\n\n<\/article>\n<\/div>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>app\/ \ub514\ub809\ud1a0\ub9ac \ud2b9\uc218 \ud30c\uc77c \uc815\ub9ac. layout\u00b7page\u00b7loading\u00b7error\u00b7not-found \uc758\ubbf8. \ud3f4\ub354\uac00 \uace7 \ub77c\uc6b0\ud2b8. \uad50\uc7ac 3\ud3b8.<\/p>\n","protected":false},"author":1,"featured_media":817,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[23],"tags":[],"class_list":["post-871","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\/871","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=871"}],"version-history":[{"count":1,"href":"https:\/\/junai.ai\/blog\/wp-json\/wp\/v2\/posts\/871\/revisions"}],"predecessor-version":[{"id":921,"href":"https:\/\/junai.ai\/blog\/wp-json\/wp\/v2\/posts\/871\/revisions\/921"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/junai.ai\/blog\/wp-json\/wp\/v2\/media\/817"}],"wp:attachment":[{"href":"https:\/\/junai.ai\/blog\/wp-json\/wp\/v2\/media?parent=871"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/junai.ai\/blog\/wp-json\/wp\/v2\/categories?post=871"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/junai.ai\/blog\/wp-json\/wp\/v2\/tags?post=871"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}