{"id":873,"date":"2026-05-20T09:51:01","date_gmt":"2026-05-20T01:51:01","guid":{"rendered":"https:\/\/junai.ai\/blog\/nextjs-pages-layouts-4\/"},"modified":"2026-05-20T09:51:01","modified_gmt":"2026-05-20T01:51:01","slug":"nextjs-pages-layouts-4","status":"publish","type":"post","link":"https:\/\/junai.ai\/blog\/nextjs-pages-layouts-4\/","title":{"rendered":"\ud398\uc774\uc9c0\uc640 \ub808\uc774\uc544\uc6c3 \u2014 page.tsx\u00b7layout.tsx \uc791\uc131\ud558\uae30"},"content":{"rendered":"\n<!-- WordPress REST API \ubc1c\ud589\uc6a9 HTML (\uc790\ub3d9 \uc0dd\uc131) -->\n<!-- WP-FEATURED-MEDIA-ID: 819 -->\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 4\ud3b8 \u00b7 \ud398\uc774\uc9c0\uc640 \ub808\uc774\uc544\uc6c3<\/span>\n  <h1>\ud398\uc774\uc9c0\uc640 \ub808\uc774\uc544\uc6c3 \u2014 page.tsx\u00b7layout.tsx \uc791\uc131\ud558\uae30<\/h1>\n  <p>\uc9c1\uc811 \ub9cc\ub4e4\uba70 \uc0ac\uc774\ud2b8 \uace8\uaca9\uc744 \uc7a1\ub294\ub2e4. \uc911\ucca9 \ub808\uc774\uc544\uc6c3\uacfc children \uc758 \uc815\ud655\ud55c \uc758\ubbf8\uae4c\uc9c0.<\/p>\n  <img decoding=\"async\" src=\"https:\/\/junai.ai\/blog\/wp-content\/uploads\/2026\/05\/hero-5-52.jpg\" alt=\"\uc911\ucca9\ub41c \ub808\uc774\uc544\uc6c3\uc774 \ud398\uc774\uc9c0\ub97c \uac10\uc2f8\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>3\ud3b8\uc5d0\uc11c App Router \uc758 \ud2b9\uc218 \ud30c\uc77c 7\uac00\uc9c0\ub97c \uc815\ub9ac\ud588\ub2e4. \uadf8\uc911 \uc77c\uc0c1 99% \ub97c \ucc28\uc9c0\ud558\ub294 \ub450 \ud30c\uc77c \u2014 <strong><code>page.tsx<\/code><\/strong> \uc640 <strong><code>layout.tsx<\/code><\/strong> \u2014 \ub97c \uc190\uc73c\ub85c \uc9c1\uc811 \ub9cc\ub4e4\uba70 \uc0ac\uc774\ud2b8 \uace8\uaca9\uc744 \uc7a1\uc544\ubcf8\ub2e4.<\/p>\n\n<p>\uc774 \ub450 \ud30c\uc77c\uc758 \uad00\uacc4\ub294 \ub2e8\uc21c\ud558\ub2e4 \u2014 <strong>layout \uc774 page \ub97c \uac10\uc2fc\ub2e4<\/strong>. \uadf8\ub9ac\uace0 layout \uc740 \ub610 \ub2e4\ub978 layout \uc73c\ub85c \uac10\uc2f8\uc9c8 \uc218 \uc788\ub2e4. \uc591\ud30c \uad6c\uc870. \uc774\ubc88 \ud3b8\uc5d0\uc11c \uadf8 \uc591\ud30c\ub97c \ud55c \uacb9\uc529 \uae4c\ubcf8\ub2e4.<\/p>\n\n<h2>1. page.tsx \u2014 \uadf8 URL \uc758 \ubcf8\ubb38<\/h2>\n\n<p>\uac00\uc7a5 \ub2e8\uc21c\ud55c \ud398\uc774\uc9c0\ubd80\ud130. <code>app\/page.tsx<\/code> \ub294 \ub8e8\ud2b8 <code>\/<\/code> URL \uc758 \ubcf8\ubb38\uc774 \ub41c\ub2e4.<\/p>\n\n<div class=\"code-block\">\/\/ app\/page.tsx\nexport default function HomePage() {\n  return (\n    &lt;main&gt;\n      &lt;h1&gt;\uc548\ub155, \ub0b4 \uc0ac\uc774\ud2b8&lt;\/h1&gt;\n      &lt;p&gt;\uc5ec\uae30\ub294 \ud648 \ud398\uc774\uc9c0\uc785\ub2c8\ub2e4.&lt;\/p&gt;\n    &lt;\/main&gt;\n  );\n}<\/div>\n\n<p>\uaddc\uce59 3\uac00\uc9c0\uba74 \ub05d.<\/p>\n\n<ul>\n<li><strong><code>export default<\/code><\/strong> \uac00 \ubc18\ub4dc\uc2dc \uc788\uc5b4\uc57c \ud55c\ub2e4. \ud568\uc218 \uc774\ub984\uc740 \uc790\uc720.<\/li>\n<li>\ubc18\ud658\uc740 <strong>JSX<\/strong> (=React \ucef4\ud3ec\ub10c\ud2b8). HTML \uac19\uc9c0\ub9cc \uc790\ubc14\uc2a4\ud06c\ub9bd\ud2b8.<\/li>\n<li>\ud30c\uc77c \uc704\uce58(<code>app\/page.tsx<\/code>) \uac00 \uace7 URL(<code>\/<\/code>) \uc774\ub2e4.<\/li>\n<\/ul>\n\n<p>\uc0c8 \ud398\uc774\uc9c0\ub97c \ub9cc\ub4e4\uace0 \uc2f6\uc73c\uba74 \ud3f4\ub354\ub9cc \ucd94\uac00. <code>app\/about\/page.tsx<\/code> \ub9cc\ub4e4\uba74 <code>\/about<\/code> \uc989\uc2dc \uc0dd\uae34\ub2e4 \u2014 \ub77c\uc6b0\ud130\uc5d0 \ub4f1\ub85d\ud558\ub294 \ucf54\ub4dc \ub530\uc704 \uc5c6\ub2e4.<\/p>\n\n<div class=\"databox\">\n<strong>\uc65c page.tsx \ub9cc \ub77c\uc6b0\ud2b8?<\/strong> \u2014 App Router \ub294 <code>page<\/code> \u00b7 <code>layout<\/code> \u00b7 <code>loading<\/code> \uac19\uc740 <strong>\uc608\uc57d \uc774\ub984<\/strong>\ub9cc \ub77c\uc6b0\ud305\uc5d0 \uc0ac\uc6a9\ud55c\ub2e4. \uadf8\ub798\uc11c \uac19\uc740 \ud3f4\ub354\uc5d0 <code>Button.tsx<\/code>\u00b7<code>utils.ts<\/code> \ub97c \ub450\uc5b4\ub3c4 \ub77c\uc6b0\ud2b8\uac00 \uc0dd\uae30\uc9c0 \uc54a\ub294\ub2e4. \ucef4\ud3ec\ub10c\ud2b8\u00b7\uc720\ud2f8\uc774 \ub77c\uc6b0\ud2b8 \ud3f4\ub354 \uc606\uc5d0 \uac19\uc774 \uc788\uc5b4\ub3c4 \uc548\uc804\ud55c \uc774\uc720.\n<\/div>\n\n<h2>2. layout.tsx \u2014 children \uc744 \uac10\uc2f8\ub294 \uc637<\/h2>\n\n<p>\ub808\uc774\uc544\uc6c3\uc758 \ud575\uc2ec\uc740 <strong><code>{children}<\/code><\/strong>. \uc790\uc2dd \ud398\uc774\uc9c0\uac00 \ub4e4\uc5b4\uc62c \uc790\ub9ac.<\/p>\n\n<div class=\"code-block\">\/\/ app\/layout.tsx  (\ub8e8\ud2b8 \ub808\uc774\uc544\uc6c3, \ud544\uc218)\nimport &#8216;.\/globals.css&#8217;;\n\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;\n          &lt;nav&gt;\n            &lt;a href=&#8221;\/&#8221;&gt;\ud648&lt;\/a&gt; \u00b7 &lt;a href=&#8221;\/about&#8221;&gt;\uc18c\uac1c&lt;\/a&gt;\n          &lt;\/nav&gt;\n        &lt;\/header&gt;\n        &lt;main&gt;{children}&lt;\/main&gt;\n        &lt;footer&gt;\u00a9 2026 My Site&lt;\/footer&gt;\n      &lt;\/body&gt;\n    &lt;\/html&gt;\n  );\n}<\/div>\n\n<p>\uc774 layout \uc774 \ud55c \ubc88 \uc801\uc6a9\ub418\uba74 \u2014 <code>\/<\/code>, <code>\/about<\/code>, <code>\/blog\/hello<\/code> \uc5b4\ub514\ub85c \uac00\ub3c4 <strong>\uac19\uc740 \ud5e4\ub354\uc640 \ud478\ud130<\/strong>\uac00 \uadf8\ub300\ub85c \ubcf4\uc778\ub2e4. \ud5e4\ub354\ub9cc \uc801\uc5b4\ub450\uba74 100\uac1c \ud398\uc774\uc9c0\uac00 \uc790\ub3d9 \uacf5\uc720.<\/p>\n\n<p>\uc8fc\uc758 \u2014 \ub8e8\ud2b8 layout \uc740 <strong>\ubc18\ub4dc\uc2dc <code>&lt;html&gt;<\/code> \uacfc <code>&lt;body&gt;<\/code> \ud0dc\uadf8<\/strong>\ub97c \ud3ec\ud568\ud574\uc57c \ud55c\ub2e4. \ub2e4\ub978 layout \uc740 \uadf8\ub0e5 <code>&lt;div&gt;<\/code> \ub85c \uac10\uc2f8\ub3c4 \ub41c\ub2e4. \ub8e8\ud2b8\ub9cc \ud2b9\ubcc4.<\/p>\n\n<h2>3. \uc911\ucca9 \ub808\uc774\uc544\uc6c3 \u2014 \ud3f4\ub354 \ub2e8\uc704\ub85c layout \uc801\uc6a9<\/h2>\n\n<p>\uc774 \uac8c \uc9c4\uc9dc \uac15\ub825\ud55c \ubd80\ubd84. <code>app\/blog\/layout.tsx<\/code> \ub97c \ub9cc\ub4e4\uba74 <code>\/blog\/*<\/code> \ud398\uc774\uc9c0\ub4e4\ub9cc \uadf8 layout \uc73c\ub85c \uac10\uc2fc\ub2e4.<\/p>\n\n<div class=\"code-block\">\/\/ app\/blog\/layout.tsx\nexport default function BlogLayout({\n  children,\n}: {\n  children: React.ReactNode;\n}) {\n  return (\n    &lt;div className=&#8221;blog-wrap&#8221;&gt;\n      &lt;aside&gt;\n        &lt;h3&gt;\ube14\ub85c\uadf8 \uba54\ub274&lt;\/h3&gt;\n        &lt;ul&gt;\n          &lt;li&gt;&lt;a href=&#8221;\/blog&#8221;&gt;\ucd5c\uc2e0&lt;\/a&gt;&lt;\/li&gt;\n          &lt;li&gt;&lt;a href=&#8221;\/blog\/tags&#8221;&gt;\ud0dc\uadf8&lt;\/a&gt;&lt;\/li&gt;\n        &lt;\/ul&gt;\n      &lt;\/aside&gt;\n      &lt;section&gt;{children}&lt;\/section&gt;\n    &lt;\/div&gt;\n  );\n}<\/div>\n\n<p>\uc774\uc81c <code>\/blog\/hello<\/code> \ub97c \uc5f4\uba74 \u2014 <strong>\ub8e8\ud2b8 layout (\ud5e4\ub354\u00b7\ud478\ud130) \u2192 \ube14\ub85c\uadf8 layout (\uc0ac\uc774\ub4dc\ubc14) \u2192 page (\uae00 \ubcf8\ubb38)<\/strong> \uc758 3\uacb9 \uc591\ud30c. <code>\/about<\/code> \uc740 \ube14\ub85c\uadf8 layout \uc744 \uac70\uce58\uc9c0 \uc54a\uc73c\ub2c8 \uc0ac\uc774\ub4dc\ubc14 \uc5c6\uc74c.<\/p>\n\n<div class=\"tablewrap\">\n<table>\n<thead><tr><th>URL<\/th><th>\uac70\uce58\ub294 \ub808\uc774\uc544\uc6c3<\/th><th>\uacb0\uacfc<\/th><\/tr><\/thead>\n<tbody>\n<tr><td><code>\/<\/code><\/td><td data-label=\"\ub808\uc774\uc544\uc6c3\">root<\/td><td data-label=\"\uacb0\uacfc\">\ud5e4\ub354 + \ud648 + \ud478\ud130<\/td><\/tr>\n<tr><td><code>\/about<\/code><\/td><td data-label=\"\ub808\uc774\uc544\uc6c3\">root<\/td><td data-label=\"\uacb0\uacfc\">\ud5e4\ub354 + \uc18c\uac1c + \ud478\ud130<\/td><\/tr>\n<tr><td><code>\/blog\/hello<\/code><\/td><td data-label=\"\ub808\uc774\uc544\uc6c3\">root \u2192 blog<\/td><td data-label=\"\uacb0\uacfc\">\ud5e4\ub354 + \uc0ac\uc774\ub4dc\ubc14 + \uae00 + \ud478\ud130<\/td><\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n\n<p>\uc911\ucca9\uc740 \uae4a\uc774 \uc81c\ud55c \uc5c6\uc9c0\ub9cc \ubcf4\ud1b5 2~3 \ub2e8\uacc4\uae4c\uc9c0.<\/p>\n\n<h2>4. \uba54\ud0c0\ub370\uc774\ud130 \u2014 layout \ub610\ub294 page \uc5d0\uc11c export<\/h2>\n\n<p>SEO \uc758 \ud575\uc2ec\uc778 <code>&lt;title&gt;<\/code>\u00b7<code>&lt;meta&gt;<\/code> \ub97c \uc5b4\ub5bb\uac8c \ub123\ub098? <code>&lt;head&gt;<\/code> \ub97c \uc9c1\uc811 \ub9cc\uc9c0\uc9c0 \uc54a\uace0 <strong><code>metadata<\/code> \uac1d\uccb4\ub97c export<\/strong> \ud55c\ub2e4.<\/p>\n\n<div class=\"code-block\">\/\/ app\/about\/page.tsx\nimport type { Metadata } from &#8216;next&#8217;;\n\nexport const metadata: Metadata = {\n  title: &#8216;\uc18c\uac1c | \ub0b4 \uc0ac\uc774\ud2b8&#8217;,\n  description: &#8216;\uc800\ub294 \ub204\uad6c\uc774\uba70 \uc774 \uc0ac\uc774\ud2b8\ub294 \ubb34\uc5c7\uc744 \ud558\ub294\uc9c0.&#8217;,\n};\n\nexport default function AboutPage() {\n  return &lt;main&gt;\u2026&lt;\/main&gt;;\n}<\/div>\n\n<p>Next.js \uac00 \ube4c\ub4dc \ud0c0\uc784\uc5d0 \uc774 \uac1d\uccb4\ub97c \uc77d\uc5b4 <code>&lt;head&gt;<\/code> \uc5d0 \uc790\ub3d9 \uc0bd\uc785\ud55c\ub2e4. <code>page.tsx<\/code> \uc5d0\uc11c export \ud558\uba74 \uadf8 \ud398\uc774\uc9c0\ub9cc, <code>layout.tsx<\/code> \uc5d0\uc11c export \ud558\uba74 \uadf8 layout \uc758 \ubaa8\ub4e0 \uc790\uc2dd \ud398\uc774\uc9c0\uac00 \uae30\ubcf8\uac12\uc744 \uc0c1\uc18d\ud55c\ub2e4. \ud398\uc774\uc9c0\ubcc4 override \uac00\ub2a5.<\/p>\n\n<p>7\ud3b8 (Metadata API) \uc5d0\uc11c OG \uc774\ubbf8\uc9c0\u00b7\uad6c\uc870\ud654 \ub370\uc774\ud130\uae4c\uc9c0 \uae4a\uc774 \ub2e4\ub8ec\ub2e4. \uc774\ubc88 \ud3b8\uc740 &#8220;\uc774\ub807\uac8c \ub123\ub294\ub2e4&#8221; \uc815\ub3c4\ub9cc.<\/p>\n\n<div class=\"warnbox\">\n<strong>\ud754\ud55c \ud568\uc815<\/strong> \u2014 <code>metadata<\/code> \ub294 <strong>\uc11c\ubc84 \ucef4\ud3ec\ub10c\ud2b8\uc5d0\uc11c\ub9cc<\/strong> export \uac00\ub2a5. <code>'use client'<\/code> \ubd99\uc740 \ud30c\uc77c\uc5d0\uc11c export \ud558\uba74 \ubb34\uc2dc\ub418\uac70\ub098 \uc5d0\ub7ec. \ud074\ub77c\uc774\uc5b8\ud2b8 \ucef4\ud3ec\ub10c\ud2b8\uc5d0\uc11c title \uc744 \ubc14\uafb8\ub824\uba74 <code>document.title<\/code> \uc9c1\uc811 \uc218\uc815 \ub610\ub294 <code>generateMetadata<\/code> \ud568\uc218 \uc0ac\uc6a9.\n<\/div>\n\n<h2>5. \uc2e4\ud589 \ud750\ub984 \u2014 \uc694\uccad\uc774 \ub4e4\uc5b4\uc624\uba74 \ubb34\uc2a8 \uc77c\uc774<\/h2>\n\n<p>\uc0ac\uc6a9\uc790\uac00 <code>\/blog\/hello<\/code> \ub97c \ub204\ub974\uba74 \uc11c\ubc84\uc5d0\uc11c \uc77c\uc5b4\ub098\ub294 \uc77c.<\/p>\n\n<ol>\n<li>\ub77c\uc6b0\ud130\uac00 \ud3f4\ub354 \ub9e4\uce6d \u2192 <code>app\/blog\/[slug]\/page.tsx<\/code> \ucc3e\uc74c.<\/li>\n<li>\uc704\ub85c \uc62c\ub77c\uac00\uba70 layout \uc218\uc9d1 \u2192 blog \u2192 root.<\/li>\n<li>\uc548\uc5d0\uc11c \ubc14\uae65 \uc21c\uc11c\ub85c \ud2b8\ub9ac \uc870\ub9bd \u2192 page \u2192 blog \u2192 root.<\/li>\n<li>\uac01 \ucef4\ud3ec\ub10c\ud2b8\ub97c \uc11c\ubc84\uc5d0\uc11c \uc2e4\ud589, HTML \ubb38\uc790\uc5f4\ub85c \uc9c1\ub82c\ud654.<\/li>\n<li>\ube0c\ub77c\uc6b0\uc800\ub294 HTML \uc989\uc2dc \uadf8\ub9ac\uace0 \uc778\ud130\ub799\ud2f0\ube0c \ubd80\ubd84\ub9cc hydrate.<\/li>\n<\/ol>\n\n<p>\uac1c\ubc1c\uc790\ub294 <code>page.tsx<\/code>\u00b7<code>layout.tsx<\/code> \ub9cc \uc801\uc73c\uba74 \ub41c\ub2e4. \uc774 \ub2e8\uc21c\ud568\uc774 App Router \uc758 \uc815\uccb4.<\/p>\n\n<h3>\uc694\uc57d \u2014 4\ud3b8 \uc88c\ud45c<\/h3>\n\n<p>\uc5ec\uae30\uae4c\uc9c0 \uc815\ub9ac. <code>page.tsx<\/code> \ub294 \uadf8 URL \uc758 \ubcf8\ubb38, <code>layout.tsx<\/code> \ub294 \uc790\uc2dd\uc744 \uac10\uc2f8\ub294 \uc637. \ub458 \ub2e4 <strong>default export<\/strong> \uac00 \ud575\uc2ec. \ub8e8\ud2b8 layout \uc740 <code>&lt;html&gt;<\/code>\u00b7<code>&lt;body&gt;<\/code> \ud544\uc218, \ub2e4\ub978 layout \uc740 \uc790\uc720. <strong>\uc911\ucca9<\/strong>\uc73c\ub85c \ud3f4\ub354 \ub2e8\uc704 \uacf5\ud1b5 UI \uac00\ub2a5 \u2014 <code>\/blog\/*<\/code> \ub9cc \uc0ac\uc774\ub4dc\ubc14 \uac19\uc740 \uc2dd. SEO \uba54\ud0c0\ub370\uc774\ud130\ub294 <code>export const metadata<\/code> \ud55c \uc904. \ub2e4\uc74c \ud3b8\uc5d0\uc11c \ud3f4\ub354 \uc774\ub984 <code>[slug]<\/code> \ub85c <strong>\ub3d9\uc801 \ub77c\uc6b0\ud305<\/strong>\uc744 \ubcf8\ub2e4.<\/p>\n\n<div class=\"cta\">\n<h3>\ub2e4\uc74c \ud3b8 \uc608\uace0 \u2014 \ub3d9\uc801\u00b7\uc911\ucca9 \ub77c\uc6b0\ud305<\/h3>\n<p><code>[slug]<\/code>\u00b7<code>(group)<\/code>\u00b7<code>[...all]<\/code> \ud3f4\ub354 \uc774\ub984 \ud2b8\ub9ad \uc644\uc804 \uc815\ub9ac. 5\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-app-router-structure-3\/\">Ch.3 \ud3f4\ub354 \uad6c\uc870<\/a>\n<\/div>\n\n<\/article>\n<\/div>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>page.tsx \uc640 layout.tsx \ub97c \uc9c1\uc811 \uc190\uc73c\ub85c \ub9cc\ub4e4\uba70 \uc0ac\uc774\ud2b8 \uace8\uaca9 \uc7a1\uae30. \uc911\ucca9 \ub808\uc774\uc544\uc6c3\u00b7children\u00b7\uba54\ud0c0\ub370\uc774\ud130\u00b7\uc2e4\ud589 \ud750\ub984\uae4c\uc9c0. \uad50\uc7ac 4\ud3b8.<\/p>\n","protected":false},"author":1,"featured_media":819,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[23],"tags":[],"class_list":["post-873","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\/873","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=873"}],"version-history":[{"count":0,"href":"https:\/\/junai.ai\/blog\/wp-json\/wp\/v2\/posts\/873\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/junai.ai\/blog\/wp-json\/wp\/v2\/media\/819"}],"wp:attachment":[{"href":"https:\/\/junai.ai\/blog\/wp-json\/wp\/v2\/media?parent=873"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/junai.ai\/blog\/wp-json\/wp\/v2\/categories?post=873"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/junai.ai\/blog\/wp-json\/wp\/v2\/tags?post=873"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}