프리랜서 웹디자이너 웹퍼블리셔RELATION

[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 ?
→ 프로젝트 폴더 작명. 예: 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
- 서버실행 
- 종료: 터미널에서 Ctrl + C를 누릅니다.
답글쓰기 전체목록

이 포스트 공유하기

  • 페이스북에 공유하기
  • 트위터에 공유하기
  • 네이버 블로그 카페에 공유하기
  • 네이버 밴드에 공유하기

코멘트 쓰기

코멘트를 입력해주세요
LOGIN JOIN