[nextjs] Next.js
2026.04.29
1. Node.js 설치
https://nodejs.org/ 에서 LTS(Long term Support) 버젼을 다운로드 설치
2. npx를 이용 Next.js 앱을 생성
npx create-next-app@latest
option
- what is your project name ?
→ 프로젝트 폴더 작명. 예:
- would you like to use TypeScript ?
→ TypeScript를 사용할지 여부. 자바스크립트보다 타입 안정성이 높아 대규모 프로젝트에 유리.
- would you like to use ESLine ?
→ 코드 스타일과 오류를 자동으로 검사해주는 도구. 팀 협업 시 코드 일관성을 유지하는 데 도움을 줌.
- would you like to use Tailwind CSS ?
→ CSS 프레임워크 선택 여부. Tailwind는 유틸리티 클래스 기반으로 빠르게 스타일링할 수 있어 요즘 많이 쓰임.
- would you like to use 'src/' directory ?
→ 소스 코드를
- would you like to use App Router ? (recommended)
→ Next.js 13부터 도입된 새로운 라우팅 방식. 서버 컴포넌트, 레이아웃, 병렬 라우팅 등 최신 기능을 활용할 수 있어 권장.
- would you like to use Customize the default import alias ?
→ 기본적으로
https://nodejs.org/ 에서 LTS(Long term Support) 버젼을 다운로드 설치
2. npx를 이용 Next.js 앱을 생성
npx create-next-app@latest
option
- what is your project name ?
→ 프로젝트 폴더 작명. 예:
my-app- would you like to use TypeScript ?
→ TypeScript를 사용할지 여부. 자바스크립트보다 타입 안정성이 높아 대규모 프로젝트에 유리.
- would you like to use ESLine ?
→ 코드 스타일과 오류를 자동으로 검사해주는 도구. 팀 협업 시 코드 일관성을 유지하는 데 도움을 줌.
- would you like to use Tailwind CSS ?
→ CSS 프레임워크 선택 여부. Tailwind는 유틸리티 클래스 기반으로 빠르게 스타일링할 수 있어 요즘 많이 쓰임.
- would you like to use 'src/' directory ?
→ 소스 코드를
src/ 폴더 안에 넣을지 여부. 구조가 깔끔해지고 대규모 프로젝트에서 관리하기 편리.- would you like to use App Router ? (recommended)
→ Next.js 13부터 도입된 새로운 라우팅 방식. 서버 컴포넌트, 레이아웃, 병렬 라우팅 등 최신 기능을 활용할 수 있어 권장.
- would you like to use Customize the default import alias ?
→ 기본적으로
@/* 같은 경로 별칭을 설정할 수 있는 옵션. 긴 상대 경로(../../../components/Button) 대신 @/components/Button처럼 간단히 호출보통 추천 조합:
TypeScript + ESLint + Tailwind + src 디렉토리 + App Router + import alias
TypeScript를 설정했다고 반드시 TypeScript만을 사용해야하는 것은 아님
3. npm run dev
- 서버실행
- 종료: 터미널에서
TypeScript + ESLint + Tailwind + src 디렉토리 + App Router + import alias
TypeScript를 설정했다고 반드시 TypeScript만을 사용해야하는 것은 아님
3. npm run dev
- 서버실행
- 종료: 터미널에서
Ctrl + C를 누릅니다.작성자
꿘쓰
작성일
2026.04.29
