\uc774\ubc88 \ud3ec\uc2a4\ud2b8\uc5d0\uc11c\ub294 Next.js<\/strong>\uc640 Nest.js<\/strong>\ub97c \uc774\uc6a9\ud558\uc5ec \uae30\ubcf8 \ud504\ub85c\uc81d\ud2b8 \uad6c\uc870\ub97c \ub9cc\ub4dc\ub294 \ubc29\ubc95\uc5d0 \ub300\ud574 \uc790\uc138\ud788 \uc54c\uc544\ubcf4\uaca0\uc2b5\ub2c8\ub2e4. JavaScript\uc640 TypeScript\ub97c \uc0ac\uc6a9\ud558\ub294 \ud504\ub808\uc784\uc6cc\ud06c\uc778 \uc774\ub4e4 \ub450 \uac00\uc9c0\ub294 \uc6f9 \uac1c\ubc1c\uc5d0\uc11c \uc778\uae30\uac00 \ub192\uc2b5\ub2c8\ub2e4. Next.js\ub294 React \uae30\ubc18\uc758 \ud504\ub808\uc784\uc6cc\ud06c\ub85c, \ud0c1\uc6d4\ud55c SSR(Server-Side Rendering)\uacfc \uc815\uc801 \ud398\uc774\uc9c0 \uc0dd\uc131\uc744 \uc9c0\uc6d0\ud558\uba70, Nest.js\ub294 Angular\uc5d0\uc11c \uc601\uac10\uc744 \ubc1b\uc544 \uc9d1\uc57d\ub41c \uad6c\uc870\ub85c \uc6f9 \uc560\ud50c\ub9ac\ucf00\uc774\uc158\uc744 \uad6c\ucd95\ud558\ub294 \uac15\ub825\ud55c \uc11c\ubc84 \uc0ac\uc774\ub4dc \ud504\ub808\uc784\uc6cc\ud06c\uc785\ub2c8\ub2e4. \uc774 \ub450 \uac00\uc9c0 \ud504\ub808\uc784\uc6cc\ud06c\ub97c \uacb0\ud569\ud558\uc5ec \uc804\uccb4 \uc2a4\ud0dd \uc560\ud50c\ub9ac\ucf00\uc774\uc158\uc744 \uad6c\ucd95\ud560 \ub54c \uace0\ub824\ud574\uc57c \ud560 \uae30\ubcf8\uc801\uc778 \ud3f4\ub354 \uad6c\uc870\uc5d0 \ub300\ud574 \uc54c\uc544\ubcf4\uaca0\uc2b5\ub2c8\ub2e4.<\/p>\n \uba3c\uc800 Next.js\uc640 Nest.js \ud504\ub85c\uc81d\ud2b8\ub97c \uc0dd\uc131\ud569\ub2c8\ub2e4. \uac01 \ud504\ub808\uc784\uc6cc\ud06c\ubcc4\ub85c CLI(Command Line Interface)\ub97c \ud1b5\ud574 \uc27d\uac8c \ud504\ub85c\uc81d\ud2b8\ub97c \uc124\uc815\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4.<\/p>\n \uc704\uc758 \uba85\ub839\uc5b4\ub97c \uc2e4\ud589\ud558\uba74 my-next-app<\/strong>\uc774\ub77c\ub294 \uc774\ub984\uc758 \uc0c8 Next.js \ud504\ub85c\uc81d\ud2b8\uac00 \uc0dd\uc131\ub429\ub2c8\ub2e4. \uc0dd\uc131\ub41c \ud3f4\ub354\ub85c \uc774\ub3d9\ud569\ub2c8\ub2e4.<\/p>\n \uc704\uc758 \uba85\ub839\uc5b4\ub85c Nest CLI\ub97c \uc124\uce58\ud55c \ud6c4, \uc544\ub798\uc640 \uac19\uc774 \uc0c8\ub85c\uc6b4 Nest.js \ud504\ub85c\uc81d\ud2b8\ub97c \uc0dd\uc131\ud569\ub2c8\ub2e4.<\/p>\n \uc0dd\uc131\ub41c \ud3f4\ub354\ub85c \uc774\ub3d9\ud569\ub2c8\ub2e4.<\/p>\n \uac01 \ud504\ub808\uc784\uc6cc\ud06c\uc758 \uae30\ubcf8 \ud3f4\ub354 \uad6c\uc870\ub97c \uc54c\uc544\ubcf4\uaca0\uc2b5\ub2c8\ub2e4. \ud2b9\uc815\ud55c \ud3f4\ub354 \uad6c\uc870\ub294 \ud504\ub85c\uc81d\ud2b8\uc758 \uc720\uc9c0 \uad00\ub9ac \ubc0f \ud655\uc7a5\uc131\uc744 \ub192\uc774\ub294 \ub370 \ub3c4\uc6c0\uc774 \ub429\ub2c8\ub2e4.<\/p>\n Next.js \ud504\ub85c\uc81d\ud2b8\uc758 \uae30\ubcf8 \uad6c\uc870\ub294 \ub2e4\uc74c\uacfc \uac19\uc2b5\ub2c8\ub2e4:<\/p>\n Nest.js \ud504\ub85c\uc81d\ud2b8\uc758 \uae30\ubcf8 \uad6c\uc870\ub294 \ub2e4\uc74c\uacfc \uac19\uc2b5\ub2c8\ub2e4:<\/p>\n Next.js\uc640 Nest.js\ub97c \ubaa8\ub450 \uc124\uce58\ud55c \ud6c4, \uc774 \ub450 \uac00\uc9c0\ub97c \uc5f0\uacb0\ud558\uc5ec \uc804\uccb4 \uc2a4\ud0dd \uc560\ud50c\ub9ac\ucf00\uc774\uc158\uc744 \ub9cc\ub4dc\ub294 \uacfc\uc815\uc5d0 \ub300\ud574 \uc124\uba85\ud558\uaca0\uc2b5\ub2c8\ub2e4.<\/p>\n \uc6b0\uc120 Nest.js\ub97c \uc0ac\uc6a9\ud558\uc5ec API\ub97c \uac1c\ubc1c\ud569\ub2c8\ub2e4. \uc5ec\uae30\uc5d0 \uac04\ub2e8\ud55c \uc0ac\uc6a9\uc790 \uc815\ubcf4\ub97c \uad00\ub9ac\ud558\ub294 API\ub97c \ub9cc\ub4e4\uc5b4 \ubcf4\uaca0\uc2b5\ub2c8\ub2e4. app.controller.ts<\/strong> \ud30c\uc77c\uc744 \ub2e4\uc74c\uacfc \uac19\uc774 \uc218\uc815\ud558\uaca0\uc2b5\ub2c8\ub2e4.<\/p>\n \uc774\uc81c Next.js\uc5d0\uc11c \uc704\uc5d0\uc11c \ub9cc\ub4e0 Nest.js API\ub97c \ud638\ucd9c\ud574\ubd05\uc2dc\ub2e4. pages\/index.js<\/strong> \ud30c\uc77c\uc744 \ub2e4\uc74c\uacfc \uac19\uc774 \uc218\uc815\ud569\ub2c8\ub2e4.<\/p>\n1. \ud504\ub85c\uc81d\ud2b8 \uc0dd\uc131<\/h2>\n
1.1 Next.js \ud504\ub85c\uc81d\ud2b8 \uc0dd\uc131<\/h3>\n
npx create-next-app@latest my-next-app<\/code><\/pre>\ncd my-next-app<\/code><\/pre>\n1.2 Nest.js \ud504\ub85c\uc81d\ud2b8 \uc0dd\uc131<\/h3>\n
npm i -g @nestjs\/cli<\/code><\/pre>\nnest new my-nest-app<\/code><\/pre>\ncd my-nest-app<\/code><\/pre>\n2. \uae30\ubcf8 \ud3f4\ub354 \uad6c\uc870 \uc774\ud574<\/h2>\n
2.1 Next.js \uae30\ubcf8 \ud3f4\ub354 \uad6c\uc870<\/h3>\n
\nmy-next-app\/\n\u251c\u2500\u2500 node_modules\/\n\u251c\u2500\u2500 public\/\n\u2502 \u251c\u2500\u2500 favicon.ico\n\u2502 \u251c\u2500\u2500 vercel.svg\n\u251c\u2500\u2500 styles\/\n\u2502 \u251c\u2500\u2500 globals.css\n\u2502 \u2514\u2500\u2500 Home.module.css\n\u251c\u2500\u2500 pages\/\n\u2502 \u251c\u2500\u2500 api\/\n\u2502 \u251c\u2500\u2500 _app.js\n\u2502 \u251c\u2500\u2500 index.js\n\u2514\u2500\u2500 package.json\n<\/code><\/pre>\n\n
api<\/code> \ud3f4\ub354 \uc548\uc5d0\ub294 API \ub77c\uc6b0\ud2b8\uac00 \ud3ec\ud568\ub429\ub2c8\ub2e4. \ub610\ud55c _app.js<\/code>\ub294 \uc560\ud50c\ub9ac\ucf00\uc774\uc158\uc758 \ub808\uc774\uc544\uc6c3\uc744 \uc815\uc758\ud558\ub294 \ub370 \uc0ac\uc6a9\ub429\ub2c8\ub2e4.<\/li>\n2.2 Nest.js \uae30\ubcf8 \ud3f4\ub354 \uad6c\uc870<\/h3>\n
\nmy-nest-app\/\n\u251c\u2500\u2500 src\/\n\u2502 \u251c\u2500\u2500 app.module.ts\n\u2502 \u251c\u2500\u2500 app.controller.ts\n\u2502 \u251c\u2500\u2500 app.service.ts\n\u2514\u2500\u2500 package.json\n<\/code><\/pre>\n\n
app.module.ts<\/code>, app.controller.ts<\/code>, app.service.ts<\/code> \ud30c\uc77c\uc774 \uc0dd\uc131\ub429\ub2c8\ub2e4.<\/li>\n3. Next.js\uc640 Nest.js \uc5f0\uacb0\ud558\uae30<\/h2>\n
3.1 Nest.js API \uac1c\ubc1c<\/h3>\n
\nimport { Controller, Get } from '@nestjs\/common';\n\n@Controller('users')\nexport class AppController {\n @Get()\n findAll(): string {\n return '\uc0ac\uc6a9\uc790 \ub9ac\uc2a4\ud2b8';\n }\n}\n<\/code><\/pre>\n3.2 Next.js\uc5d0\uc11c API \uc0ac\uc6a9\ud558\uae30<\/h3>\n
\nimport { useEffect, useState } from 'react';\n\nexport default function Home() {\n const [users, setUsers] = useState([]);\n\n useEffect(() => {\n fetch('\/api\/users')\n .then((response) => response.json())\n .then((data) => setUsers(data));\n }, []);\n\n return (\n