IT 엘도라도 로고
IT 엘도라도
황금

Next.js 핵심 개념 익히기 - ① 프로젝트 설치하기

2022-01-17 22:52

Next.js 핵심 개념 익히기 - ① 프로젝트 설치하기

💡
Next.js 공식 문서를 읽고, 필자가 생각하기에 Next.js에 대해 알고 있어야 하는 핵심 개념을 정리한 포스팅입니다. 실제로 Next.js 공식 문서를 살펴보면 생각보다 많은 내용이 있는데, 필자의 목적은 "Next.js가 무엇이냐"라는 질문에 대해 답을 할 수 있는 수준의 핵심 개념을 간추리는 것입니다. 더 자세한 내용은 개발하면서 그때그때 살펴보면 된다고 생각합니다.
 

1. create-next-app 패키지 이용

다음과 같이 create-next-app 패키지를 이용하면 Next.js 앱의 개발을 위해 필요한 대부분의 것들을 쉽게 설치할 수 있다.
  • npm run dev 명령어를 실행하면 http://localhost:3000에서 개발 서버가 실행된다.
  • http://localhost:3000에 접속하면 앱을 확인할 수 있다.
  • pages/index.js 파일을 수정하면 변동사항을 브라우저에서 바로 확인할 수 있다.
💡
create-next-app은 Node.js 패키지에 해당하며, npx는 Node.js 패키지의 임시 설치 및 실행을 위한 도구이다. Node.js 패키지 및 npx에 관한 자세한 내용은 여기를 참조하자.
💡
npm run dev 명령어의 실행은 실제로 next dev 명령어의 실행을 의미한다. 이에 대해서는 아래 섹션을 참조하자.
 

2. 수동 설치

nextreactreact-dom 패키지를 설치한다. Next.js는 React 기반의 웹 프레임워크이므로 React도 설치해야 한다.
이제 npm run XXX 명령어의 실행을 설정하기 위해 package.json 파일을 열고 scripts를 다음과 같이 수정한다.
  • next dev: 개발 환경을 위한 Next.js 서버를 실행한다.
  • next build: 배포 환경을 위한 Next.js 앱을 빌드한다.
  • next start: 배포 환경을 위한 Next.js 서버를 실행한다.
  • next lint: Next.js의 자체 ESLint 구성을 설정한다.
말풍선
댓글 0
좋아요 0
    아직 작성된 댓글이 없어요.
사용자