\ucd5c\uadfc \uc6f9 \uac1c\ubc1c\uc758 \ud2b8\ub80c\ub4dc\uc5d0\uc11c Next.js\uc640 Nest.js\ub294 \uac01\uac01 \ud504\ub860\ud2b8\uc5d4\ub4dc \ubc0f \ubc31\uc5d4\ub4dc \uac1c\ubc1c\uc5d0\uc11c \ub9e4\uc6b0 \uc778\uae30\uac00 \uc788\uc2b5\ub2c8\ub2e4. Next.js\ub294 React \uae30\ubc18\uc758 \ud504\ub808\uc784\uc6cc\ud06c\ub85c SEO \uce5c\ud654\uc801\uc778 \uc11c\ubc84 \uc0ac\uc774\ub4dc \ub80c\ub354\ub9c1(SSR)\uc744 \uc9c0\uc6d0\ud558\uba70, Nest.js\ub294 \ud0c0\uc785\uc2a4\ud06c\ub9bd\ud2b8\ub97c \uc0ac\uc6a9\ud558\uc5ec \ud6a8\uc728\uc801\uc778 \uc11c\ubc84 \uc560\ud50c\ub9ac\ucf00\uc774\uc158\uc744 \uad6c\ucd95\ud558\ub294 \ub370 \ucd5c\uc801\ud654\ub41c \ud504\ub808\uc784\uc6cc\ud06c\uc785\ub2c8\ub2e4. \uc774\ubc88 \uae00\uc5d0\uc11c\ub294 Next.js\uc640 Nest.js\ub97c \uacb0\ud569\ud558\uc5ec \uae30\ubcf8 \ud504\ub85c\uc81d\ud2b8 \uad6c\uc870\ub97c \ub9cc\ub4e4\uace0, TypeScript \uc124\uc815 \ubc0f \uae30\ubcf8\uc801\uc778 \ub514\ub809\ud1a0\ub9ac \uad6c\uc870\uc5d0 \ub300\ud574 \uc790\uc138\ud788 \uc0b4\ud3b4\ubcf4\uaca0\uc2b5\ub2c8\ub2e4.<\/p>\n
Next.js\ub294 React \uc560\ud50c\ub9ac\ucf00\uc774\uc158\uc744 \uc704\ud55c \uac15\ub825\ud55c \ud504\ub808\uc784\uc6cc\ud06c\ub85c, \ub2e4\uc591\ud55c \uae30\ub2a5\uc744 \uc81c\uacf5\ud569\ub2c8\ub2e4. \ub2e4\uc74c\uc740 Next.js\uc758 \uc8fc\uc694 \ud2b9\uc9d5\uc785\ub2c8\ub2e4:<\/p>\n
Nest.js\ub294 Node.js\uc5d0\uc11c \uc11c\ubc84 \uc560\ud50c\ub9ac\ucf00\uc774\uc158\uc744 \uad6c\ucd95\ud558\uae30 \uc704\ud55c \ud504\ub808\uc784\uc6cc\ud06c\ub85c, TypeScript\ub97c \uc0ac\uc6a9\ud558\uc5ec \uc0dd\uc0b0\uc131\uc744 \ub192\uc785\ub2c8\ub2e4. Nest.js\uc758 \ud2b9\uc9d5\uc740 \ub2e4\uc74c\uacfc \uac19\uc2b5\ub2c8\ub2e4:<\/p>\n
\uc774\uc81c Next.js\uc640 Nest.js\uac00 \uc124\uce58\ub41c \uac1c\ubc1c \ud658\uacbd\uc744 \uc124\uc815\ud574\ubcf4\uaca0\uc2b5\ub2c8\ub2e4. \uac01 \ud504\ub808\uc784\uc6cc\ud06c\uc758 \ud504\ub85c\uc81d\ud2b8\ub97c \uc0dd\uc131\ud558\uace0 \uae30\ubcf8\uc801\uc778 \ub514\ub809\ud1a0\ub9ac \uad6c\uc870\ub97c \uc124\uba85\ud558\uaca0\uc2b5\ub2c8\ub2e4.<\/p>\n
npx create-next-app@latest my-next-app --typescript<\/code><\/pre>\n\uc704\uc758 \uba85\ub839\uc5b4\ub97c \ud130\ubbf8\ub110\uc5d0 \uc785\ub825\ud558\uc5ec Next.js \ud504\ub85c\uc81d\ud2b8\ub97c \uc0dd\uc131\ud569\ub2c8\ub2e4. my-next-app<\/code>\uc740 \ud504\ub85c\uc81d\ud2b8 \uc774\ub984\uc774\uba70, \ud544\uc694\uc5d0 \ub530\ub77c \ubcc0\uacbd\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4.<\/p>\n3.2 Nest.js \ud504\ub85c\uc81d\ud2b8 \uc0dd\uc131<\/h3>\nnpm i -g @nestjs\/cli\nnest new my-nest-app<\/code><\/pre>\n\uc704\uc758 \uba85\ub839\uc5b4\ub97c \uc0ac\uc6a9\ud558\uc5ec Nest.js \ud504\ub85c\uc81d\ud2b8\ub97c \uc0dd\uc131\ud569\ub2c8\ub2e4. my-nest-app<\/code>\uc774 \ud504\ub85c\uc81d\ud2b8 \uc774\ub984\uc785\ub2c8\ub2e4. \uc548\uc815\uc131\uc744 \uc704\ud574 npm<\/code>\uc774 \uc544\ub2cc yarn<\/code>\uc744 \uc0ac\uc6a9\ud560 \uc218\ub3c4 \uc788\uc2b5\ub2c8\ub2e4.<\/p>\n4. TypeScript \uc124\uc815<\/h2>\n
Next.js\uc640 Nest.js \ub450 \ud504\ub85c\uc81d\ud2b8 \ubaa8\ub450 TypeScript\ub97c \uc0ac\uc6a9\ud558\uc5ec \uc791\uc131\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4. \uae30\ubcf8\uc801\uc73c\ub85c Next.js\uc5d0\uc11c TypeScript\ub97c \uc124\uce58\ud558\uba74 tsconfig.json<\/code> \ud30c\uc77c\uc774 \uc0dd\uc131\ub429\ub2c8\ub2e4. Nest.js\ub3c4 \ub9c8\ucc2c\uac00\uc9c0\ub85c \uae30\ubcf8\uc801\uc73c\ub85c TypeScript\ub85c \uc124\uc815\ub418\uc5b4 \uc788\uc2b5\ub2c8\ub2e4.<\/p>\n4.1 Next.js TypeScript \uc124\uc815<\/h3>\n
Next.js\ub294 TypeScript \uc124\uc815\uc774 \uc774\ubbf8 \ud3ec\ud568\ub418\uc5b4 \uc788\uc73c\ubbc0\ub85c, \uc544\ub798 \ud30c\uc77c\uc744 \uc218\uc815\ud558\uac70\ub098 \ucd94\uac00\ud558\uc5ec \ucd94\uac00 \uc124\uc815\uc744 \ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4.<\/p>\n
{\n \"compilerOptions\": {\n \"target\": \"es5\",\n \"lib\": [\"dom\", \"dom.iterable\", \"esnext\"],\n \"allowJs\": true,\n \"skipLibCheck\": true,\n \"strict\": true,\n \"forceConsistentCasingInFileNames\": true,\n \"noEmit\": true,\n \"esModuleInterop\": true,\n \"module\": \"esnext\",\n \"moduleResolution\": \"node\",\n \"resolveJsonModule\": true,\n \"isolatedModules\": true,\n \"jsx\": \"preserve\",\n \"incremental\": true,\n \"baseUrl\": \".\"\n },\n \"include\": [\"next-env.d.ts\", \"**\/*.ts\", \"**\/*.tsx\"],\n \"exclude\": [\"node_modules\"]\n}<\/code><\/pre>\n4.2 Nest.js TypeScript \uc124\uc815<\/h3>\n
Nest.js\uc5d0\uc11c\ub294 \ud504\ub85c\uc81d\ud2b8 \uae30\ubcf8 \uad6c\uc131\uc774 TypeScript\ub97c \uc0ac\uc6a9\ud558\ub3c4\ub85d \ub418\uc5b4 \uc788\uc2b5\ub2c8\ub2e4. tsconfig.json<\/code> \ud30c\uc77c\ub3c4 \uae30\ubcf8\uc801\uc73c\ub85c \ub2e4\uc74c\uacfc \uac19\uc774 \uc124\uc815\ub418\uc5b4 \uc788\uc2b5\ub2c8\ub2e4:<\/p>\n{\n \"compilerOptions\": {\n \"module\": \"commonjs\",\n \"target\": \"es6\",\n \"lib\": [\"es6\", \"dom\"],\n \"outDir\": \".\/dist\",\n \"rootDir\": \".\/src\",\n \"strict\": true,\n \"baseUrl\": \".\/\",\n \"paths\": {\n \"@\/*\": [\"src\/*\"]\n }\n },\n \"include\": [\"src\/**\/*.ts\"],\n \"exclude\": [\"node_modules\", \"dist\"]\n}<\/code><\/pre>\n5. \uae30\ubcf8 \ub514\ub809\ud1a0\ub9ac \uad6c\uc131<\/h2>\n
Next.js\uc640 Nest.js \ud504\ub85c\uc81d\ud2b8 \uac01\uac01\uc758 \uae30\ubcf8 \ub514\ub809\ud1a0\ub9ac \uad6c\uc870\ub97c \uc54c\uc544\ubcf4\uaca0\uc2b5\ub2c8\ub2e4.<\/p>\n
5.1 Next.js \uae30\ubcf8 \ub514\ub809\ud1a0\ub9ac \uad6c\uc131<\/h3>\n
Next.js \ud504\ub85c\uc81d\ud2b8\uc758 \uae30\ubcf8 \ub514\ub809\ud1a0\ub9ac \uad6c\uc870\ub294 \ub2e4\uc74c\uacfc \uac19\uc2b5\ub2c8\ub2e4:<\/p>\n
my-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\u2502 \u2514\u2500\u2500 ...\n\u251c\u2500\u2500 src\/\n\u2502 \u251c\u2500\u2500 pages\/\n\u2502 \u251c\u2500\u2500 components\/\n\u2502 \u2514\u2500\u2500 styles\/\n\u251c\u2500\u2500 .gitignore\n\u251c\u2500\u2500 package.json\n\u251c\u2500\u2500 tsconfig.json\n\u251c\u2500\u2500 next.config.js\n\u2514\u2500\u2500 README.md\n<\/code><\/pre>\n\uac01 \ub514\ub809\ud1a0\ub9ac\uc758 \uc5ed\ud560\uc740 \ub2e4\uc74c\uacfc \uac19\uc2b5\ub2c8\ub2e4:<\/p>\n
\n- public:<\/strong> \uc815\uc801 \ud30c\uc77c\uc744 \uc800\uc7a5\ud558\ub294 \ub514\ub809\ud1a0\ub9ac\uc785\ub2c8\ub2e4. \uc774\ubbf8\uc9c0, \ud3f0\ud2b8 \ub4f1 \ud074\ub77c\uc774\uc5b8\ud2b8\uc5d0\uc11c \uc9c1\uc811 \uc811\uadfc\ud560 \uc218 \uc788\ub294 \ud30c\uc77c\uc744 \uc800\uc7a5\ud569\ub2c8\ub2e4.<\/li>\n
- src\/pages:<\/strong> Next.js\uc5d0\uc11c \ud398\uc774\uc9c0\ub97c \uc815\uc758\ud558\ub294 \ub514\ub809\ud1a0\ub9ac\uc785\ub2c8\ub2e4. \uac01 \ud30c\uc77c \uc774\ub984\uc774 URL \uacbd\ub85c\ub85c \ub9e4\ud551\ub429\ub2c8\ub2e4.<\/li>\n
- src\/components:<\/strong> \uc7ac\uc0ac\uc6a9 \uac00\ub2a5\ud55c \ucef4\ud3ec\ub10c\ud2b8\ub97c \uc815\uc758\ud558\ub294 \ub514\ub809\ud1a0\ub9ac\uc785\ub2c8\ub2e4.<\/li>\n
- src\/styles:<\/strong> CSS \ud30c\uc77c \ubc0f \uc2a4\ud0c0\uc77c \uad00\ub828 \ud30c\uc77c\uc744 \uc800\uc7a5\ud569\ub2c8\ub2e4.<\/li>\n
- next.config.js:<\/strong> Next.js \uc124\uc815 \ud30c\uc77c\uc785\ub2c8\ub2e4. \ud544\uc694\ud55c \ubaa8\ub4e0 \uad6c\uc131 \uc124\uc815\uc744 \uc5ec\uae30\uc5d0 \ucd94\uac00\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4.<\/li>\n<\/ul>\n
5.2 Nest.js \uae30\ubcf8 \ub514\ub809\ud1a0\ub9ac \uad6c\uc131<\/h3>\n
Nest.js \ud504\ub85c\uc81d\ud2b8\uc758 \uae30\ubcf8 \ub514\ub809\ud1a0\ub9ac \uad6c\uc870\ub294 \ub2e4\uc74c\uacfc \uac19\uc2b5\ub2c8\ub2e4:<\/p>\n
my-nest-app\/\n\u251c\u2500\u2500 node_modules\/\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\u2502 \u2514\u2500\u2500 main.ts\n\u251c\u2500\u2500 test\/\n\u251c\u2500\u2500 .eslintrc.js\n\u251c\u2500\u2500 package.json\n\u251c\u2500\u2500 tsconfig.json\n\u251c\u2500\u2500 jest.config.js\n\u2514\u2500\u2500 README.md\n<\/code><\/pre>\n\uac01 \ub514\ub809\ud1a0\ub9ac\uc758 \uc5ed\ud560\uc740 \ub2e4\uc74c\uacfc \uac19\uc2b5\ub2c8\ub2e4:<\/p>\n
\n- src:<\/strong> \uc560\ud50c\ub9ac\ucf00\uc774\uc158\uc758 \uc18c\uc2a4 \ucf54\ub4dc\uac00 \uc704\uce58\ud558\ub294 \ub514\ub809\ud1a0\ub9ac\uc785\ub2c8\ub2e4.<\/li>\n
- app.module.ts:<\/strong> \uc560\ud50c\ub9ac\ucf00\uc774\uc158\uc758 \ub8e8\ud2b8 \ubaa8\ub4c8\uc785\ub2c8\ub2e4. \ub2e4\ub978 \ubaa8\ub4c8\uc744 \ubd88\ub7ec\uc624\uace0 \uad00\ub9ac\ud569\ub2c8\ub2e4.<\/li>\n
- app.controller.ts:<\/strong> \ub77c\uc6b0\ud305\uacfc \uad00\ub828\ub41c \uc694\uccad\uc744 \ucc98\ub9ac\ud558\ub294 \ucee8\ud2b8\ub864\ub7ec\uc785\ub2c8\ub2e4.<\/li>\n
- app.service.ts:<\/strong> \ube44\uc988\ub2c8\uc2a4 \ub85c\uc9c1\uc744 \ucc98\ub9ac\ud558\ub294 \uc11c\ube44\uc2a4\uc785\ub2c8\ub2e4.<\/li>\n
- main.ts:<\/strong> \uc560\ud50c\ub9ac\ucf00\uc774\uc158 \uc9c4\uc785\uc810\uc785\ub2c8\ub2e4. \uc11c\ubc84\ub97c \uc2dc\uc791\ud558\ub294 \ucf54\ub4dc\uac00 \uc704\uce58\ud569\ub2c8\ub2e4.<\/li>\n<\/ul>\n
6. \uacb0\ub860<\/h2>\n
\uc774\ubc88 \uae00\uc5d0\uc11c\ub294 Next.js\uc640 Nest.js\uc758 \uae30\ubcf8\uc801\uc778 \ud504\ub85c\uc81d\ud2b8 \uad6c\uc870\ub97c \uc124\uc815\ud558\uace0, TypeScript \uc124\uc815\uacfc \uae30\ubcf8 \ub514\ub809\ud1a0\ub9ac \uad6c\uc131\uc5d0 \ub300\ud574 \uc54c\uc544\ubcf4\uc558\uc2b5\ub2c8\ub2e4. \ub450 \ud504\ub808\uc784\uc6cc\ud06c\ub97c \ud568\uaed8 \uc0ac\uc6a9\ud558\uba74 \uac15\ub825\ud55c \ud480\uc2a4\ud0dd \uc560\ud50c\ub9ac\ucf00\uc774\uc158\uc744 \ud6a8\uacfc\uc801\uc73c\ub85c \uad6c\ucd95\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4. \uc774\ub7ec\ud55c \uae30\ubcf8 \uad6c\uc870\ub97c \ud1b5\ud574 \ub354 \ub098\uc544\uac00 \ubcf5\uc7a1\ud55c \uc560\ud50c\ub9ac\ucf00\uc774\uc158\uc744 \uac1c\ubc1c\ud560 \uc218 \uc788\uc73c\uba70, \uc2e4\uc804\uc5d0\uc11c \uc720\uc6a9\ud558\uac8c \uc0ac\uc6a9\ud560 \uc218 \uc788\uc744 \uac83\uc785\ub2c8\ub2e4.<\/p>\n
\uc774\uc81c \uc5ec\ub7ec\ubd84\uc740 Next.js\uc640 Nest.js\ub97c \ud65c\uc6a9\ud558\uc5ec \uac1c\ubc1c\uc744 \uc2dc\uc791\ud560 \uc900\ube44\uac00 \ub418\uc5c8\uc2b5\ub2c8\ub2e4! \ub354 \uae4a\uc774 \uc788\ub294 \ub0b4\uc6a9\uc744 \uc6d0\ud558\uc2e0\ub2e4\uba74, \ub450 \ud504\ub808\uc784\uc6cc\ud06c\uc5d0 \ub300\ud55c \uacf5\uc2dd \ubb38\uc11c \ubc0f \ucd94\uac00 \uac15\uc88c\ub97c \ucc38\uace0\ud558\uc2dc\uae30 \ubc14\ub78d\ub2c8\ub2e4.<\/p>\n
<\/body><\/p>\n","protected":false},"excerpt":{"rendered":"