[next js] project start

1. 프로젝트 생성

npx create-next-app@latest

• Typescript 여부 Yes
• Eslint 여부 Yes
• Tailwind CSS 여부 No / Yes
• src/ 사용 여부 Yes
• App Router 사용 여부 Yes
• 기본 alias 설정 여부 No

 

 

src/
 ├─ app/                     # 라우터 (Next.js가 자동으로 인식)
 │   ├─ layout.js            # 전체 레이아웃
 │   ├─ page.js              # 홈 (/)
 │   ├─ about/               # /about
 │   │   └─ page.js
 │   ├─ weather/             # /weather
 │   │   └─ page.js
 │   └─ ...                  # 다른 라우트들
 │
 ├─ components/              # 공통 위젯, UI 컴포넌트
 │   ├─ Header.js
 │   ├─ Footer.js
 │   ├─ WeatherCard.js
 │   ├─ SearchBar.js
 │   └─ ...
 │
 ├─ widgets/                 # 특정 라우트에서만 쓰는 위젯
 │   ├─ weather/
 │   │   ├─ RecentSearchList.js
 │   │   ├─ FavoriteList.js
 │   │   └─ ...
 │   └─ mbti/
 │       ├─ QuestionList.js
 │       └─ ResultCard.js
 │
 ├─ styles/                  # CSS/SCSS
 │   └─ globals.css
 │
 └─ lib/                     # API 호출, 유틸 함수
     ├─ api.js
     ├─ fetchWeather.js
     └─ ...