[Frontend] Next.js + typescript 설치 방법 및 실행 방법

안녕하세요.

오늘은 [Frontend] Next.js + typescript 설치 방법 및 실행 방법에 대해 알아보려고 합니다.

Next.js 설치 방법

1. node.js 설치

필자는 2025년 05월 13일 기준으로 LTS 버전인 22.15.0를 설치했습니다 !

Node.js — Node.js® 다운로드

Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine.

nodejs.org

직접 구글에 nodejs 설치라고 쳐서 들어가셔도 됩니다 !

2. node, npm 설치 및 버전 확인

1. cmd 진입
2. > node -v
3. > npm -v

3. 프로젝트 위치 선정

필자는 D:\workspace에서 시작해서 jeeudev라는 프로젝트를 만들도록 하겠습니다 !

1. > D:
2. > cd workspace
3. > npx create-next-app jeeudev --typescript

Success! 라는 문구와 함께 생성이 되었다고 합니다 !
생성이 된 디렉토리에 제대로 생성이 되었는지 확인합니다 !

4. 패키지 설치 및 프로젝트 실행

package.json에 적힌 의존성 패키지들을 설치하는 작업입니다 !
프로젝트 실행 시 반드시 필요한 작업입니다.

1. > npm install
2. > npm run dev

5. Next.js 포트 확인 후 접속

위에 노란 박스안에 있는 것 처럼
브라우저에 입력창에 입력

http://localhost:3000

이렇게 [Frontend] Next.js + typescript 설치 방법 및 실행 방법에 대해 알아보았습니다.

감사합니다.

JeeU 개발