{"id":869,"date":"2026-05-20T09:50:45","date_gmt":"2026-05-20T01:50:45","guid":{"rendered":"https:\/\/junai.ai\/blog\/nextjs-create-next-app-2\/"},"modified":"2026-05-20T09:56:31","modified_gmt":"2026-05-20T01:56:31","slug":"nextjs-create-next-app-2","status":"publish","type":"post","link":"https:\/\/junai.ai\/blog\/nextjs-create-next-app-2\/","title":{"rendered":"create-next-app \uc73c\ub85c \uccab Next.js \ud504\ub85c\uc81d\ud2b8 \uc2dc\uc791\ud558\uae30"},"content":{"rendered":"\n<!-- WordPress REST API \ubc1c\ud589\uc6a9 HTML (\uc790\ub3d9 \uc0dd\uc131) -->\n<!-- WP-FEATURED-MEDIA-ID: 815 -->\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 2\ud3b8 \u00b7 \ud504\ub85c\uc81d\ud2b8 \uc2dc\uc791<\/span>\n  <h1>create-next-app \uc73c\ub85c \uccab Next.js \ud504\ub85c\uc81d\ud2b8 \uc2dc\uc791\ud558\uae30<\/h1>\n  <p>\uba85\ub839 \ud55c \uc904\uc774\uba74 \ub05d. \uc635\uc158 7\uac1c\uc758 \uc758\ubbf8\ub97c \uc54c\uace0 \uace0\ub974\uc790.<\/p>\n  <img decoding=\"async\" src=\"https:\/\/junai.ai\/blog\/wp-content\/uploads\/2026\/05\/hero-5-48.jpg\" alt=\"\ud130\ubbf8\ub110\uc5d0\uc11c create-next-app \uc73c\ub85c \uc0c8 \ud504\ub85c\uc81d\ud2b8\uac00 \uc0dd\uc131\ub418\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>1\ud3b8\uc5d0\uc11c \ud070 \uadf8\ub9bc\uc744 \uc7a1\uc558\uc73c\ub2c8 \uc774\uc81c \uc2e4\uc81c\ub85c \ub9cc\ub4e4\uc5b4 \ubcf8\ub2e4. Next.js \uacf5\uc2dd \uad8c\uc7a5 \ubc29\ubc95\uc740 \ub2e8 \ud558\ub098 \u2014 <strong><code>create-next-app<\/code><\/strong>. \ub77c\uc774\ube0c\ub7ec\ub9ac\u00b7\uc124\uc815\u00b7\uae30\ubcf8 \ud398\uc774\uc9c0\ub97c \ud55c \ubc88\uc5d0 \uae54\uc544 \uc8fc\ub294 \uacf5\uc2dd \ubd80\ud2b8\uc2a4\ud2b8\ub7a9 \ub3c4\uad6c. \uc61b\ub0a0 \uc2dd\uc758 &#8220;\uc9c1\uc811 webpack \uc124\uc815&#8221; \uac19\uc740 \uac74 \uc78a\uc5b4\ub3c4 \ub41c\ub2e4.<\/p>\n\n<p>\uc774\ubc88 \ud3b8\uc740 \uba85\ub839 \ud55c \uc904\uc744 \uacf1\uc539\ub294\ub2e4. \uc635\uc158\uc774 7\uac1c \uc815\ub3c4 \uc788\ub294\ub370, \uccab \uc785\ubb38\uc790\uac00 \uc544\ubb34\uac70\ub098 \ub204\ub974\uba74 \ub098\uc911\uc5d0 \ud6c4\ud68c\ud55c\ub2e4. \ud55c \ubc88 \uc815\ud574\ub450\uba74 \uc2dc\ub9ac\uc988 \ub0b4\ub0b4 \uac19\uc740 \ud658\uacbd\uc73c\ub85c \uac00\ub2c8\uae4c \uc5ec\uae30\uc11c \ub611\ubc14\ub85c \ubcf4\uace0 \uac00\uc790.<\/p>\n\n<h2>1. \uc0ac\uc804 \uc900\ube44 \u2014 Node.js 18.18 \uc774\uc0c1<\/h2>\n\n<p>Next.js 14\/15 \ub294 <strong>Node.js 18.18 \uc774\uc0c1<\/strong>\uc774 \ud544\uc694\ud558\ub2e4. \uad8c\uc7a5\uc740 LTS \uc778 <strong>20.x<\/strong> \ub610\ub294 <strong>22.x<\/strong>. \ud130\ubbf8\ub110\uc5d0\uc11c \ud655\uc778:<\/p>\n\n<div class=\"code-block\">$ node &#8211;version\nv22.10.0\n$ npm &#8211;version\n10.9.0<\/div>\n\n<p>\ubc84\uc804\uc774 \ub0ae\uc73c\uba74 \uc124\uce58\ubd80\ud130. \ub9e5\u00b7\ub9ac\ub205\uc2a4\ub294 <code>nvm<\/code>, \uc708\ub3c4\uc6b0\ub294 <code>nvm-windows<\/code> \uac00 \ud45c\uc900. Node.js \uc2dc\ub9ac\uc988 2\ud3b8\uc5d0\uc11c \ub2e4\ub8e8\ub294 \ub0b4\uc6a9\uc774\ub77c \uc5ec\uae30\uc120 \uc790\uc138\ud788 \uc548 \ub2e4\ub8ec\ub2e4.<\/p>\n\n<div class=\"databox\">\n<strong>\ud328\ud0a4\uc9c0 \ub9e4\ub2c8\uc800<\/strong> \u2014 npm\u00b7yarn\u00b7pnpm\u00b7bun \uc911 \ubb34\uc5c7\uc744 \uc368\ub3c4 \ub41c\ub2e4. \uc774 \uad50\uc7ac\ub294 <strong>npm<\/strong>(Node \uc640 \uac19\uc774 \uae54\ub9bc)\ub85c \ud1b5\uc77c\ud55c\ub2e4. \ud68c\uc0ac \ub4e4\uc5b4\uac00\uc11c pnpm \uc774\ub098 yarn \uc744 \ub9cc\ub098\ub3c4 \uba85\ub839\uc5b4 \ub450 \ubc88\uc9f8 \ub2e8\uc5b4\ub9cc \ubc14\ub010\ub2e4 (<code>npm install<\/code> \u2194 <code>pnpm install<\/code>).\n<\/div>\n\n<h2>2. \uba85\ub839 \ud55c \uc904 \u2014 \uc635\uc158 7\uac1c\uc758 \uc758\ubbf8<\/h2>\n\n<p>\uc900\ube44 \ub410\ub2e4\uba74 \ube48 \ud3f4\ub354\uc5d0\uc11c \uc2e4\ud589:<\/p>\n\n<div class=\"code-block\">$ npx create-next-app@latest my-app<\/div>\n\n<p><code>npx<\/code> \ub294 npm \uc5d0 \uac19\uc774 \uae54\ub824\uc788\ub294 \ub3c4\uad6c\ub85c, &#8220;\ud328\ud0a4\uc9c0\ub97c \uc124\uce58\ud558\uc9c0 \uc54a\uace0 \ud55c \ubc88\ub9cc \uc2e4\ud589&#8221; \uc2dc\ud0a8\ub2e4. <code>@latest<\/code> \ub294 \ud56d\uc0c1 \ucd5c\uc2e0 \ubc84\uc804\uc744 \ubc1b\uae30 \uc704\ud568.<\/p>\n\n<p>\uc2e4\ud589\ud558\uba74 7\uac00\uc9c0 \uc9c8\ubb38\uc774 \ucc28\ub840\ub85c \ub72c\ub2e4. \uccab \uc785\ubb38\uc790 \uae30\uc900 \uad8c\uc7a5 \ub2f5\uc744 \uc815\ub9ac.<\/p>\n\n<div class=\"tablewrap\">\n<table>\n<thead><tr><th>\uc9c8\ubb38<\/th><th>\uad8c\uc7a5<\/th><th>\uc774\uc720<\/th><\/tr><\/thead>\n<tbody>\n<tr><td>TypeScript?<\/td><td data-label=\"\uad8c\uc7a5\">Yes<\/td><td data-label=\"\uc774\uc720\">2026 \ud45c\uc900. \uc785\ubb38\uc774\ub77c\ub3c4 \ucc98\uc74c\ubd80\ud130 \uc775\ud788\ub294 \uac8c \ub0ab\ub2e4.<\/td><\/tr>\n<tr><td>ESLint?<\/td><td data-label=\"\uad8c\uc7a5\">Yes<\/td><td data-label=\"\uc774\uc720\">\ucf54\ub4dc \uac80\uc0ac. \ub044\uba74 \ub098\uc911\uc5d0 \ucf24 \ub54c \ube68\uac04 \uc904 \ud3ed\ubc1c.<\/td><\/tr>\n<tr><td>Tailwind CSS?<\/td><td data-label=\"\uad8c\uc7a5\">Yes<\/td><td data-label=\"\uc774\uc720\">\uc0ac\uc2e4\uc0c1 \ud45c\uc900. \uc548 \uc4f8 \uac70\uba74 No \ub3c4 OK.<\/td><\/tr>\n<tr><td>src\/ \ub514\ub809\ud1a0\ub9ac?<\/td><td data-label=\"\uad8c\uc7a5\">No<\/td><td data-label=\"\uc774\uc720\">\uad50\uc7ac\ub294 \uacf5\uc2dd \uae30\ubcf8\uc778 \ub8e8\ud2b8 app\/ \uc73c\ub85c \uac04\ub2e4.<\/td><\/tr>\n<tr><td>App Router?<\/td><td data-label=\"\uad8c\uc7a5\">Yes<\/td><td data-label=\"\uc774\uc720\">\uc774\uac8c \ud575\uc2ec. No \ub204\ub974\uba74 \uc61b Pages Router.<\/td><\/tr>\n<tr><td>Turbopack?<\/td><td data-label=\"\uad8c\uc7a5\">Yes<\/td><td data-label=\"\uc774\uc720\">15 \ubd80\ud130 \uc548\uc815. dev \uc11c\ubc84\uac00 \ube60\ub974\ub2e4.<\/td><\/tr>\n<tr><td>import alias?<\/td><td data-label=\"\uad8c\uc7a5\">\uae30\ubcf8\uac12 @\/*<\/td><td data-label=\"\uc774\uc720\">\uc5d4\ud130\ub85c \ub118\uc5b4\uac00\uba74 \ub41c\ub2e4.<\/td><\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n\n<p>\uc798\ubabb \uace8\ub790\ub2e4? \uad1c\ucc2e\ub2e4. <code>my-app<\/code> \ud3f4\ub354\ub97c \uc9c0\uc6b0\uace0 \ub2e4\uc2dc \uc2e4\ud589. \uccab 1\uc8fc\ub294 \ub2e4\uc12f \ubc88\ucbe4 \uc9c0\uc6e0\ub2e4 \ub9cc\ub4e4\uc5c8\ub2e4 \ubc18\ubcf5\ud560 \uc218\ub3c4 \uc788\ub2e4. \uc815\uc0c1.<\/p>\n\n<div class=\"warnbox\">\n<strong>App Router \uc9c8\ubb38\uc740 \uc808\ub300 No \ud558\uc9c0 \ub9d0 \uac83<\/strong> \u2014 Pages Router \ub294 \uc774 \uad50\uc7ac 23\ud3b8\uc5d0\uc11c \ub9c8\uc774\uadf8\ub808\uc774\uc158 \uc2dc\uac01\uc73c\ub85c\ub9cc \uc7a0\uae50 \ub2e4\ub8ec\ub2e4. 2026 \uae30\uc900 \uc2e0\uaddc \ud504\ub85c\uc81d\ud2b8\ub294 App Router \uac00 \ud45c\uc900.\n<\/div>\n\n<h2>3. \ub9cc\ub4e4\uc5b4\uc9c4 \ud3f4\ub354 \u2014 \ubb34\uc5c7\uc774 \uc5b4\ub514 \uc788\ub098<\/h2>\n\n<p>\uc124\uce58\uac00 \ub05d\ub098\uba74 <code>my-app\/<\/code> \ud3f4\ub354\uac00 \uc0dd\uae34\ub2e4. \ucc98\uc74c \ubcf4\uba74 \ud30c\uc77c\uc774 \ub9ce\uc544 \ub9c9\ub9c9\ud55c\ub370, \uc2e4\uc81c \uc790\uc8fc \ub9cc\uc9c0\ub294 \uac74 5~6\uac1c\ubfd0.<\/p>\n\n<div class=\"code-block\">my-app\/\n\u251c\u2500\u2500 app\/                    \u2190 \ud398\uc774\uc9c0\u00b7\ub77c\uc6b0\ud305 (\uba54\uc778 \uc791\uc5c5 \uacf5\uac04)\n\u2502   \u251c\u2500\u2500 layout.tsx          \uacf5\ud1b5 \ub808\uc774\uc544\uc6c3 (\uc804 \ud398\uc774\uc9c0 \uac10\uc308)\n\u2502   \u251c\u2500\u2500 page.tsx            \ub8e8\ud2b8 &#8220;\/&#8221; \ud398\uc774\uc9c0\n\u2502   \u251c\u2500\u2500 globals.css         \uc804\uc5ed CSS\n\u2502   \u2514\u2500\u2500 favicon.ico\n\u251c\u2500\u2500 public\/                 \u2190 \uc815\uc801 \ud30c\uc77c (\uc774\ubbf8\uc9c0\u00b7robots.txt)\n\u251c\u2500\u2500 node_modules\/           \u2190 \ub77c\uc774\ube0c\ub7ec\ub9ac (\uac74\ub4dc\ub9ac\uc9c0 \uc54a\uc74c)\n\u251c\u2500\u2500 .next\/                  \u2190 \ube4c\ub4dc \uacb0\uacfc (\uac74\ub4dc\ub9ac\uc9c0 \uc54a\uc74c\u00b7gitignore \ub428)\n\u251c\u2500\u2500 package.json            \uc758\uc874\uc131\u00b7\uc2a4\ud06c\ub9bd\ud2b8 \uc815\uc758\n\u251c\u2500\u2500 tsconfig.json           TS \uc124\uc815\n\u251c\u2500\u2500 next.config.mjs         Next.js \uc124\uc815\n\u251c\u2500\u2500 tailwind.config.ts      Tailwind \uc124\uc815\n\u2514\u2500\u2500 .eslintrc.json          ESLint \uaddc\uce59<\/div>\n\n<p>\ud575\uc2ec\ub9cc \ucd94\ub9ac\uba74:<\/p>\n\n<ul>\n<li><strong><code>app\/<\/code><\/strong> \u2014 \ud398\uc774\uc9c0\uac00 \uc0ac\ub294 \uacf3. 99% \uc758 \uc791\uc5c5\uc774 \uc5ec\uae30\uc11c.<\/li>\n<li><strong><code>public\/<\/code><\/strong> \u2014 \ube4c\ub4dc \uc2dc \uadf8\ub300\ub85c \ubcf5\uc0ac\ub418\ub294 \uc815\uc801 \ud30c\uc77c. \uc774\ubbf8\uc9c0\u00b7favicon\u00b7robots.txt.<\/li>\n<li><strong><code>package.json<\/code><\/strong> \u2014 \uc758\uc874\uc131 \ubaa9\ub85d\uacfc \uba85\ub839\uc5b4(<code>dev<\/code>\u00b7<code>build<\/code>\u00b7<code>start<\/code>) \uc815\uc758.<\/li>\n<li><strong><code>next.config.mjs<\/code><\/strong> \u2014 \ube4c\ub4dc \ub3d9\uc791 \ucee4\uc2a4\ud130\ub9c8\uc774\uc988 (\uc774\ubbf8\uc9c0 \ub3c4\uba54\uc778\u00b7redirect\u00b7\ud658\uacbd\ubcc0\uc218 \ub4f1).<\/li>\n<\/ul>\n\n<p>\ub098\uba38\uc9c0(<code>tsconfig<\/code>\u00b7<code>tailwind.config<\/code>\u00b7<code>.eslintrc<\/code>) \ub294 \ucc98\uc74c\uc5d4 \uc190\ub300\uc9c0 \uc54a\uc544\ub3c4 \ub41c\ub2e4. \uae30\ubcf8\uac12\uc774 \uc798 \uc7a1\ud600 \uc788\ub2e4.<\/p>\n\n<h2>4. dev \uc11c\ubc84 \u2014 \ucf54\ub4dc \uc800\uc7a5\ud558\uba74 \uc989\uc2dc \ubc18\uc601<\/h2>\n\n<p>\ud3f4\ub354\ub85c \uc774\ub3d9\ud574 dev \uc11c\ubc84\ub97c \ub744\uc6b4\ub2e4:<\/p>\n\n<div class=\"code-block\">$ cd my-app\n$ npm run dev\n\n  \u25b2 Next.js 15.0.0\n  &#8211; Local:        http:\/\/localhost:3000\n  &#8211; Environments: .env.local\n\n \u2713 Ready in 1.2s<\/div>\n\n<p>\ube0c\ub77c\uc6b0\uc800\uc5d0\uc11c <code>http:\/\/localhost:3000<\/code> \uc744 \uc5f4\uba74 \ud658\uc601 \ud398\uc774\uc9c0\uac00 \ub72c\ub2e4. \uc774\uac8c <code>app\/page.tsx<\/code> \uac00 \uadf8\ub9b0 \uacb0\uacfc.<\/p>\n\n<p>\uc774\uc81c \uc5d0\ub514\ud130\ub85c <code>app\/page.tsx<\/code> \ub97c \uc5f4\uc5b4 \uc544\ubb34 \uae00\uc790\ub098 \ubc14\uafd4 \uc800\uc7a5\ud574 \ubcf4\uc790. \ube0c\ub77c\uc6b0\uc800\uac00 \uc790\ub3d9\uc73c\ub85c \uc0c8\ub85c\uace0\uce68\ub418\uba74\uc11c \uc989\uc2dc \ubc18\uc601\ub41c\ub2e4. \uc774 \uae30\ub2a5\uc744 <strong>HMR(Hot Module Replacement)<\/strong> \uc774\ub77c\uace0 \ud55c\ub2e4 \u2014 Next.js \uac00 \ucf54\ub4dc \ubcc0\uacbd\uc744 \uac10\uc9c0\ud574 \ubc14\ub010 \ubd80\ubd84\ub9cc \ub2e4\uc2dc \ubcf4\ub0b8\ub2e4.<\/p>\n\n<div class=\"databox\">\n<strong>dev \uc11c\ubc84\ub97c \uaf2d \uaebc\uc57c \ud558\ub294 \uacbd\uc6b0<\/strong> \u2014 <code>package.json<\/code> \uc758\uc874\uc131 \ucd94\uac00\/\uc81c\uac70 \ud6c4 (<code>npm install X<\/code> \ud588\uc744 \ub54c). <code>next.config.mjs<\/code> \uc218\uc815 \ud6c4. \ud658\uacbd\ubcc0\uc218 <code>.env.local<\/code> \uc218\uc815 \ud6c4. \uc774 3\uac00\uc9c0\ub294 Ctrl+C \ub85c \ub044\uace0 \ub2e4\uc2dc <code>npm run dev<\/code>.\n<\/div>\n\n<h2>5. \uccab \uc218\uc815 \u2014 Hello \ud398\uc774\uc9c0 \ub9cc\ub4e4\uae30<\/h2>\n\n<p><code>app\/page.tsx<\/code> \uc758 \ub0b4\uc6a9\uc744 \ud1b5\uc9f8\ub85c \uad50\uccb4:<\/p>\n\n<div class=\"code-block\">export default function HomePage() {\n  return (\n    &lt;main style={{ padding: 40, fontFamily: &#8216;sans-serif&#8217; }}&gt;\n      &lt;h1&gt;\uc548\ub155, Next.js!&lt;\/h1&gt;\n      &lt;p&gt;\uccab \ud504\ub85c\uc81d\ud2b8\uac00 \ub3cc\uc544\uac04\ub2e4. \ub2e4\uc74c \ud3b8\uc5d0\uc11c \ud3f4\ub354 \uad6c\uc870\ub97c \uae4a\uac8c \ubcf8\ub2e4.&lt;\/p&gt;\n    &lt;\/main&gt;\n  );\n}<\/div>\n\n<p>\uc800\uc7a5\ud558\uba74 \uc989\uc2dc \ube0c\ub77c\uc6b0\uc800\uc5d0 \ubc18\uc601\ub41c\ub2e4. <code>export default<\/code> \uac00 \ud398\uc774\uc9c0 \ucef4\ud3ec\ub10c\ud2b8, \ud568\uc218 \uc774\ub984\uc740 \uc790\uc720. \ud30c\uc77c \uc704\uce58(<code>app\/page.tsx<\/code>) \uac00 \uace7 URL(<code>\/<\/code>) \uc774\ub2e4.<\/p>\n\n<p>\uc774 \ud55c \uc904\uc774 1\ud3b8\uc5d0\uc11c \ub9d0\ud55c <strong>&#8220;\ud3f4\ub354 \uad6c\uc870 = \uc0ac\uc774\ud2b8 \uad6c\uc870&#8221;<\/strong> \uc758 \uc2dc\uc791\uc774\ub2e4. \ub2e4\uc74c \ud3b8\uc5d0\uc11c \ud3f4\ub354\ub97c \ub354 \ub9cc\ub4e4\uba74 URL \uc774 \ub354 \uc0dd\uae34\ub2e4.<\/p>\n\n<h3>\uc694\uc57d \u2014 2\ud3b8 \uc88c\ud45c<\/h3>\n\n<p>\uc5ec\uae30\uae4c\uc9c0 \ud575\uc2ec. Node.js 18.18 \uc774\uc0c1 \u2192 <code>npx create-next-app@latest my-app<\/code> \u2192 7\uac00\uc9c0 \uc9c8\ubb38\uc5d0 \uad8c\uc7a5\uac12(TS\u00b7ESLint\u00b7Tailwind\u00b7App Router\u00b7Turbopack \ub2e4 Yes, src\/ \ub294 No)\uc73c\ub85c \ub2f5 \u2192 <code>cd my-app && npm run dev<\/code> \u2192 <code>localhost:3000<\/code> \ud655\uc778 \u2192 <code>app\/page.tsx<\/code> \uc218\uc815\ud574 \uc989\uc2dc \ubc18\uc601 \uacbd\ud5d8. \uc774\uac8c \ubaa8\ub4e0 Next.js \ud504\ub85c\uc81d\ud2b8\uc758 \uc2dc\uc791\uc774\ub2e4. \ub2e4\uc74c \ud3b8\uc5d0\uc11c <strong>App Router \uc758 \ud3f4\ub354 \uad6c\uc870<\/strong>\ub97c \ud55c\ub208\uc5d0 \uc815\ub9ac\ud55c\ub2e4.<\/p>\n\n<div class=\"cta\">\n<h3>\ub2e4\uc74c \ud3b8 \uc608\uace0 \u2014 App Router \ud3f4\ub354 \uad6c\uc870 \ud55c\ub208\uc5d0<\/h3>\n<p>app\/ \uc548\uc758 layout\u00b7page\u00b7loading\u00b7error\u00b7not-found \uac19\uc740 \ud2b9\uc218 \ud30c\uc77c\uc774 \uac01\uac01 \ubb34\uc5c7\uc744 \uc758\ubbf8\ud558\ub294\uc9c0.<\/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-intro-1\/\">Ch.1 React \uc640 \ucc28\uc774<\/a>\n<\/div>\n\n<\/article>\n<\/div>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>create-next-app \ud55c \uc904\ub85c Next.js \ud504\ub85c\uc81d\ud2b8 \uc2dc\uc791. \uc635\uc158 7\uac1c\u00b7\ud3f4\ub354 \uad6c\uc870\u00b7dev \uc11c\ubc84\u00b7\uccab \ud398\uc774\uc9c0 \uc218\uc815\uae4c\uc9c0. \uad50\uc7ac 2\ud3b8.<\/p>\n","protected":false},"author":1,"featured_media":815,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[23],"tags":[],"class_list":["post-869","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\/869","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=869"}],"version-history":[{"count":1,"href":"https:\/\/junai.ai\/blog\/wp-json\/wp\/v2\/posts\/869\/revisions"}],"predecessor-version":[{"id":912,"href":"https:\/\/junai.ai\/blog\/wp-json\/wp\/v2\/posts\/869\/revisions\/912"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/junai.ai\/blog\/wp-json\/wp\/v2\/media\/815"}],"wp:attachment":[{"href":"https:\/\/junai.ai\/blog\/wp-json\/wp\/v2\/media?parent=869"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/junai.ai\/blog\/wp-json\/wp\/v2\/categories?post=869"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/junai.ai\/blog\/wp-json\/wp\/v2\/tags?post=869"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}