๐ŸŸกJS, React/Next.js

# Next.js ๊ธฐ๋ณธ ์ƒ์„ฑ ๋ช…๋ น์–ด

๋ญ‰์ง€๋ง˜ 2025. 5. 19. 13:03
npx create-next-app my-app

 

์˜ต์…˜ ์—†์ด ์‹คํ–‰ํ•˜๋ฉด ์ด๋ ‡๊ฒŒ ๋ฌป๋Š” ์งˆ๋ฌธ๋“ค:

  • TypeScript ์“ธ๋ž˜?
  • ESLint ์ ์šฉํ• ๋ž˜?
  • Tailwind CSS ์“ธ๋ž˜?
  • App Router (app ๋””๋ ‰ํ† ๋ฆฌ ๊ธฐ๋ฐ˜) ์“ธ๋ž˜?
  • src/ ๋””๋ ‰ํ† ๋ฆฌ ๊ตฌ์กฐ๋กœ ํ• ๋ž˜?

์ถ”๊ฐ€๋กœ ๋งŽ์ด ์„ค์น˜ํ•˜๋Š” ํŒจํ‚ค์ง€

mongoDB

npm install mongoose

 

ํ™˜๊ฒฝ๋ณ€์ˆ˜ํŒŒ์ผ

.env.local

 

์ž์ฃผ ์“ฐ๋Š” ์‹คํ–‰/๋นŒ๋“œ ๋ช…๋ น์–ด

๊ฐœ๋ฐœ ์„œ๋ฒ„ ์‹คํ–‰ npm run dev
ํ”„๋กœ๋•์…˜ ๋นŒ๋“œ npm run build
๋นŒ๋“œ ํ›„ ์‹คํ–‰ npm start
ํƒ€์ž… ๊ฒ€์‚ฌ (TS ์‚ฌ์šฉ ์‹œ) npm run type-check
์ฝ”๋“œ ๋ฆฐํŠธ ๊ฒ€์‚ฌ npm run lint

 

ํ”„๋กœ์ ํŠธ ๊ตฌ์กฐ ์˜ˆ์‹œ (App Router ๊ธฐ์ค€)

my-app/
โ”œโ”€โ”€ app/
โ”‚   โ”œโ”€โ”€ page.tsx
โ”‚   โ””โ”€โ”€ api/
โ”‚       โ””โ”€โ”€ weather/route.ts
โ”œโ”€โ”€ lib/
โ”‚   โ””โ”€โ”€ mongodb.ts
โ”œโ”€โ”€ models/
โ”‚   โ””โ”€โ”€ Weather.ts
โ”œโ”€โ”€ .env.local
โ”œโ”€โ”€ next.config.js