{"id":1647,"date":"2026-03-16T16:02:19","date_gmt":"2026-03-16T16:02:19","guid":{"rendered":"https:\/\/wayhope.kro.kr\/?p=1647"},"modified":"2026-08-31T07:32:34","modified_gmt":"2026-08-31T07:32:34","slug":"next-js-%ea%b0%9c%eb%b0%9c-%ed%95%b5%ec%8b%ac-%ec%a0%95%eb%a6%ac","status":"publish","type":"post","link":"https:\/\/wayhope.kro.kr\/?p=1647","title":{"rendered":"Next.js \uac1c\ubc1c \ud575\uc2ec \uc815\ub9ac"},"content":{"rendered":"\n

React\ub85c \uc6f9 \uc560\ud50c\ub9ac\ucf00\uc774\uc158\uc744 \ub9cc\ub4e4\ub2e4 \ubcf4\uba74 UI \uc678\uc5d0\ub3c4 \uc9c1\uc811 \ud574\uacb0\ud574\uc57c \ud560 \ubb38\uc81c\uac00 \ub298\uc5b4\ub09c\ub2e4.<\/p>\n\n\n\n

\ub77c\uc6b0\ud305, \uc11c\ubc84 \ub80c\ub354\ub9c1, \ub370\uc774\ud130 \uc870\ud68c, SEO, API, \uc778\uc99d, \uce90\uc2f1, \uc774\ubbf8\uc9c0 \ucd5c\uc801\ud654, \ubc30\ud3ec \ub4f1\uc774 \ub300\ud45c\uc801\uc774\ub2e4.<\/p>\n\n\n\n

Next.js\ub294 \uc774\ub7f0 \uc6f9 \uc560\ud50c\ub9ac\ucf00\uc774\uc158 \uac1c\ubc1c\uc5d0 \ud544\uc694\ud55c \uae30\ub2a5\uc744 React \uc704\uc5d0 \ud1b5\ud569\ud55c \ud504\ub808\uc784\uc6cc\ud06c\ub2e4.<\/p>\n\n\n\n

\ub530\ub77c\uc11c Next.js\ub97c \uacf5\ubd80\ud560 \ub54c API\ub97c \ud558\ub098\uc529 \uc678\uc6b0\uae30\ubcf4\ub2e4 \uba3c\uc800 \uc11c\ubc84\uc640 \ud074\ub77c\uc774\uc5b8\ud2b8\uc758 \uacbd\uacc4<\/strong>\ub97c \uc774\ud574\ud558\ub294 \uac83\uc774 \uc911\uc694\ud558\ub2e4.<\/p>\n\n\n\n

Browser -> Next.js -> Server Component \/ Client Component \/ Server Action \/ Route Handler -> Database \/ External API\n<\/code><\/pre>\n\n\n\n
Next.js\uc758 \ud575\uc2ec\uc740 React\uc5d0 \uc11c\ubc84 \uc2e4\ud589 \ud658\uacbd\uacfc \uc6f9 \uc560\ud50c\ub9ac\ucf00\uc774\uc158\uc5d0 \ud544\uc694\ud55c \uae30\ub2a5\uc744 \uacb0\ud569\ud55c \uac83\uc774\ub2e4.<\/p>\n\n\n\n
\n\n\n\n
Next.js\ub294 \ubb34\uc5c7\uc744 \ud574\uacb0\ud558\ub294\uac00<\/h2>\n\n\n\n
React\ub294 \uae30\ubcf8\uc801\uc73c\ub85c UI\ub97c \uad6c\uc131\ud558\uae30 \uc704\ud55c \ub77c\uc774\ube0c\ub7ec\ub9ac\ub2e4.<\/p>\n\n\n\n
\uc2e4\uc81c \uc6f9 \uc560\ud50c\ub9ac\ucf00\uc774\uc158\uc744 \ub9cc\ub4e4\ub824\uba74 UI \uc678\uc5d0\ub3c4 \uc5ec\ub7ec \uae30\ub2a5\uc774 \ud544\uc694\ud558\ub2e4.<\/p>\n\n\n\n
React -> UI\n<\/code><\/pre>\n\n\n\n
Next.js\uc5d0\uc11c\ub294 \uc5ec\uae30\uc5d0 \uc6f9 \uc560\ud50c\ub9ac\ucf00\uc774\uc158 \uac1c\ubc1c\uc5d0 \ud544\uc694\ud55c \uae30\ub2a5\uc774 \ucd94\uac00\ub41c\ub2e4.<\/p>\n\n\n\n
Next.js -> UI \/ Routing \/ Rendering \/ Data Fetching \/ Server Logic \/ API \/ Caching \/ Optimization\n<\/code><\/pre>\n\n\n\n
\ud2b9\ud788 \ud604\uc7ac Next.js\uc758 App Router\uc5d0\uc11c\ub294 React Server Components\ub97c \uae30\ubc18\uc73c\ub85c \uc11c\ubc84\uc640 \ud074\ub77c\uc774\uc5b8\ud2b8\uc758 \uc5ed\ud560\uc744 \ub098\ub204\ub294 \uad6c\uc870\uac00 \uc911\uc694\ud558\ub2e4.<\/p>\n\n\n\n
\n\n\n\n
App Router<\/h2>\n\n\n\n
Next.js\uc758 App Router\ub294 app<\/code> \ub514\ub809\ud130\ub9ac\uc758 \ud30c\uc77c \uad6c\uc870\ub97c URL \uad6c\uc870\uc640 \uc5f0\uacb0\ud55c\ub2e4.<\/p>\n\n\n\n
\uc608\ub97c \ub4e4\uc5b4:<\/p>\n\n\n\n
app -> page.tsx \/ layout.tsx \/ about\/page.tsx \/ users\/page.tsx\n<\/code><\/pre>\n\n\n\n
\uac01 \ud30c\uc77c\uc740 \ub2e4\uc74c\uacfc \uac19\uc740 Route\uc640 \uc5f0\uacb0\ub41c\ub2e4.<\/p>\n\n\n\n
app\/page.tsx -> \/\napp\/about\/page.tsx -> \/about\napp\/users\/page.tsx -> \/users\n<\/code><\/pre>\n\n\n\n
\ubcc4\ub3c4\uc758 Router \uc124\uc815\uc744 \ubc18\ubcf5\ud574\uc11c \uc791\uc131\ud558\uc9c0 \uc54a\uc544\ub3c4 \ud30c\uc77c\uacfc \ud3f4\ub354 \uad6c\uc870\ub97c \ud1b5\ud574 \ud398\uc774\uc9c0 \uad6c\uc870\ub97c \ud45c\ud604\ud560 \uc218 \uc788\ub2e4.<\/p>\n\n\n\n
\n\n\n\n
page\uc640 layout<\/h2>\n\n\n\n
page.tsx<\/code>\ub294 \ud574\ub2f9 Route\uc5d0\uc11c \uc2e4\uc81c\ub85c \ubcf4\uc5ec\uc904 \ud398\uc774\uc9c0 UI\ub97c \uc815\uc758\ud55c\ub2e4.<\/p>\n\n\n\n
export default function Page() {\n  return <h1>Home<\/h1>;\n}\n<\/code><\/pre>\n\n\n\n
layout.tsx<\/code>\ub294 \uc5ec\ub7ec \ud398\uc774\uc9c0\uc5d0\uc11c \uacf5\uc720\ub418\ub294 UI \uad6c\uc870\ub97c \uc815\uc758\ud55c\ub2e4.<\/p>\n\n\n\n
Root Layout -> Home Page \/ Users Layout\n<\/code><\/pre>\n\n\n\n
\uc911\ucca9\ub41c Layout\uc740 \ud2b9\uc815 Route \ud558\uc704\uc5d0\uc11c\ub9cc \uacf5\uc720\ub41c\ub2e4.<\/p>\n\n\n\n
Users Layout -> Users Page \/ User Detail\n<\/code><\/pre>\n\n\n\n
Header, Navigation, \uacf5\ud1b5 Provider\ucc98\ub7fc \uc5ec\ub7ec \ud398\uc774\uc9c0\uc5d0\uc11c \uc720\uc9c0\ud574\uc57c \ud558\ub294 UI\ub97c Layout\uc5d0 \ubc30\uce58\ud560 \uc218 \uc788\ub2e4.<\/p>\n\n\n\n
\n\n\n\n
Server Component\uc640 Client Component<\/h2>\n\n\n\n
Next.js\ub97c \uc774\ud574\ud560 \ub54c \uac00\uc7a5 \uc911\uc694\ud55c \uac1c\ub150\uc774\ub2e4.<\/p>\n\n\n\n
App Router\uc5d0\uc11c\ub294 \ucef4\ud3ec\ub10c\ud2b8\uac00 \uae30\ubcf8\uc801\uc73c\ub85c Server Component\ub2e4.<\/p>\n\n\n\n
export default async function Page() {\n  const users = await getUsers();\n\n  return <UserList users={users} \/>;\n}\n<\/code><\/pre>\n\n\n\n
Server Component\ub294 \uc11c\ubc84\uc5d0\uc11c \uc2e4\ud589\ub418\ubbc0\ub85c \uc11c\ubc84\uc5d0\uc11c \ub370\uc774\ud130\uc5d0 \uc811\uadfc\ud558\uace0 UI\ub97c \uad6c\uc131\ud560 \uc218 \uc788\ub2e4.<\/p>\n\n\n\n
\ubc18\uba74 \ube0c\ub77c\uc6b0\uc800\uc5d0\uc11c \uc0c1\ud0dc\ub098 \uc0ac\uc6a9\uc790 \uc774\ubca4\ud2b8\ub97c \ucc98\ub9ac\ud574\uc57c \ud55c\ub2e4\uba74 Client Component\uac00 \ud544\uc694\ud558\ub2e4.<\/p>\n\n\n\n
'use client';\n\nimport { useState } from 'react';\n\nexport default function Counter() {\n  const [count, setCount] = useState(0);\n\n  return (\n    <button onClick={() => setCount(count + 1)}>\n      {count}\n    <\/button>\n  );\n}\n<\/code><\/pre>\n\n\n\n
\ub450 \ucef4\ud3ec\ub10c\ud2b8\uc758 \uc5ed\ud560\uc744 \ub2e8\uc21c\ud654\ud558\uba74 \ub2e4\uc74c\uacfc \uac19\ub2e4.<\/p>\n\n\n\n
Server Component -> Server Execution \/ Data Access \/ UI Generation\nClient Component -> Browser Execution \/ State \/ Event \/ Browser API\n<\/code><\/pre>\n\n\n\n
Next.js\uc5d0\uc11c\ub294 \uc774 \uacbd\uacc4\ub97c \uc5b4\ub514\uc5d0 \ub9cc\ub4e4 \uac83\uc778\uc9c0\uac00 \ub9e4\uc6b0 \uc911\uc694\ud558\ub2e4.<\/p>\n\n\n\n
\n\n\n\n
Client Component\uac00 \ud544\uc694\ud55c \uacbd\uc6b0<\/h2>\n\n\n\n
\ub2e4\uc74c\uacfc \uac19\uc740 \uae30\ub2a5\uc774 \ud544\uc694\ud558\uba74 Client Component\ub97c \uace0\ub824\ud55c\ub2e4.<\/p>\n\n\n\n
    \n
  • useState<\/code><\/li>\n\n\n\n
  • useEffect<\/code><\/li>\n\n\n\n
  • \uc0ac\uc6a9\uc790 \uc774\ubca4\ud2b8<\/li>\n\n\n\n
  • Browser API<\/li>\n\n\n\n
  • \ube0c\ub77c\uc6b0\uc800\uc5d0\uc11c \uc2e4\ud589\ub418\ub294 \ub77c\uc774\ube0c\ub7ec\ub9ac<\/li>\n<\/ul>\n\n\n\n
    \uc608\ub97c \ub4e4\uc5b4:<\/p>\n\n\n\n
    'use client';\n\nexport default function Button() {\n  return (\n    <button onClick={() => alert('Hello')}>\n      Click\n    <\/button>\n  );\n}\n<\/code><\/pre>\n\n\n\n
    \ubc18\ub300\ub85c \uc11c\ubc84\uc5d0\uc11c \ub370\uc774\ud130\ub97c \uac00\uc838\uc640 \ud45c\uc2dc\ud558\ub294 \uac83\uc774 \ubaa9\uc801\uc774\ub77c\uba74 Server Component\ub85c \ucda9\ubd84\ud55c \uacbd\uc6b0\uac00 \ub9ce\ub2e4.<\/p>\n\n\n\n
    Server Data Fetching -> Server Component\nUser Interaction -> Client Component\n<\/code><\/pre>\n\n\n\n
    Client Component\ub97c \ubb34\uc870\uac74 \ub9ce\uc774 \uc0ac\uc6a9\ud558\ub294 \uac83\uc774 \uc544\ub2c8\ub77c \ube0c\ub77c\uc6b0\uc800\uc5d0\uc11c \uc2e4\ud589\ub418\uc5b4\uc57c \ud558\ub294 \ucd5c\uc18c \ubc94\uc704\uc5d0 Client \uacbd\uacc4\ub97c \ub9cc\ub4dc\ub294 \uac83<\/strong>\uc774 \uc911\uc694\ud558\ub2e4.<\/p>\n\n\n\n
    \n\n\n\n
    Server Component\uc640 Client Component\uc758 \uad00\uacc4<\/h2>\n\n\n\n
    Server Component \uc548\uc5d0\uc11c Client Component\ub97c \uc0ac\uc6a9\ud560 \uc218 \uc788\ub2e4.<\/p>\n\n\n\n
    export default async function Page() {\n  const data = await getData();\n\n  return (\n    <div>\n      <h1>{data.title}<\/h1>\n      <Counter \/>\n    <\/div>\n  );\n}\n<\/code><\/pre>\n\n\n\n
    \uad6c\uc870\uc801\uc73c\ub85c \ubcf4\uba74:<\/p>\n\n\n\n
    Server Component -> Server UI \/ Client Component\n<\/code><\/pre>\n\n\n\n
    \uc11c\ubc84\uc5d0\uc11c \ub370\uc774\ud130\ub97c \uac00\uc838\uc628 \ub4a4 \uc0ac\uc6a9\uc790 \uc0c1\ud638\uc791\uc6a9\uc774 \ud544\uc694\ud55c \ubd80\ubd84\ub9cc Client Component\ub85c \ubd84\ub9ac\ud558\ub294 \uad6c\uc870\ub2e4.<\/p>\n\n\n\n
    \ubc18\ub300\ub85c Client Component\uc5d0\uc11c \uc11c\ubc84 \uc804\uc6a9 \uae30\ub2a5\uc744 \uc790\uc720\ub86d\uac8c \uc0ac\uc6a9\ud560 \uc218 \uc788\ub294 \uac83\uc740 \uc544\ub2c8\ub2e4.<\/p>\n\n\n\n
    \ub530\ub77c\uc11c Next.js\uc5d0\uc11c\ub294 \uc11c\ubc84\uc5d0\uc11c \ucc98\ub9ac\ud560 \ub85c\uc9c1\uacfc \ube0c\ub77c\uc6b0\uc800\uc5d0\uc11c \ucc98\ub9ac\ud560 \ub85c\uc9c1\uc744 \uad6c\ubd84\ud558\ub294 \uc124\uacc4<\/strong>\uac00 \uc911\uc694\ud558\ub2e4.<\/p>\n\n\n\n
    \n\n\n\n
    Data Fetching<\/h2>\n\n\n\n
    Server Component\uc5d0\uc11c\ub294 \uc11c\ubc84\uc5d0\uc11c \ub370\uc774\ud130\ub97c \uac00\uc838\uc624\ub294 \uad6c\uc870\ub97c \uc790\uc5f0\uc2a4\ub7fd\uac8c \ub9cc\ub4e4 \uc218 \uc788\ub2e4.<\/p>\n\n\n\n
    export default async function UsersPage() {\n  const response = await fetch('https:\/\/api.example.com\/users');\n  const users = await response.json();\n\n  return <UserList users={users} \/>;\n}\n<\/code><\/pre>\n\n\n\n
    \uc77c\ubc18\uc801\uc778 React SPA\uc5d0\uc11c\ub294 \ube0c\ub77c\uc6b0\uc800\uc5d0\uc11c API\ub97c \ud638\ucd9c\ud558\uace0 State\ub97c \ubcc0\uacbd\ud558\ub294 \ubc29\uc2dd\uc774 \ud754\ud558\ub2e4.<\/p>\n\n\n\n
    Next.js\uc5d0\uc11c\ub294 \uc11c\ubc84\uc5d0\uc11c \ub370\uc774\ud130\ub97c \uc870\ud68c\ud55c \ub4a4 UI\ub97c \uc0dd\uc131\ud560 \uc218 \uc788\ub2e4.<\/p>\n\n\n\n
    Browser -> Request -> Next.js Server -> API \/ Database -> Rendered UI -> Browser\n<\/code><\/pre>\n\n\n\n
    \uc11c\ubc84\uc5d0\uc11c \ucc98\ub9ac\ud560 \uc218 \uc788\ub294 \ub370\uc774\ud130 \uc870\ud68c\ub97c \uc11c\ubc84\uc5d0\uc11c \uc218\ud589\ud558\uba74 \ube0c\ub77c\uc6b0\uc800\uc5d0 \ubd88\ud544\uc694\ud55c \uc11c\ubc84 \uc804\uc6a9 \ub85c\uc9c1\uc774\ub098 \uc811\uadfc \uc815\ubcf4\ub97c \ub178\ucd9c\ud558\uc9c0 \uc54a\ub294 \ub370\ub3c4 \ub3c4\uc6c0\uc774 \ub41c\ub2e4.<\/p>\n\n\n\n
    \n\n\n\n
    Caching<\/h2>\n\n\n\n
    Next.js\uc5d0\uc11c\ub294 \ub370\uc774\ud130 \uc870\ud68c\uc640 \ud568\uaed8 \uce90\uc2f1\uc744 \uace0\ub824\ud574\uc57c \ud55c\ub2e4.<\/p>\n\n\n\n
    \uae30\ubcf8\uc801\uc778 \uac1c\ub150\uc740 \ub2e4\uc74c\uacfc \uac19\ub2e4.<\/p>\n\n\n\n
    Request -> Cache Hit -> Cached Data\nRequest -> Cache Miss -> Fetch Data\n<\/code><\/pre>\n\n\n\n
    \ub2e4\ub9cc Next.js\uc758 \uce90\uc2f1 \ub3d9\uc791\uc740 \ubc84\uc804\uacfc \uc0ac\uc6a9\ud558\ub294 API\uc5d0 \ub530\ub77c \ub2ec\ub77c\uc9c8 \uc218 \uc788\ub2e4.<\/p>\n\n\n\n
    \ub530\ub77c\uc11c \uacfc\uac70 \ubc84\uc804\uc758 fetch<\/code> \uce90\uc2f1 \ub3d9\uc791\uc744 \uc554\uae30\ud558\ub294 \uac83\ubcf4\ub2e4 \ud604\uc7ac \ud504\ub85c\uc81d\ud2b8\uc5d0\uc11c \uc0ac\uc6a9\ud558\ub294 Next.js \ubc84\uc804\uc758 \uacf5\uc2dd \ubb38\uc11c\uc640 \uc2e4\uc81c \uc124\uc815\uc744 \uae30\uc900\uc73c\ub85c \ud310\ub2e8\ud558\ub294 \uac83<\/strong>\uc774 \uc911\uc694\ud558\ub2e4.<\/p>\n\n\n\n
    revalidate<\/code>, no-store<\/code> \ub4f1\ub3c4 \uc774\ub7ec\ud55c \uce90\uc2f1\uacfc \ub370\uc774\ud130 \uc2e0\uc120\ub3c4 \uc815\ucc45\uc744 \uacb0\uc815\ud558\ub294 \ub370 \uc0ac\uc6a9\ub41c\ub2e4.<\/p>\n\n\n\n
    \n\n\n\n
    Static Rendering\uacfc Dynamic Rendering<\/h2>\n\n\n\n
    Next.js\uc5d0\uc11c\ub294 \ud398\uc774\uc9c0\ub97c \uc815\uc801\uc778 \uacb0\uacfc\ub85c \uc0dd\uc131\ud560 \uc218\ub3c4 \uc788\uace0 \uc694\uccad \uc2dc \ub3d9\uc801\uc73c\ub85c \uc0dd\uc131\ud560 \uc218\ub3c4 \uc788\ub2e4.<\/p>\n\n\n\n
    \uc815\uc801\uc778 \ud398\uc774\uc9c0\ub294 \ubbf8\ub9ac \uc0dd\uc131\ud560 \uc218 \uc788\ub2e4.<\/p>\n\n\n\n
    Build Time -> HTML Generation -> User Request -> HTML Response\n<\/code><\/pre>\n\n\n\n
    \uc694\uccad\uc5d0 \ub530\ub77c \uacb0\uacfc\uac00 \ub2ec\ub77c\uc9c0\ub294 \ud398\uc774\uc9c0\ub294 \uc11c\ubc84\uc5d0\uc11c \ub3d9\uc801\uc73c\ub85c \ucc98\ub9ac\ud560 \uc218 \uc788\ub2e4.<\/p>\n\n\n\n
    User Request -> Server -> Data Fetch -> Render -> Response\n<\/code><\/pre>\n\n\n\n
    \uc5b4\ub5a4 \ub80c\ub354\ub9c1 \ubc29\uc2dd\uc744 \uc0ac\uc6a9\ud560\uc9c0\ub294 \ub370\uc774\ud130\uc758 \ud2b9\uc131, \uce90\uc2f1 \uc815\ucc45, \uc0ac\uc6a9\uc790\ubcc4 \ub370\uc774\ud130 \uc5ec\ubd80 \ub4f1\uc5d0 \ub530\ub77c \uacb0\uc815\ub41c\ub2e4.<\/p>\n\n\n\n
    \n\n\n\n
    Streaming\uacfc Suspense<\/h2>\n\n\n\n
    \uc11c\ubc84\uc5d0\uc11c \ud398\uc774\uc9c0 \uc804\uccb4\uac00 \uc900\ube44\ub420 \ub54c\uae4c\uc9c0 \uae30\ub2e4\ub9b4 \ud544\uc694\uac00 \uc5c6\ub294 \uacbd\uc6b0 Streaming\uc744 \uc0ac\uc6a9\ud560 \uc218 \uc788\ub2e4.<\/p>\n\n\n\n
    \uc608\ub97c \ub4e4\uc5b4 Header\ub294 \ube60\ub974\uac8c \uc900\ube44\ub418\uc9c0\ub9cc \uc0ac\uc6a9\uc790 \ubaa9\ub85d\uc740 \ub290\ub9ac\ub2e4\uace0 \ud558\uc790.<\/p>\n\n\n\n
    Request -> Header \/ Main Content \/ Slow Data\n<\/code><\/pre>\n\n\n\n
    \ub290\ub9b0 \ub370\uc774\ud130 \ub54c\ubb38\uc5d0 \uc804\uccb4 \ud398\uc774\uc9c0\ub97c \uae30\ub2e4\ub9ac\ub294 \ub300\uc2e0 \uc900\ube44\ub41c UI\ubd80\ud130 \uc804\ub2ec\ud560 \uc218 \uc788\ub2e4.<\/p>\n\n\n\n
    React\uc758 Suspense<\/code>\uc640 \ud568\uaed8 \uc0ac\uc6a9\ud558\uba74 \ud2b9\uc815 \uc601\uc5ed\uc758 Loading UI\ub97c \ubd84\ub9ac\ud560 \uc218 \uc788\ub2e4.<\/p>\n\n\n\n
    <Suspense fallback={<Loading \/>}>\n  <UserList \/>\n<\/Suspense>\n<\/code><\/pre>\n\n\n\n
    \uc774 \ubc29\uc2dd\uc740 \ub370\uc774\ud130 \uc870\ud68c \uc2dc\uac04\uc774 \uc11c\ub85c \ub2e4\ub978 \ud398\uc774\uc9c0\uc5d0\uc11c \ud2b9\ud788 \uc720\uc6a9\ud558\ub2e4.<\/p>\n\n\n\n
    \n\n\n\n
    Loading\uacfc Error \ucc98\ub9ac<\/h2>\n\n\n\n
    App Router\uc5d0\uc11c\ub294 \ud30c\uc77c \uae30\ubc18\uc73c\ub85c Loading\uacfc Error UI\ub97c \uad6c\uc131\ud560 \uc218 \uc788\ub2e4.<\/p>\n\n\n\n
    Route -> page.tsx \/ loading.tsx \/ error.tsx\n<\/code><\/pre>\n\n\n\n
    loading.tsx<\/code>\ub294 \ud574\ub2f9 Route\uc758 \ub85c\ub529 \uc0c1\ud0dc\ub97c \ud45c\ud604\ud558\uace0 error.tsx<\/code>\ub294 \uc624\ub958 \uc0c1\ud669\uc744 \ucc98\ub9ac\ud558\ub294 UI\ub97c \uad6c\uc131\ud55c\ub2e4.<\/p>\n\n\n\n
    \ud398\uc774\uc9c0 \ub0b4\ubd80\uc5d0\uc11c \ubaa8\ub4e0 \uc0c1\ud0dc\ub97c \uc9c1\uc811 \uad00\ub9ac\ud558\ub294 \uac83\ubcf4\ub2e4 Route \uad6c\uc870\uc640 \uc0c1\ud0dc \ucc98\ub9ac\ub97c \uc5f0\uacb0\ud560 \uc218 \uc788\ub2e4\ub294 \uc7a5\uc810\uc774 \uc788\ub2e4.<\/p>\n\n\n\n
    \n\n\n\n
    Route Handler<\/h2>\n\n\n\n
    Next.js\uc5d0\uc11c\ub294 API Endpoint\ub3c4 \uc9c1\uc811 \ub9cc\ub4e4 \uc218 \uc788\ub2e4.<\/p>\n\n\n\n
    \uc608\ub97c \ub4e4\uc5b4:<\/p>\n\n\n\n
    app -> api\/users\/route.ts\n<\/code><\/pre>\n\n\n\n
    export async function GET() {\n  const users = await getUsers();\n\n  return Response.json(users);\n}\n<\/code><\/pre>\n\n\n\n
    \uadf8\ub7ec\uba74 \ud574\ub2f9 Route\uc5d0\uc11c HTTP \uc694\uccad\uc744 \ucc98\ub9ac\ud560 \uc218 \uc788\ub2e4.<\/p>\n\n\n\n
    Client -> \/api\/users -> Route Handler -> Database \/ External API\n<\/code><\/pre>\n\n\n\n
    \uac04\ub2e8\ud55c Backend API, Webhook, \uc678\ubd80 API \uc911\uacc4 \ub4f1\uc758 \uc6a9\ub3c4\ub85c \uc0ac\uc6a9\ud560 \uc218 \uc788\ub2e4.<\/p>\n\n\n\n
    \ub2e4\ub9cc Route Handler\uac00 \ubcc4\ub3c4\uc758 Backend\ub97c \ud56d\uc0c1 \ub300\uccb4\ud574\uc57c \ud55c\ub2e4\ub294 \uc758\ubbf8\ub294 \uc544\ub2c8\ub2e4.<\/p>\n\n\n\n
    \uc11c\ube44\uc2a4 \uaddc\ubaa8\uac00 \ucee4\uc9c0\uace0 \ubcf5\uc7a1\ud55c \ube44\uc988\ub2c8\uc2a4 \ub85c\uc9c1\uc774\ub098 \ub3c5\ub9bd\uc801\uc778 Backend\uac00 \ud544\uc694\ud558\ub2e4\uba74 \ubcc4\ub3c4\uc758 Backend \uc11c\ubc84\ub97c \uc0ac\uc6a9\ud558\ub294 \uac83\ub3c4 \ucda9\ubd84\ud788 \ud569\ub9ac\uc801\uc778 \uad6c\uc870\ub2e4.<\/p>\n\n\n\n
    \n\n\n\n
    Server Action<\/h2>\n\n\n\n
    Server Action\uc740 \uc11c\ubc84\uc5d0\uc11c \uc2e4\ud589\ub418\ub294 \ud568\uc218\ub97c UI\uc640 \uc5f0\uacb0\ud560 \uc218 \uc788\uac8c \ud574\uc900\ub2e4.<\/p>\n\n\n\n
    \uc608\ub97c \ub4e4\uc5b4 Form \uc81c\ucd9c\uc744 \uc11c\ubc84 \ud568\uc218\uc640 \uc5f0\uacb0\ud560 \uc218 \uc788\ub2e4.<\/p>\n\n\n\n
    <form action={createUser}>\n  <input name=\"name\" \/>\n  <button type=\"submit\">\n    Create\n  <\/button>\n<\/form>\n<\/code><\/pre>\n\n\n\n
    \uc11c\ubc84\uc5d0\uc11c\ub294:<\/p>\n\n\n\n
    'use server';\n\nexport async function createUser(formData: FormData) {\n  const name = formData.get('name');\n\n  \/\/ Database \ucc98\ub9ac\n}\n<\/code><\/pre>\n\n\n\n
    \uc804\uccb4 \ud750\ub984\uc740 \ub2e4\uc74c\uacfc \uac19\ub2e4.<\/p>\n\n\n\n
    User -> Form -> Server Action -> Database\n<\/code><\/pre>\n\n\n\n
    \uac04\ub2e8\ud55c \ub370\uc774\ud130 \ubcc0\uacbd \uc791\uc5c5\uc5d0\uc11c\ub294 \ubcc4\ub3c4\uc758 API Endpoint\ub97c \uc9c1\uc811 \ub9cc\ub4dc\ub294 \uac83\ubcf4\ub2e4 \ud3b8\ub9ac\ud560 \uc218 \uc788\ub2e4.<\/p>\n\n\n\n
    \ub2e4\ub9cc Server Action \uc5ed\uc2dc \uc11c\ubc84\uc5d0\uc11c \uc2e4\ud589\ub41c\ub2e4\uace0 \ud574\uc11c \uc790\ub3d9\uc73c\ub85c \uc548\uc804\ud55c \uac83\uc740 \uc544\ub2c8\ub2e4.<\/p>\n\n\n\n
    \uc778\uc99d\uacfc \uad8c\ud55c \uac80\uc99d\uc744 \ubc18\ub4dc\uc2dc \uace0\ub824\ud574\uc57c \ud55c\ub2e4.<\/p>\n\n\n\n
    \n\n\n\n
    Dynamic Route<\/h2>\n\n\n\n
    URL\uc758 \uc77c\ubd80\ub97c \ub370\uc774\ud130\ub85c \uc0ac\uc6a9\ud558\ub294 \uacbd\uc6b0 Dynamic Segment\ub97c \uc0ac\uc6a9\ud560 \uc218 \uc788\ub2e4.<\/p>\n\n\n\n
    app -> users\/[id]\/page.tsx\n<\/code><\/pre>\n\n\n\n
    \uc774 \uad6c\uc870\ub294 \ub2e4\uc74c\uacfc \uac19\uc740 URL\uc744 \ucc98\ub9ac\ud560 \uc218 \uc788\ub2e4.<\/p>\n\n\n\n
    \/users\/1\n\/users\/2\n\/users\/3\n<\/code><\/pre>\n\n\n\n
    \ud398\uc774\uc9c0\uc5d0\uc11c\ub294 Route Parameter\ub97c \ubc1b\uc544 \uc0ac\uc6a9\ud560 \uc218 \uc788\ub2e4.<\/p>\n\n\n\n
    export default async function UserPage({\n  params,\n}: {\n  params: Promise<{ id: string }>;\n}) {\n  const { id } = await params;\n\n  return <div>User: {id}<\/div>;\n}\n<\/code><\/pre>\n\n\n\n
    Next.js \ubc84\uc804\uc5d0 \ub530\ub77c params<\/code> \ub4f1\uc758 API \uc0ac\uc6a9 \ubc29\uc2dd\uc774 \ubcc0\uacbd\ub420 \uc218 \uc788\uc73c\ubbc0\ub85c \uc2e4\uc81c \ud504\ub85c\uc81d\ud2b8\uc5d0\uc11c\ub294 \ud574\ub2f9 \ubc84\uc804\uc758 \uacf5\uc2dd \ubb38\uc11c\ub97c \uae30\uc900\uc73c\ub85c \uc791\uc131\ud574\uc57c \ud55c\ub2e4.<\/p>\n\n\n\n
    \n\n\n\n
    Metadata\uc640 SEO<\/h2>\n\n\n\n
    Next.js\uc5d0\uc11c\ub294 \ud398\uc774\uc9c0 Metadata\ub97c \ucf54\ub4dc\ub85c \uad00\ub9ac\ud560 \uc218 \uc788\ub2e4.<\/p>\n\n\n\n
    export const metadata = {\n  title: 'User',\n  description: 'User page',\n};\n<\/code><\/pre>\n\n\n\n
    \ud398\uc774\uc9c0\ubcc4 title, description \ub4f1\uc758 \uc815\ubcf4\ub97c \uad00\ub9ac\ud560 \uc218 \uc788\uae30 \ub54c\ubb38\uc5d0 \uac80\uc0c9 \uc5d4\uc9c4\uacfc \ub9c1\ud06c \uacf5\uc720\uc5d0 \ud544\uc694\ud55c Metadata\ub97c \uad6c\uc131\ud558\uae30 \ud3b8\ud558\ub2e4.<\/p>\n\n\n\n
    React SPA\uc5d0\uc11c\ub3c4 \uad6c\ud604\ud560 \uc218 \uc788\uc9c0\ub9cc Next.js\uc5d0\uc11c\ub294 \ud504\ub808\uc784\uc6cc\ud06c \uad6c\uc870\uc640 \uc790\uc5f0\uc2a4\ub7fd\uac8c \uc5f0\uacb0\ub41c\ub2e4.<\/p>\n\n\n\n
    \n\n\n\n
    Image Optimization<\/h2>\n\n\n\n
    Next.js\uc5d0\uc11c\ub294 next\/image<\/code>\ub97c \ud1b5\ud574 \uc774\ubbf8\uc9c0 \ucd5c\uc801\ud654 \uae30\ub2a5\uc744 \uc0ac\uc6a9\ud560 \uc218 \uc788\ub2e4.<\/p>\n\n\n\n
    import Image from 'next\/image';\n\n<Image\n  src=\"\/profile.png\"\n  alt=\"Profile\"\n  width={200}\n  height={200}\n\/>\n<\/code><\/pre>\n\n\n\n
    \uc774\ubbf8\uc9c0 \ud06c\uae30\uc640 \ub85c\ub529 \ub4f1\uc758 \ucd5c\uc801\ud654 \uae30\ub2a5\uc744 \ud504\ub808\uc784\uc6cc\ud06c \uc218\uc900\uc5d0\uc11c \uc0ac\uc6a9\ud560 \uc218 \uc788\ub2e4.<\/p>\n\n\n\n
    \uc6f9 \uc560\ud50c\ub9ac\ucf00\uc774\uc158\uc5d0\uc11c\ub294 \uc774\ubbf8\uc9c0\uac00 \ub124\ud2b8\uc6cc\ud06c \uc804\uc1a1\ub7c9\uacfc \ucd08\uae30 \ub85c\ub529 \uc131\ub2a5\uc5d0 \ud070 \uc601\ud5a5\uc744 \uc904 \uc218 \uc788\uae30 \ub54c\ubb38\uc5d0 \uc774\ubbf8\uc9c0 \ucc98\ub9ac\ub3c4 \uc911\uc694\ud55c \ucd5c\uc801\ud654 \uc601\uc5ed\uc774\ub2e4.<\/p>\n\n\n\n
    \n\n\n\n
    Static Assets<\/h2>\n\n\n\n
    \uc815\uc801 \ud30c\uc77c\uc740 \uc77c\ubc18\uc801\uc73c\ub85c public<\/code> \ub514\ub809\ud130\ub9ac\uc5d0 \ubc30\uce58\ud560 \uc218 \uc788\ub2e4.<\/p>\n\n\n\n
    public -> images \/ icons \/ fonts\n<\/code><\/pre>\n\n\n\n
    \uc608\ub97c \ub4e4\uc5b4:<\/p>\n\n\n\n
    public\/images\/logo.png -> \/images\/logo.png\n<\/code><\/pre>\n\n\n\n
    Next.js\uc5d0\uc11c\ub294 Font \ucd5c\uc801\ud654 \uae30\ub2a5\ub3c4 \uc81c\uacf5\ud55c\ub2e4.<\/p>\n\n\n\n
    \uc774\ubbf8\uc9c0\uc640 Font\ub294 \ucd08\uae30 \ub85c\ub529 \uc131\ub2a5\uc5d0 \uc9c1\uc811\uc801\uc778 \uc601\ud5a5\uc744 \uc904 \uc218 \uc788\uae30 \ub54c\ubb38\uc5d0 \ud544\uc694\ud55c \ub9ac\uc18c\uc2a4\ub9cc \uc801\uc808\ud558\uac8c \ub85c\ub4dc\ud558\ub294 \uac83\uc774 \uc911\uc694\ud558\ub2e4.<\/p>\n\n\n\n
    \n\n\n\n
    \uc778\uc99d\uacfc \uad8c\ud55c<\/h2>\n\n\n\n
    Next.js\uc5d0\uc11c \uc778\uc99d\uacfc \uad8c\ud55c\uc740 \uad6c\ubd84\ud574\uc11c \uc0dd\uac01\ud574\uc57c \ud55c\ub2e4.<\/p>\n\n\n\n
    Authentication -> \ub204\uad6c\uc778\uac00?\nAuthorization -> \ubb34\uc5c7\uc744 \ud560 \uc218 \uc788\ub294\uac00?\n<\/code><\/pre>\n\n\n\n
    \uc608\ub97c \ub4e4\uc5b4 \uad00\ub9ac\uc790 \ud398\uc774\uc9c0 \uc811\uadfc\uc744 \ucc98\ub9ac\ud55c\ub2e4\uba74:<\/p>\n\n\n\n
    Request -> Session \ud655\uc778 -> User \ud655\uc778 -> Permission \ud655\uc778 -> Resource \uc811\uadfc\n<\/code><\/pre>\n\n\n\n
    Client Component\uc5d0\uc11c \uad00\ub9ac\uc790 \ubc84\ud2bc\uc744 \uc228\uae30\ub294 \uac83\ub9cc\uc73c\ub85c \uad8c\ud55c \uc81c\uc5b4\uac00 \ub05d\ub098\ub294 \uac83\uc740 \uc544\ub2c8\ub2e4.<\/p>\n\n\n\n
    \uc2e4\uc81c \ub370\uc774\ud130 \uc811\uadfc\uc774\ub098 Server Action, Route Handler \ub4f1 \uc11c\ubc84\uc5d0\uc11c \uc2e4\ud589\ub418\ub294 \uc9c0\uc810\uc5d0\uc11c\ub3c4 \uad8c\ud55c\uc744 \uac80\uc99d\ud574\uc57c \ud55c\ub2e4.<\/p>\n\n\n\n
    \n\n\n\n
    \ud658\uacbd \ubcc0\uc218<\/h2>\n\n\n\n
    Next.js\uc5d0\uc11c\ub294 \uc11c\ubc84 \uc804\uc6a9 \ud658\uacbd \ubcc0\uc218\uc640 \ud074\ub77c\uc774\uc5b8\ud2b8\uc5d0 \uacf5\uac1c\ub418\ub294 \ud658\uacbd \ubcc0\uc218\ub97c \uad6c\ubd84\ud574\uc57c \ud55c\ub2e4.<\/p>\n\n\n\n
    DATABASE_URL -> Server Only\nNEXT_PUBLIC_API_URL -> Client Accessible\n<\/code><\/pre>\n\n\n\n
    NEXT_PUBLIC_<\/code>\uc73c\ub85c \uc2dc\uc791\ud558\ub294 \ud658\uacbd \ubcc0\uc218\ub294 \ud074\ub77c\uc774\uc5b8\ud2b8 \ubc88\ub4e4\uc5d0 \ud3ec\ud568\ub420 \uc218 \uc788\ub2e4.<\/p>\n\n\n\n
    \ub530\ub77c\uc11c Database Password, Secret Key \uac19\uc740 \ubbfc\uac10\ud55c \uc815\ubcf4\ub294 \uacf5\uac1c \ud658\uacbd \ubcc0\uc218\uc5d0 \ub123\uc5b4\uc11c\ub294 \uc548 \ub41c\ub2e4.<\/p>\n\n\n\n
    Secret -> Server\nPublic Config -> Server \/ Browser\n<\/code><\/pre>\n\n\n\n
    \uc11c\ubc84\uc640 \ud074\ub77c\uc774\uc5b8\ud2b8\uc758 \uacbd\uacc4\ub97c \uc774\ud574\ud574\uc57c \ud558\ub294 \ub300\ud45c\uc801\uc778 \uc774\uc720\ub2e4.<\/p>\n\n\n\n
    \n\n\n\n
    \ud504\ub85c\uc81d\ud2b8 \uad6c\uc870<\/h2>\n\n\n\n
    Next.js \ud504\ub85c\uc81d\ud2b8\ub294 \uaddc\ubaa8\uc640 \ud300\uc758 \uc124\uacc4 \ubc29\uc2dd\uc5d0 \ub530\ub77c \ub2e4\uc591\ud55c \uad6c\uc870\ub97c \uc0ac\uc6a9\ud560 \uc218 \uc788\ub2e4.<\/p>\n\n\n\n
    \uc608\ub97c \ub4e4\uc5b4:<\/p>\n\n\n\n
    src -> app \/ components \/ features \/ lib \/ types\n<\/code><\/pre>\n\n\n\n
    app<\/code>\uc740 Route\uc640 \ud398\uc774\uc9c0 \uad6c\uc870\ub97c \ub2f4\ub2f9\ud558\uace0, components<\/code>\ub294 \uacf5\ud1b5 UI, features<\/code>\ub294 \uae30\ub2a5 \ub2e8\uc704 \ucf54\ub4dc, lib<\/code>\ub294 \uacf5\ud1b5 \uc11c\ubc84\ub098 \uc720\ud2f8\ub9ac\ud2f0 \ucf54\ub4dc \ub4f1\uc744 \ubc30\uce58\ud558\ub294 \uc2dd\uc73c\ub85c \uad6c\uc131\ud560 \uc218 \uc788\ub2e4.<\/p>\n\n\n\n
    \uc911\uc694\ud55c \uac83\uc740 \ud2b9\uc815 \ud3f4\ub354 \uad6c\uc870\ub97c \uc554\uae30\ud558\ub294 \uac83\uc774 \uc544\ub2c8\ub2e4.<\/p>\n\n\n\n
    UI, \ub370\uc774\ud130 \uc811\uadfc, \uc11c\ubc84 \ub85c\uc9c1, \ud074\ub77c\uc774\uc5b8\ud2b8 \ub85c\uc9c1\uc758 \ucc45\uc784\uc744 \uc801\uc808\ud558\uac8c \ubd84\ub9ac\ud558\ub294 \uac83<\/strong>\uc774 \ud575\uc2ec\uc774\ub2e4.<\/p>\n\n\n\n
    \n\n\n\n
    React\uc640 Next.js\uc758 \ucc28\uc774<\/h2>\n\n\n\n
    React\uc640 Next.js\uc758 \uad00\uacc4\ub294 \ub2e4\uc74c\ucc98\ub7fc \ubcfc \uc218 \uc788\ub2e4.<\/p>\n\n\n\n
    React -> UI Library\nNext.js -> React + Routing \/ Rendering \/ Server Features \/ Data Fetching \/ Optimization\n<\/code><\/pre>\n\n\n\n
    React\ub9cc\uc73c\ub85c\ub3c4 \uc6f9 \uc560\ud50c\ub9ac\ucf00\uc774\uc158\uc744 \ub9cc\ub4e4 \uc218 \uc788\ub2e4.<\/p>\n\n\n\n
    Next.js\ub294 React\ub97c \uae30\ubc18\uc73c\ub85c \uc2e4\uc81c \uc6f9 \uc560\ud50c\ub9ac\ucf00\uc774\uc158\uc744 \uac1c\ubc1c\ud558\uba74\uc11c \ubc18\ubcf5\uc801\uc73c\ub85c \ud544\uc694\ud55c \uae30\ub2a5\uacfc \uc11c\ubc84 \uc2e4\ud589 \ud658\uacbd\uc744 \ud558\ub098\uc758 \ud504\ub808\uc784\uc6cc\ud06c\ub85c \ud1b5\ud569\ud55c\ub2e4.<\/p>\n\n\n\n
    \ub530\ub77c\uc11c Next.js\ub97c \ub2e8\uc21c\ud788 React\uc758 \uc0c1\uc704 \ubc84\uc804<\/strong>\uc774\ub77c\uace0 \uc774\ud574\ud558\uba74 \uc548 \ub41c\ub2e4.<\/p>\n\n\n\n
    React\ub294 UI\ub97c \uad6c\uc131\ud558\ub294 \ud575\uc2ec \ub77c\uc774\ube0c\ub7ec\ub9ac\uc774\uace0, Next.js\ub294 React\ub97c \uae30\ubc18\uc73c\ub85c \uc6f9 \uc560\ud50c\ub9ac\ucf00\uc774\uc158 \uc804\uccb4\ub97c \uad6c\uc131\ud558\uae30 \uc704\ud55c \ud504\ub808\uc784\uc6cc\ud06c\ub2e4.<\/p>\n\n\n\n
    \n\n\n\n
    Next.js\uc758 \ud575\uc2ec \uad6c\uc870<\/h2>\n\n\n\n
    Next.js\ub97c \uac00\uc7a5 \ub2e8\uc21c\ud558\uac8c \ud45c\ud604\ud558\uba74 \ub2e4\uc74c\uacfc \uac19\ub2e4.<\/p>\n\n\n\n
    Browser -> Next.js -> Server \/ Client -> Data -> UI\n<\/code><\/pre>\n\n\n\n
    \uc880 \ub354 \uad6c\uccb4\uc801\uc73c\ub85c \ubcf4\uba74:<\/p>\n\n\n\n
    Request -> App Router -> Layout \/ Page -> Server Component \/ Client Component -> UI\n<\/code><\/pre>\n\n\n\n
    \uc11c\ubc84 \ub370\uc774\ud130\uac00 \ud544\uc694\ud558\uba74:<\/p>\n\n\n\n
    Server Component -> Database \/ External API -> Render -> Browser\n<\/code><\/pre>\n\n\n\n
    \uc0ac\uc6a9\uc790 \uc0c1\ud638\uc791\uc6a9\uc774 \ud544\uc694\ud558\uba74:<\/p>\n\n\n\n
    Client Component -> Event -> State Update -> Render\n<\/code><\/pre>\n\n\n\n
    \ub370\uc774\ud130 \ubcc0\uacbd\uc774 \ud544\uc694\ud558\uba74:<\/p>\n\n\n\n
    Client -> Server Action \/ Route Handler -> Database -> Updated State -> UI\n<\/code><\/pre>\n\n\n\n
    \n\n\n\n
    Next.js\uc5d0\uc11c \uac00\uc7a5 \uc911\uc694\ud55c \uacbd\uacc4<\/h2>\n\n\n\n
    Next.js\ub97c \uacf5\ubd80\ud560 \ub54c \uac00\uc7a5 \uba3c\uc800 \uc774\ud574\ud574\uc57c \ud558\ub294 \uac83\uc740 Server\uc640 Client\uc758 \uacbd\uacc4<\/strong>\ub2e4.<\/p>\n\n\n\n
    \uc11c\ubc84\uc5d0\uc11c \ucc98\ub9ac\ud558\uae30 \uc801\ud569\ud55c \uac83\uc740:<\/p>\n\n\n\n
    Server -> Database \/ Secret \/ Authentication \/ Data Fetching \/ Server Logic\n<\/code><\/pre>\n\n\n\n
    \ube0c\ub77c\uc6b0\uc800\uc5d0\uc11c \ucc98\ub9ac\ud574\uc57c \ud558\ub294 \uac83\uc740:<\/p>\n\n\n\n
    Client -> Interaction \/ State \/ Event \/ Browser API\n<\/code><\/pre>\n\n\n\n
    \uadf8\ub9ac\uace0 UI\ub294 \uc774 \ub458\uc744 \uc870\ud569\ud574\uc11c \uad6c\uc131\ud55c\ub2e4.<\/p>\n\n\n\n
    Server Component -> Server UI \/ Client Component\n<\/code><\/pre>\n\n\n\n
    \uc774 \uacbd\uacc4\ub97c \uae30\uc900\uc73c\ub85c \uc0dd\uac01\ud558\uba74 Server Component<\/code>, Client Component<\/code>, Server Action<\/code>, Route Handler<\/code>, Caching<\/code>, Rendering<\/code> \uac19\uc740 \uae30\ub2a5\ub4e4\uc774 \uc11c\ub85c \ub3c5\ub9bd\uc801\uc778 API\uac00 \uc544\ub2c8\ub77c \ud558\ub098\uc758 \uad6c\uc870 \uc548\uc5d0\uc11c \uc5f0\uacb0\ub41c\ub2e4.<\/p>\n\n\n\n
    \n\n\n\n
    \uc815\ub9ac<\/h2>\n\n\n\n
    Next.js\ub97c \uacf5\ubd80\ud560 \ub54c \uac00\uc7a5 \uba3c\uc800 \uc7a1\uc544\uc57c \ud558\ub294 \uac83\uc740 API \ubaa9\ub85d\uc774 \uc544\ub2c8\ub2e4.<\/p>\n\n\n\n
    \uc5b4\ub514\uc5d0\uc11c \ucf54\ub4dc\uac00 \uc2e4\ud589\ub418\ub294\uac00<\/strong>\ub97c \uba3c\uc800 \uc774\ud574\ud574\uc57c \ud55c\ub2e4.<\/p>\n\n\n\n
    Server -> Data \/ Database \/ Authentication \/ Server Logic\nClient -> State \/ Event \/ Browser API \/ Interaction\n<\/code><\/pre>\n\n\n\n
    React\uc758 \uae30\ubcf8 \ud750\ub984\uc740:<\/p>\n\n\n\n
    State -> Render -> UI -> Event -> State Update -> Render\n<\/code><\/pre>\n\n\n\n
    Next.js\uc5d0\uc11c\ub294 \uc5ec\uae30\uc5d0 Server\uc640 Client\uc758 \uc2e4\ud589 \ud658\uacbd\uc774 \ucd94\uac00\ub41c\ub2e4.<\/p>\n\n\n\n
    Request -> Route -> Server \/ Client -> Data -> Render -> Browser\n<\/code><\/pre>\n\n\n\n
    App Router\ub294 URL\uacfc \ud398\uc774\uc9c0 \uad6c\uc870\ub97c \uc5f0\uacb0\ud558\uace0, Server Component\ub294 \uc11c\ubc84\uc5d0\uc11c \ub370\uc774\ud130\uc640 UI\ub97c \ucc98\ub9ac\ud558\uba70, Client Component\ub294 \ube0c\ub77c\uc6b0\uc800\uc758 \uc0c1\ud0dc\uc640 \uc0ac\uc6a9\uc790 \uc0c1\ud638\uc791\uc6a9\uc744 \ub2f4\ub2f9\ud55c\ub2e4.<\/p>\n\n\n\n
    Route Handler\ub294 HTTP API\ub97c \uc81c\uacf5\ud558\uace0 Server Action\uc740 \uc11c\ubc84\uc5d0\uc11c \uc2e4\ud589\ub418\ub294 \ub370\uc774\ud130 \ubcc0\uacbd \ub85c\uc9c1\uc744 UI\uc640 \uc5f0\uacb0\ud55c\ub2e4.<\/p>\n\n\n\n
    Caching\uacfc Rendering\uc740 \ub370\uc774\ud130\ub97c \uc5b8\uc81c \uac00\uc838\uc624\uace0 \uacb0\uacfc\ub97c \uc5bc\ub9c8\ub098 \uc7ac\uc0ac\uc6a9\ud560 \uac83\uc778\uc9c0 \uacb0\uc815\ud558\uba70, Metadata\uc640 Image Optimization\uc740 \uc6f9 \uc560\ud50c\ub9ac\ucf00\uc774\uc158\uc758 SEO\uc640 \uc131\ub2a5\uc744 \ubcf4\uc644\ud55c\ub2e4.<\/p>\n\n\n\n
    \uacb0\uad6d Next.js\uc5d0\uc11c \uac00\uc7a5 \uc911\uc694\ud55c \uc124\uacc4 \ud310\ub2e8\uc740 \ud558\ub098\ub85c \uc555\ucd95\ud560 \uc218 \uc788\ub2e4.<\/p>\n\n\n\n
    \uc774 \ub85c\uc9c1\uc744 \uc11c\ubc84\uc5d0\uc11c \uc2e4\ud589\ud560 \uac83\uc778\uac00, \ube0c\ub77c\uc6b0\uc800\uc5d0\uc11c \uc2e4\ud589\ud560 \uac83\uc778\uac00.<\/strong><\/p>\n\n\n\n
    \uc774 \uacbd\uacc4\ub97c \uc81c\ub300\ub85c \uc7a1\uc73c\uba74 Next.js\uc758 \ub098\uba38\uc9c0 \uae30\ub2a5\ub4e4\uc740 \uadf8 \uc704\uc5d0\uc11c \uc790\uc5f0\uc2a4\ub7fd\uac8c \uc5f0\uacb0\ub41c\ub2e4.<\/p>\n","protected":false},"excerpt":{"rendered":"
    React\ub85c \uc6f9 \uc560\ud50c\ub9ac\ucf00\uc774\uc158\uc744 \ub9cc\ub4e4\ub2e4 \ubcf4\uba74 UI \uc678\uc5d0\ub3c4 \uc9c1\uc811 \ud574\uacb0\ud574\uc57c \ud560 \ubb38\uc81c\uac00 \ub298\uc5b4\ub09c\ub2e4. \ub77c\uc6b0\ud305, \uc11c\ubc84 \ub80c\ub354\ub9c1, \ub370\uc774\ud130 \uc870\ud68c, SEO, API, \uc778\uc99d, \uce90\uc2f1, \uc774\ubbf8\uc9c0 \ucd5c\uc801\ud654, \ubc30\ud3ec \ub4f1\uc774 \ub300\ud45c\uc801\uc774\ub2e4. Next.js\ub294 \uc774\ub7f0 \uc6f9 \uc560\ud50c\ub9ac\ucf00\uc774\uc158 \uac1c\ubc1c\uc5d0 \ud544\uc694\ud55c \uae30\ub2a5\uc744 React \uc704\uc5d0 \ud1b5\ud569\ud55c \ud504\ub808\uc784\uc6cc\ud06c\ub2e4. \ub530\ub77c\uc11c Next.js\ub97c \uacf5\ubd80\ud560 \ub54c API\ub97c \ud558\ub098\uc529 \uc678\uc6b0\uae30\ubcf4\ub2e4 \uba3c\uc800 \uc11c\ubc84\uc640 \ud074\ub77c\uc774\uc5b8\ud2b8\uc758 \uacbd\uacc4\ub97c \uc774\ud574\ud558\ub294 \uac83\uc774 \uc911\uc694\ud558\ub2e4. Next.js\uc758 \ud575\uc2ec\uc740 React\uc5d0 \uc11c\ubc84 […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[49],"tags":[],"class_list":["post-1647","post","type-post","status-publish","format-standard","hentry","category-server"],"_links":{"self":[{"href":"https:\/\/wayhope.kro.kr\/index.php?rest_route=\/wp\/v2\/posts\/1647","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wayhope.kro.kr\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wayhope.kro.kr\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wayhope.kro.kr\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/wayhope.kro.kr\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=1647"}],"version-history":[{"count":2,"href":"https:\/\/wayhope.kro.kr\/index.php?rest_route=\/wp\/v2\/posts\/1647\/revisions"}],"predecessor-version":[{"id":1936,"href":"https:\/\/wayhope.kro.kr\/index.php?rest_route=\/wp\/v2\/posts\/1647\/revisions\/1936"}],"wp:attachment":[{"href":"https:\/\/wayhope.kro.kr\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=1647"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wayhope.kro.kr\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=1647"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wayhope.kro.kr\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=1647"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}