{"id":41114,"date":"2024-11-06T02:46:37","date_gmt":"2024-11-06T02:46:37","guid":{"rendered":"https:\/\/atmokpo.com\/w\/?p=41114"},"modified":"2024-11-26T06:37:33","modified_gmt":"2024-11-26T06:37:33","slug":"2-next-js%ec%99%80-nest-js-%ea%b0%9c%ec%9a%94%ec%99%80-%ed%99%98%ea%b2%bd-%ec%84%a4%ec%a0%95-%ea%b0%9c%eb%b0%9c-%ed%99%98%ea%b2%bd-%ec%84%a4%ec%a0%95-%eb%b0%8f-%ec%b4%88%ea%b8%b0-%ed%94%84%eb%a1%9c","status":"publish","type":"post","link":"https:\/\/atmokpo.com\/w\/41114\/","title":{"rendered":"2.Next.js\uc640 Nest.js \uac1c\uc694\uc640 \ud658\uacbd \uc124\uc815, \uac1c\ubc1c \ud658\uacbd \uc124\uc815 \ubc0f \ucd08\uae30 \ud504\ub85c\uc81d\ud2b8 \uad6c\uc870 \uc7a1\uae30"},"content":{"rendered":"

<\/p>\n

\n
\n

\uc774 \ube14\ub85c\uadf8 \ud3ec\uc2a4\ud2b8\uc5d0\uc11c\ub294 Next.js\uc640 Nest.js\uc758 \uae30\ubcf8 \uac1c\uc694\uc640 \ud568\uaed8 \uac1c\ubc1c \ud658\uacbd \uc124\uc815, \ucd08\uae30 \ud504\ub85c\uc81d\ud2b8 \uad6c\uc131\uc744 \uc790\uc138\ud788 \uc124\uba85\ud569\ub2c8\ub2e4.<\/p>\n<\/header>\n

\n

1. Next.js \uac1c\uc694<\/h2>\n

Next.js\ub294 React \uae30\ubc18\uc758 \ud504\ub808\uc784\uc6cc\ud06c\ub85c, \uc11c\ubc84 \uc0ac\uc774\ub4dc \ub80c\ub354\ub9c1(SSR) \ubc0f \uc815\uc801 \uc6f9\uc0ac\uc774\ud2b8 \uc0dd\uc131(SSG)\uc744 \uc9c0\uc6d0\ud569\ub2c8\ub2e4. \uc774\ub97c \ud1b5\ud574 \uc6f9 \uc560\ud50c\ub9ac\ucf00\uc774\uc158\uc758 \uc131\ub2a5\uc744 \ucd5c\uc801\ud654\ud558\uace0 SEO \uce5c\ud654\uc801\uc778 \ud398\uc774\uc9c0\ub97c \uc0dd\uc131\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4. Next.js\ub294 \ub2e4\uc591\ud55c \uae30\ub2a5\uc744 \uc81c\uacf5\ud558\uba70, \ud398\uc774\uc9c0 \uae30\ubc18\uc758 \ub77c\uc6b0\ud305 \uc2dc\uc2a4\ud15c, \uc790\ub3d9 \ucf54\ub4dc \ubd84\ud560, API \ub77c\uc6b0\ud305 \ub4f1\uc73c\ub85c \uac1c\ubc1c\uc790\uac00 \uc190\uc27d\uac8c \uc560\ud50c\ub9ac\ucf00\uc774\uc158\uc744 \uad6c\ucd95\ud560 \uc218 \uc788\uac8c \ub3d5\uc2b5\ub2c8\ub2e4.<\/p>\n<\/section>\n

\n

2. Nest.js \uac1c\uc694<\/h2>\n

Nest.js\ub294 Node.js\ub97c \uc704\ud55c \uc9c4\ubcf4\ub41c \ud504\ub808\uc784\uc6cc\ud06c\ub85c, \ub300\uaddc\ubaa8 \uc751\uc6a9 \ud504\ub85c\uadf8\ub7a8\uc744 \uad6c\ucd95\ud558\uae30 \uc704\ud574 \uc124\uacc4\ub418\uc5c8\uc2b5\ub2c8\ub2e4. \uc8fc\ub85c TypeScript\ub85c \uc791\uc131\ub418\uba70, Angular\uc5d0\uc11c \uc601\uac10\uc744 \ubc1b\uc544 \ubaa8\ub4c8\ud654\ub41c \uad6c\uc870\ub97c \uac00\uc9c0\uace0 \uc788\uc2b5\ub2c8\ub2e4. Nest.js\ub294 \uc5ec\ub7ec \ud504\ub85c\uadf8\ub798\ubc0d \ud328\ub7ec\ub2e4\uc784\uc744 \uc9c0\uc6d0\ud558\uc5ec \uac1c\ubc1c\uc790\uac00 \ubcf4\ub2e4 \ud6a8\uc728\uc801\uc73c\ub85c \ucf54\ub4dc\ub97c \uc791\uc131\ud560 \uc218 \uc788\ub3c4\ub85d \ub3d5\uc2b5\ub2c8\ub2e4. \ub610\ud55c, Express \ub610\ub294 Fastify\uc640 \uac19\uc740 \uc778\uae30 \uc788\ub294 HTTP \uc11c\ubc84 \ud504\ub808\uc784\uc6cc\ud06c \uc704\uc5d0\uc11c \ub3d9\uc791\ud558\uba70, \uc720\uc5f0\uc131\uacfc \ud655\uc7a5\uc131\uc744 \uc81c\uacf5\ud569\ub2c8\ub2e4.<\/p>\n<\/section>\n

\n

3. \uac1c\ubc1c \ud658\uacbd \uc124\uc815<\/h2>\n

\uc774\uc81c Next.js\uc640 Nest.js\uc758 \uac1c\ubc1c \ud658\uacbd\uc744 \uc124\uc815\ud574\ubcf4\uaca0\uc2b5\ub2c8\ub2e4. \uc544\ub798\uc758 \ub2e8\uacc4\ub4e4\uc744 \ub530\ub77c\uc11c \uc9c4\ud589\ud574 \uc8fc\uc138\uc694.<\/p>\n

3.1 Node.js \uc124\uce58<\/h3>\n

Next.js\uc640 Nest.js \ubaa8\ub450 Node.js \ud658\uacbd\uc5d0\uc11c \uc2e4\ud589\ub429\ub2c8\ub2e4. \ub530\ub77c\uc11c \uba3c\uc800 Node.js\ub97c \uc124\uce58\ud574\uc57c \ud569\ub2c8\ub2e4. Node.js\ub294 \uacf5\uc2dd \uc6f9\uc0ac\uc774\ud2b8\uc778 nodejs.org<\/a>\uc5d0\uc11c \ub2e4\uc6b4\ub85c\ub4dc\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4.<\/p>\n

3.2 Next.js \ud504\ub85c\uc81d\ud2b8 \uc0dd\uc131<\/h3>\n

Next.js \ud504\ub85c\uc81d\ud2b8\ub97c \uc0dd\uc131\ud558\ub824\uba74, \ud130\ubbf8\ub110\uc744 \uc5f4\uace0 \uc544\ub798\uc758 \uba85\ub839\uc5b4\ub97c \uc785\ub825\ud569\ub2c8\ub2e4:<\/p>\n

npx create-next-app@latest my-next-app<\/code><\/pre>\n
\uc704\uc758 \uba85\ub839\uc5b4\ub294 “my-next-app”\uc774\ub77c\ub294 \uc774\ub984\uc758 Next.js \ud504\ub85c\uc81d\ud2b8\ub97c \uc0dd\uc131\ud569\ub2c8\ub2e4. \uc0dd\uc131 \uacfc\uc815\uc5d0\uc11c \uba87 \uac00\uc9c0 \uc9c8\ubb38\uc744 \ubc1b\uac8c \ub418\uba70, \uc774\ub97c \ud1b5\ud574 TypeScript \uc0ac\uc6a9 \uc5ec\ubd80 \ub4f1 \ud504\ub85c\uc81d\ud2b8\uc758 \ud2b9\uc131\uc744 \uc124\uc815\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4.<\/p>\n
3.3 Nest.js \ud504\ub85c\uc81d\ud2b8 \uc0dd\uc131<\/h3>\n
Nest.js \ud504\ub85c\uc81d\ud2b8\ub97c \uc0dd\uc131\ud558\ub824\uba74 \ub2e4\uc74c \ub2e8\uacc4\uc5d0 \ub530\ub77c \uc9c4\ud589\ud558\uc138\uc694:<\/p>\n
npm i -g @nestjs\/cli<\/code><\/pre>\n
\uc774\ud6c4, Nest.js CLI\ub97c \uc0ac\uc6a9\ud558\uc5ec \ud504\ub85c\uc81d\ud2b8\ub97c \uc0dd\uc131\ud569\ub2c8\ub2e4:<\/p>\n
nest new my-nest-app<\/code><\/pre>\n
\uc704\uc758 \uba85\ub839\uc5b4\ub97c \uc785\ub825\ud558\uba74 “my-nest-app”\uc774\ub77c\ub294 \uc774\ub984\uc758 Nest.js \ud504\ub85c\uc81d\ud2b8\uac00 \uc0dd\uc131\ub429\ub2c8\ub2e4. \uc774 \uacfc\uc815\uc5d0\uc11c\ub3c4 \uba87 \uac00\uc9c0 \uc9c8\ubb38\uc744 \ubc1b\uac8c \ub429\ub2c8\ub2e4.<\/p>\n<\/section>\n
\n
4. \ucd08\uae30 \ud504\ub85c\uc81d\ud2b8 \uad6c\uc870 \uc7a1\uae30<\/h2>\n
Next.js\uc640 Nest.js\uc758 \uae30\ubcf8 \ud504\ub85c\uc81d\ud2b8 \uad6c\uc870\ub294 \ub2e4\uc74c\uacfc \uac19\uc2b5\ub2c8\ub2e4:<\/p>\n
4.1 Next.js \ud504\ub85c\uc81d\ud2b8 \uad6c\uc870<\/h3>\n