{"id":867,"date":"2026-05-20T09:50:38","date_gmt":"2026-05-20T01:50:38","guid":{"rendered":"https:\/\/junai.ai\/blog\/nextjs-intro-1\/"},"modified":"2026-05-20T09:54:32","modified_gmt":"2026-05-20T01:54:32","slug":"nextjs-intro-1","status":"publish","type":"post","link":"https:\/\/junai.ai\/blog\/nextjs-intro-1\/","title":{"rendered":"Next.js \uc785\ubb38 \u2014 React\uc640 \ubb34\uc5c7\uc774 \ub2e4\ub978\uac00, \uc65c \uc4f0\ub098"},"content":{"rendered":"\n<!-- WordPress REST API \ubc1c\ud589\uc6a9 HTML (\uc790\ub3d9 \uc0dd\uc131) -->\n<!-- WP-FEATURED-MEDIA-ID: 813 -->\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 \uc785\ubb38 1\ud3b8 \u00b7 \uc2dc\ub9ac\uc988 \uc2dc\uc791<\/span>\n  <h1>Next.js \uc785\ubb38 \u2014 React\uc640 \ubb34\uc5c7\uc774 \ub2e4\ub978\uac00, \uc65c \uc4f0\ub098<\/h1>\n  <p>React \uc704\uc5d0 \uc5b9\ub294 \uba54\ud0c0 \ud504\ub808\uc784\uc6cc\ud06c. \ub77c\uc6b0\ud305\u00b7SSR\u00b7\uc774\ubbf8\uc9c0\u00b7API \uac00 \ud55c \ubb36\uc74c\uc73c\ub85c \ub530\ub77c\uc628\ub2e4.<\/p>\n  <img decoding=\"async\" src=\"https:\/\/junai.ai\/blog\/wp-content\/uploads\/2026\/05\/hero-5-46.jpg\" alt=\"\uc11c\ubc84\uc640 \ud074\ub77c\uc774\uc5b8\ud2b8 \ub80c\ub354\ub9c1\uc774 \uc5f0\uacb0\ub41c Next.js \uc544\ud0a4\ud14d\ucc98\ub97c \ubcf4\uc5ec\uc8fc\ub294 \uc544\uc774\uc18c\uba54\ud2b8\ub9ad \uc77c\ub7ec\uc2a4\ud2b8\">\n<\/section>\n\n<div class=\"container\">\n<article>\n\n<p>React \uc2dc\ub9ac\uc988\ub97c \ub9c9 \ub05d\ub0b8 \uc0ac\ub78c\ud55c\ud14c \uac00\uc7a5 \ub9ce\uc774 \uc624\ub294 \uc9c8\ubb38 \u2014 <strong>&#8220;\uadf8\ub7fc Next.js \ub294 \ub610 \ubb50\uc608\uc694?&#8221;<\/strong>. \ucc44\uc6a9 \uacf5\uace0\ub294 React 70~80%, Next.js \uac00 \uadf8 \uc808\ubc18\ucbe4\uc5d0\uc11c \ub530\ub77c\ubd99\ub294\ub2e4. &#8220;React \uc54c\uba74 \ub410\uc9c0&#8221; \uc2f6\uc740\ub370 \ud68c\uc0ac \uac00 \ubcf4\uba74 \uc8c4\ub2e4 Next \ub77c \ub2f9\ud669\ud55c\ub2e4.<\/p>\n\n<p>1\ud3b8\uc740 \ucf54\ub4dc\ubcf4\ub2e4 <strong>\ud070 \uadf8\ub9bc<\/strong>. React \uc640\uc758 \uad00\uacc4, \uc65c \ub610 \ubc30\uc6b0\ub294\uc9c0, \uc5b4\ub5a4 \uc0ac\ub78c\uc5d0\uac8c \uc5b4\uc6b8\ub9ac\ub294\uc9c0 \u2014 2\ud3b8 \ubcf8\uaca9 \uc2dc\uc791 \uc804 \uc88c\ud45c\ubd80\ud130 \ubc15\ub294\ub2e4.<\/p>\n\n<h2>1. Next.js \ub294 &#8220;\uba54\ud0c0 \ud504\ub808\uc784\uc6cc\ud06c&#8221; \u2014 React \uc704\uc5d0 \uc5b9\ub294 \uac83<\/h2>\n\n<p>\ud55c \uc904 \uc815\ub9ac\ub294 \uc774\ub807\ub2e4 \u2014 <strong>Next.js = React + \ub77c\uc6b0\ud305 + \uc11c\ubc84 \ub80c\ub354\ub9c1 + \uc774\ubbf8\uc9c0\/\ud3f0\ud2b8\/\ubc88\ub4e4\/\ubc30\ud3ec \ud1b5\ud569<\/strong>. React \uac00 UI \uadf8\ub9ac\ub294 \ud568\uc218\uae4c\uc9c0\ub9cc \ucc45\uc784\uc9c4\ub2e4\uba74, Next.js \ub294 \uadf8 \ud568\uc218\ub97c \uc2e4\uc81c \uc6f9\uc0ac\uc774\ud2b8\ub85c \uad74\ub9ac\ub294 \ub370 \ud544\uc694\ud55c \ub098\uba38\uc9c0\ub97c \ub2e4 \uac16\ub2e4 \ubd99\uc778\ub2e4.<\/p>\n\n<p>\uadf8\ub798\uc11c \ubd80\ub974\ub294 \uc774\ub984\uc774 <strong>\uba54\ud0c0 \ud504\ub808\uc784\uc6cc\ud06c<\/strong>. &#8220;\ud504\ub808\uc784\uc6cc\ud06c\ub97c \uac10\uc2f8\ub294 \ud504\ub808\uc784\uc6cc\ud06c&#8221; \uc815\ub3c4. \uac19\uc740 \uacb0\uc758 \ub3c4\uad6c\ub85c Remix\u00b7SvelteKit\u00b7Nuxt \uac00 \uc788\ub2e4.<\/p>\n\n<div class=\"databox\">\n<strong>\ube44\uc720<\/strong> \u2014 React \uac00 \uc790\ub3d9\ucc28 \uc5d4\uc9c4\uc774\ub77c\uba74 Next.js \ub294 \ucc28\uccb4\u00b7\ubc14\ud034\u00b7\ud578\ub4e4\uc774 \ub2e4 \ubd99\uc740 \uc644\uc131\ucc28. \uc5d4\uc9c4\ub9cc \ubc1b\uc544 \uc9c1\uc811 \uc870\ub9bd\ud560 \uc218\ub3c4(React + Vite + \ub77c\uc6b0\ud130), \uc644\uc131\ucc28\ub85c \uc2dc\uc791\ud560 \uc218\ub3c4 \uc788\ub2e4. \ud6c4\uc790\uac00 \ube68\ub77c\uc11c \ud68c\uc0ac\uac00 \uc120\ud638\ud55c\ub2e4.\n<\/div>\n\n<h2>2. React vs Next.js \u2014 \ucc28\uc774\ub294 \uc815\ud655\ud788 \uc5b4\ub514\uc11c \uac08\ub9ac\ub098<\/h2>\n\n<p>&#8220;React \ub85c \ub2e4 \ub9cc\ub4e4 \uc218 \uc788\ub294\ub370 \uc65c Next.js?&#8221; \u2014 \ub2f5\uc740 <strong>&#8220;\uc548 \ud574\ub3c4 \ub418\ub294 \uacb0\uc815\uc744 \uc548 \ud574\ub3c4 \ub428&#8221;<\/strong> \uc774\ub2e4. React \ub9cc\uc73c\ub85c \uc0ac\uc774\ud2b8\ub97c \ub9cc\ub4e4\uba74 \ub77c\uc6b0\ud130 \uace0\ub974\uace0, \ube4c\ub4dc \ub3c4\uad6c \uace0\ub974\uace0, \uc11c\ubc84 \ub80c\ub354\ub9c1 \uc9c1\uc811 \ubd99\uc774\uace0, \uc774\ubbf8\uc9c0 \ucd5c\uc801\ud654 \ub77c\uc774\ube0c\ub7ec\ub9ac \ucc3e\uace0, \ubc30\ud3ec \ud658\uacbd \uc138\ud305\ud558\uace0\u2026 \uccab \ud398\uc774\uc9c0 \ub744\uc6b0\uae30 \uc804\uc5d0 \uc774\ubbf8 5~6\uac1c \uacb0\uc815\uc774 \uc313\uc778\ub2e4. Next.js \ub294 \uadf8 \uacb0\uc815\ub4e4\uc744 \uae30\ubcf8\uac12\uc73c\ub85c \ubbf8\ub9ac \ubc15\uc544 \ub454\ub2e4.<\/p>\n\n<div class=\"tablewrap\">\n<table>\n<thead><tr><th>\uad6c\ubd84<\/th><th>\uc21c\uc218 React<\/th><th>Next.js<\/th><\/tr><\/thead>\n<tbody>\n<tr><td>\uc5ed\ud560<\/td><td data-label=\"\uc21c\uc218 React\">UI \ub77c\uc774\ube0c\ub7ec\ub9ac<\/td><td data-label=\"Next.js\">\uc6f9\uc571 \ud480\uc2a4\ud0dd \ud504\ub808\uc784\uc6cc\ud06c<\/td><\/tr>\n<tr><td>\ub77c\uc6b0\ud305<\/td><td data-label=\"\uc21c\uc218 React\">\ubcc4\ub3c4 (React Router \ub4f1) \uc120\ud0dd\u00b7\uc124\uce58<\/td><td data-label=\"Next.js\">\ud30c\uc77c \uc2dc\uc2a4\ud15c \uae30\ubc18 \ub0b4\uc7a5 (App Router)<\/td><\/tr>\n<tr><td>\ub80c\ub354\ub9c1<\/td><td data-label=\"\uc21c\uc218 React\">\uae30\ubcf8\uc740 CSR (\ube0c\ub77c\uc6b0\uc800\uc5d0\uc11c)<\/td><td data-label=\"Next.js\">SSR\u00b7SSG\u00b7ISR\u00b7CSR \ud398\uc774\uc9c0\ubcc4 \uc120\ud0dd<\/td><\/tr>\n<tr><td>\uc774\ubbf8\uc9c0<\/td><td data-label=\"\uc21c\uc218 React\"><code>&lt;img&gt;<\/code> \uc9c1\uc811 \u2014 \ucd5c\uc801\ud654\ub294 \ubcf8\uc778 \ucc45\uc784<\/td><td data-label=\"Next.js\"><code>next\/image<\/code> \uc790\ub3d9 \ub9ac\uc0ac\uc774\uc988\u00b7lazy\u00b7WebP<\/td><\/tr>\n<tr><td>API<\/td><td data-label=\"\uc21c\uc218 React\">\ubcc4\ub3c4 \ubc31\uc5d4\ub4dc \uc11c\ubc84 \ud544\uc694<\/td><td data-label=\"Next.js\">Route Handlers \ub85c \ud55c \ud504\ub85c\uc81d\ud2b8 \uc548\uc5d0<\/td><\/tr>\n<tr><td>SEO<\/td><td data-label=\"\uc21c\uc218 React\">CSR \uc774\ub77c \uac80\uc0c9\uc5d4\uc9c4\uc5d0 \uc57d\ud568<\/td><td data-label=\"Next.js\">\uc11c\ubc84 \ub80c\ub354\ub85c SEO \uac15\ud568<\/td><\/tr>\n<tr><td>\ubc30\ud3ec<\/td><td data-label=\"\uc21c\uc218 React\">\uc815\uc801 \ud638\uc2a4\ud305 + \ubcc4\ub3c4 \ubc31\uc5d4\ub4dc<\/td><td data-label=\"Next.js\">Vercel \ud074\ub9ad \ud55c \ubc88 (\ub610\ub294 Node \uc11c\ubc84)<\/td><\/tr>\n<tr><td>\ud559\uc2b5 \uace1\uc120<\/td><td data-label=\"\uc21c\uc218 React\">React \ub9cc \u2014 \uc2dc\uc791\uc740 \uc26c\uc6c0<\/td><td data-label=\"Next.js\">React + Next \uac1c\ub150 \u2014 \ucd08\ubc18 \uac00\ud30c\ub984<\/td><\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n\n<p>\uc694\uc57d\ud558\uba74 React \ub294 <strong>\uc790\uc720<\/strong>, Next.js \ub294 <strong>\ud569\uc758\ub41c \uae30\ubcf8\uac12<\/strong>. 1\uc778 \uc0ac\uc774\ub4dc \ud504\ub85c\uc81d\ud2b8\ub294 \uc5b4\ub290 \ucabd\ub3c4 \ub418\uc9c0\ub9cc, \ud300\uc774 5\uba85\uc744 \ub118\uae30\uba74 &#8220;\ub2e4\uc74c \uc0ac\ub78c\uc774 \uc640\ub3c4 \uc774\ud574\ud560 \uc218 \uc788\ub294 \uad6c\uc870&#8221; \uac00 \ud544\uc694\ud574\uc11c Next.js \uac00 \uc774\uae34\ub2e4.<\/p>\n\n<h2>3. Next.js \uac00 \uac00\uc838\uc628 5\uac00\uc9c0 \ubb34\uae30<\/h2>\n\n<p>\uc65c \uad73\uc774 React \uc704\uc5d0 \ud55c \uacb9\uc744 \ub354 \uc313\uc558\ub290\ub0d0 \u2014 \uadf8\ub9cc\ud55c \uc774\uc720\uac00 \uc788\ub2e4. \ud575\uc2ec 5\uac00\uc9c0.<\/p>\n\n<h3>\u2460 \ud30c\uc77c \uc2dc\uc2a4\ud15c \ub77c\uc6b0\ud305<\/h3>\n\n<p><code>app\/about\/page.tsx<\/code> \ud30c\uc77c\uc744 \ub9cc\ub4e4\uba74 <code>\/about<\/code> \uacbd\ub85c\uac00 \uc989\uc2dc \uc0dd\uae34\ub2e4. React Router \ucc98\ub7fc \ubcc4\ub3c4\ub85c <code>&lt;Route&gt;<\/code> \ub4f1\ub85d \ucf54\ub4dc \uc4f8 \ud544\uc694 \uc5c6\uc74c. \ud3f4\ub354 \uad6c\uc870 = \uc0ac\uc774\ud2b8 \uad6c\uc870.<\/p>\n\n<h3>\u2461 \uc11c\ubc84 \ucef4\ud3ec\ub10c\ud2b8 (RSC)<\/h3>\n\n<p>Next.js 14\/15 \uc758 \ud575\uc2ec. \ucef4\ud3ec\ub10c\ud2b8\uac00 <strong>\uc11c\ubc84\uc5d0\uc11c \uc2e4\ud589<\/strong>\ub418\uba74\uc11c DB\u00b7\uc678\ubd80 API \ub97c \uc9c1\uc811 \ud638\ucd9c\ud558\uace0 HTML \ub9cc \ube0c\ub77c\uc6b0\uc800\ub85c \ubcf4\ub0b8\ub2e4. \uccab \ub85c\ub529\uc774 \ube60\ub974\uace0 \ud074\ub77c\uc774\uc5b8\ud2b8 JS \ubc88\ub4e4\ub3c4 \uc791\ub2e4.<\/p>\n\n<h3>\u2462 \uc774\ubbf8\uc9c0\u00b7\ud3f0\ud2b8 \uc790\ub3d9 \ucd5c\uc801\ud654<\/h3>\n\n<p><code>next\/image<\/code> \uac00 WebP \ubcc0\ud658\u00b7\ubc18\uc751\ud615\u00b7lazy \ub97c \uc54c\uc544\uc11c \ucc98\ub9ac\ud558\uace0, <code>next\/font<\/code> \ub294 Google Fonts \ub97c \uc140\ud504 \ud638\uc2a4\ud305\uc73c\ub85c \ubc14\uafd4 \uc678\ubd80 \uc694\uccad\uc744 \uc5c6\uc564\ub2e4. \ub77c\uc774\ud2b8\ud558\uc6b0\uc2a4 \uc810\uc218\uac00 \uadf8\ub0e5 \uc62c\ub77c\uac04\ub2e4.<\/p>\n\n<h3>\u2463 API Routes<\/h3>\n\n<p><code>app\/api\/hello\/route.ts<\/code> \ub9cc \ub9cc\ub4e4\uba74 <code>\/api\/hello<\/code> \uac00 \uc11c\ubc84 \uc5d4\ub4dc\ud3ec\uc778\ud2b8. \ubc31\uc5d4\ub4dc \uc11c\ubc84 \uc5c6\uc774\ub3c4 \ud3fc\u00b7\uc6f9\ud6c5\u00b7\uc778\uc99d \ucf5c\ubc31\uc774 \ud55c \uc800\uc7a5\uc18c \uc548\uc5d0\uc11c \ub05d\ub09c\ub2e4.<\/p>\n\n<h3>\u2464 Vercel 1-\ud074\ub9ad \ubc30\ud3ec<\/h3>\n\n<p>Next.js \ub97c \ub9cc\ub4e0 \ud68c\uc0ac Vercel \uc774 \ubc30\ud3ec \ud50c\ub7ab\ud3fc\ub3c4 \uac19\uc774 \uc6b4\uc601\ud55c\ub2e4. GitHub \ud478\uc2dc \u2192 \uc790\ub3d9 \ube4c\ub4dc \u2192 CDN \ubc30\ud3ec\uae4c\uc9c0 1\ubd84. AWS\u00b7Cloudflare \ub3c4 \uc9c0\uc6d0\ud558\uc9c0\ub9cc Vercel \uc774 \uac00\uc7a5 \ub9e4\ub044\ub7fd\ub2e4.<\/p>\n\n<div class=\"databox\">\n<strong>\ub2e4\uc12f \ubb34\uae30\uc758 \uacf5\ud1b5\uc810<\/strong> \u2014 &#8220;React \ub9cc\uc73c\ub85c\ub3c4 \ud560 \uc218 \uc788\uae34 \ud558\uc9c0\ub9cc \uc9c1\uc811 \ud558\ub824\uba74 \uba70\uce60 \uac78\ub9ac\ub294 \uc77c&#8221; \uc744 \uae30\ubcf8\uac12\uc73c\ub85c \ubc15\uc544 \ub454 \uac83. \uadf8\ub798\uc11c Next.js \ub294 &#8220;\uacb0\uc815\uc744 \uc904\uc5ec\uc8fc\ub294 \ub3c4\uad6c&#8221; \ub77c\uace0\ub3c4 \ubd80\ub978\ub2e4.\n<\/div>\n\n<h2>4. \uc5b8\uc81c \uc4f0\uace0, \uc5b8\uc81c \uc4f0\uc9c0 \ub9c8\ub77c<\/h2>\n\n<p>\ubaa8\ub4e0 \ud504\ub85c\uc81d\ud2b8\uac00 Next.js \uc77c \ud544\uc694\ub294 \uc5c6\ub2e4. \uc194\uc9c1\ud55c \uac00\uc774\ub4dc.<\/p>\n\n<h3>Next.js \uac00 \uc798 \ub9de\ub294 \uacbd\uc6b0<\/h3>\n\n<ul>\n<li><strong>SEO \uac00 \uc911\uc694\ud55c \uc0ac\uc774\ud2b8<\/strong> \u2014 \ube14\ub85c\uadf8\u00b7\ubbf8\ub514\uc5b4\u00b7\ub79c\ub529\u00b7\uc774\ucee4\uba38\uc2a4. \uc11c\ubc84 \ub80c\ub354\ub9c1\uc774 \uac80\uc0c9\uc5d0 \uacb0\uc815\uc801.<\/li>\n<li><strong>\ud480\uc2a4\ud0dd \ud55c \uc800\uc7a5\uc18c<\/strong> \u2014 \ubc31\uc5d4\ub4dc \ub530\ub85c \uc548 \ub450\uace0 \ube60\ub974\uac8c \ucd9c\uc2dc\ud560 \ub54c.<\/li>\n<li><strong>5\uc778 \uc774\uc0c1 \ud300<\/strong> \u2014 &#8220;\ub2e4\uc74c \uc0ac\ub78c\uc774 \uc774\ud574\ud560 \uad6c\uc870&#8221; \uac15\uc81c\uac00 \uc774\ub4dd.<\/li>\n<li><strong>Vercel\/Cloudflare \ubc30\ud3ec<\/strong> \u2014 \uc778\ud504\ub77c \uad00\ub9ac \uc5c6\uc774 \uc0ac\uc774\ud2b8\ub9cc \ub9cc\ub4e4 \ub54c.<\/li>\n<\/ul>\n\n<h3>\uc624\ud788\ub824 \uc548 \ub9de\ub294 \uacbd\uc6b0<\/h3>\n\n<ul>\n<li><strong>\uc5b4\ub4dc\ubbfc SPA \ub300\uc2dc\ubcf4\ub4dc<\/strong> \u2014 \ub85c\uadf8\uc778 \uc0ac\uc6a9\uc790\ub9cc \ubcf4\ub294 \ucf58\uc194. SEO \ubb34\uc758\ubbf8, CSR \ub85c \ucda9\ubd84.<\/li>\n<li><strong>\uac00\ubcbc\uc6b4 \uc815\uc801 \uc0ac\uc774\ud2b8<\/strong> \u2014 HTML \ud55c \uc7a5\uc774\uba74 \ub05d. Astro\u00b7\uc21c\uc218 HTML \uc774 \ub354 \uac00\ubccd\ub2e4.<\/li>\n<li><strong>React \ud559\uc2b5 \ucd08\uae30<\/strong> \u2014 Next \uc758 \ucd94\uc0c1\ud654\uc5d0 \uac00\ub824 \uc0c1\ud0dc\u00b7effect \ub4f1 \ubcf8\uccb4 \uac1c\ub150\uc774 \ud750\ub824\uc9c4\ub2e4. <em>React \uc2dc\ub9ac\uc988 \uba3c\uc800 \ub05d\ub0b4\uace0 \uc624\ub294 \uac8c \uc815\ub2f5<\/em>.<\/li>\n<\/ul>\n\n<div class=\"warnbox\">\n<strong>\ud604\uc2e4 \uc870\uc5b8<\/strong> \u2014 \ud68c\uc0ac Next.js \ucf54\ub4dc\uc758 70% \ub294 App Router, 25% \ub294 \uc61b Pages Router. \uc774 \uad50\uc7ac\ub294 2026 \uae30\uc900 \ud45c\uc900\uc778 <strong>App Router<\/strong> \uc704\uc8fc, Pages Router \ub294 23\ud3b8\uc5d0\uc11c\ub9cc \ub2e4\ub8ec\ub2e4.\n<\/div>\n\n<h2>5. \uccab \ucf54\ub4dc \u2014 App Router \uc758 &#8220;Hello World&#8221;<\/h2>\n\n<p>2\ud3b8\uc5d0\uc11c \ubcf8\uaca9 \uc124\uce58\ud558\uc9c0\ub9cc, \ubbf8\ub9ac \uc5b4\ub5a4 \ubaa8\uc591\uc778\uc9c0 \ubcf4\uace0 \uac00\uc790. \ud3f4\ub354 \uad6c\uc870\uc640 \uac00\uc7a5 \uac04\ub2e8\ud55c \ud398\uc774\uc9c0 \ucef4\ud3ec\ub10c\ud2b8.<\/p>\n\n<div class=\"code-block\">my-next-app\/\n\u251c\u2500\u2500 app\/\n\u2502   \u251c\u2500\u2500 layout.tsx        \u2190 \uc804\uccb4 \ud398\uc774\uc9c0\ub97c \uac10\uc2f8\ub294 \uacf5\ud1b5 \ub808\uc774\uc544\uc6c3\n\u2502   \u251c\u2500\u2500 page.tsx          \u2190 \ub8e8\ud2b8 &#8220;\/&#8221; \uacbd\ub85c\n\u2502   \u2514\u2500\u2500 about\/\n\u2502       \u2514\u2500\u2500 page.tsx      \u2190 &#8220;\/about&#8221; \uacbd\ub85c\n\u251c\u2500\u2500 public\/                \u2190 \uc815\uc801 \ud30c\uc77c (\uc774\ubbf8\uc9c0\u00b7favicon)\n\u251c\u2500\u2500 package.json\n\u2514\u2500\u2500 next.config.js<\/div>\n\n<p>\uac00\uc7a5 \uac04\ub2e8\ud55c <code>app\/page.tsx<\/code>:<\/p>\n\n<div class=\"code-block\">export default function HomePage() {\n  return (\n    &lt;main&gt;\n      &lt;h1&gt;\uc548\ub155, Next.js!&lt;\/h1&gt;\n      &lt;p&gt;React \ucef4\ud3ec\ub10c\ud2b8\uc9c0\ub9cc \uc11c\ubc84\uc5d0\uc11c \uba3c\uc800 \uadf8\ub824\uc838 \uc634.&lt;\/p&gt;\n    &lt;\/main&gt;\n  );\n}<\/div>\n\n<p>React \ub9cc \uc54c\uba74 \uc989\uc2dc \uc77d\ud78c\ub2e4. \ub2e4\ub978 \uc810\uc740 \ub2e8 \ud558\ub098 \u2014 \uc774 \ud30c\uc77c\uc774 <strong>\uc11c\ubc84\uc5d0\uc11c \uba3c\uc800 \uc2e4\ud589<\/strong>\ub41c\ub2e4. <code>fetch('https:\/\/api.example.com\/posts')<\/code> \ub97c \ucef4\ud3ec\ub10c\ud2b8 \uc548\uc5d0\uc11c \uc9c1\uc811 \ud638\ucd9c\ud560 \uc218 \uc788\uace0, DB \ub3c4 \uc9c1\uc811 \ubd80\ub97c \uc218 \uc788\ub2e4. \uacb0\uacfc HTML \ub9cc \ube0c\ub77c\uc6b0\uc800\ub85c \uac04\ub2e4. React Server Component \uc758 \uac00\uc7a5 \ud070 \ubcc0\ud654.<\/p>\n\n<h3>\uc694\uc57d \u2014 Next.js \uc88c\ud45c<\/h3>\n\n<p>\uc5ec\uae30\uae4c\uc9c0 \ud575\uc2ec\uc744 \ud55c \ubc88 \ub354. Next.js \ub294 <strong>React \uc704\uc5d0 \uc5b9\ub294 \uba54\ud0c0 \ud504\ub808\uc784\uc6cc\ud06c<\/strong>\uc774\uace0, \ub77c\uc6b0\ud305\u00b7SSR\u00b7\uc774\ubbf8\uc9c0\u00b7API\u00b7\ubc30\ud3ec\uac00 \ud55c \ubb36\uc74c\uc73c\ub85c \ub530\ub77c\uc628\ub2e4. \ub2e4\uc12f \ubb34\uae30 \u2014 \ud30c\uc77c \ub77c\uc6b0\ud305\u00b7\uc11c\ubc84 \ucef4\ud3ec\ub10c\ud2b8\u00b7\uc774\ubbf8\uc9c0\/\ud3f0\ud2b8 \ucd5c\uc801\ud654\u00b7API Routes\u00b7Vercel \ubc30\ud3ec \u2014 \uac00 \ud569\uccd0\uc838\uc11c SEO\u00b7\ud480\uc2a4\ud0dd\u00b7\ud300 \ud504\ub85c\uc81d\ud2b8\uc5d0 \uac15\ub825\ud558\ub2e4. \uc5b4\ub4dc\ubbfc SPA \ub098 React \ud559\uc2b5 \ucd08\uae30\uc5d4 \uc624\ubc84\ud0ac\uc774\uc9c0\ub9cc, \ud68c\uc0ac \uac00\uba74 \uac70\uc758 \ub9cc\ub098\ub2c8\uae4c \ud55c \ubc88\uc740 \uc815\ub9ac\ud574 \ub458 \uac00\uce58\uac00 \uc788\ub2e4. 2\ud3b8\uc5d0\uc11c <code>create-next-app<\/code> \uc73c\ub85c \uccab \ud504\ub85c\uc81d\ud2b8\ub97c \ub9cc\ub4e0\ub2e4.<\/p>\n\n<div class=\"cta\">\n<h3>\ub2e4\uc74c \ud3b8 \uc608\uace0 \u2014 create-next-app \uc73c\ub85c \ud504\ub85c\uc81d\ud2b8 \uc2dc\uc791<\/h3>\n<p>\uc124\uce58 \uba85\ub839 \ud55c \uc904\ub85c \uccab Next.js \ud504\ub85c\uc81d\ud2b8 \ub9cc\ub4e4\uae30. \ud3f4\ub354 \uad6c\uc870\uc640 dev \uc11c\ubc84 \ud750\ub984\uc744 \uc9c1\uc811 \ubcf8\ub2e4.<\/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\/category\/react\/\">React \uc2dc\ub9ac\uc988<\/a>\n<\/div>\n\n<\/article>\n<\/div>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>Next.js \ub294 React \uc704\uc5d0 \uc5b9\ub294 \uba54\ud0c0 \ud504\ub808\uc784\uc6cc\ud06c. SSR\u00b7SSG\u00b7\ub77c\uc6b0\ud305\u00b7\uc774\ubbf8\uc9c0 \ucd5c\uc801\ud654\uac00 \ub2e4 \ubb36\uc784. React \uc640 \ucc28\uc774 + \uc5b8\uc81c \uc4f0\ub294\uac00. \uad50\uc7ac 1\ud3b8.<\/p>\n","protected":false},"author":1,"featured_media":813,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[23],"tags":[],"class_list":["post-867","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\/867","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=867"}],"version-history":[{"count":1,"href":"https:\/\/junai.ai\/blog\/wp-json\/wp\/v2\/posts\/867\/revisions"}],"predecessor-version":[{"id":892,"href":"https:\/\/junai.ai\/blog\/wp-json\/wp\/v2\/posts\/867\/revisions\/892"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/junai.ai\/blog\/wp-json\/wp\/v2\/media\/813"}],"wp:attachment":[{"href":"https:\/\/junai.ai\/blog\/wp-json\/wp\/v2\/media?parent=867"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/junai.ai\/blog\/wp-json\/wp\/v2\/categories?post=867"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/junai.ai\/blog\/wp-json\/wp\/v2\/tags?post=867"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}