검색
검색
공개 노트 검색
회원가입로그인
Next.js 완전정복: 웹 개발자를 위한 가이드

2. 개발 환경 설정하기

2장: 개발 환경 설정하기

이번 장에서는 Next.js 프로젝트를 시작하기 위해 필요한 개발 환경 설정에 대해 알아보겠습니다. 이를 통해 다음.js 프로젝트를 진행할 수 있는 탄탄한 기반을 마련할 것입니다.

1. Node.js 설치

Next.js는 Node.js 기반의 프레임워크이므로, 먼저 Node.js를 설치해야 합니다. Node.js는 공식 웹사이트에서 다운로드할 수 있습니다. 가능한 LTS(Long Term Support) 버전을 설치하는 것이 좋습니다.

# Node.js 설치 여부 확인
node -v

설치가 완료되면 터미널에서 위 명령어를 실행하여 버전을 확인해봅니다. 문제가 없다면, 다음 단계로 진행할 수 있습니다.

2. Visual Studio Code 설치

개발 환경에서 사용할 코드 편집기는 Visual Studio Code(이하 VSCode)를 추천합니다. VSCode는 무료이면서도 강력한 기능을 제공합니다. VSCode 다운로드 페이지에서 설치 후 실행해 주세요.

3. Next.js 프로젝트 생성

이제 Next.js 프로젝트를 생성할 준비가 되었습니다. 터미널을 열고 아래 명령어를 통해 새로운 Next.js 프로젝트를 만듭니다.

npx create-next-app@latest my-next-app

위 명령어를 실행하면 Next.js 프로젝트 생성 마법사가 실행됩니다. 각종 옵션을 설정하고, 타입스크립트를 사용할지 여부 등을 입력합니다.

4. 프로젝트 실행

생성된 프로젝트 디렉토리로 이동한 후, 개발 서버(dev server)를 실행합니다.

cd my-next-app
npm run dev

5. 브라우저에서 실행 확인

터미널에 나타난 개발 서버 URL(보통 http://localhost:3000)을 브라우저에서 열어서 Next.js의 환영 페이지를 확인하면 성공적으로 개발 환경 설정이 완료된 것입니다.


결론

이 챕터에서는 Next.js 프로젝트를 시작하기 위한 환경 설정 단계를 살펴보았습니다. Node.js 설치, VSCode 다운로드, Next.js 프로젝트 생성 및 기본 실행까지 모든 프로세스를 배우셨습니다. 이제 이러한 설정을 통해 Next.js 프로젝트를 시작해보세요!

참고 자료


공유하기
카카오로 공유하기
페이스북 공유하기
트위터로 공유하기
url 복사하기