Next.js를 본격적으로 시작하기 위해 필요한 패키지를 설치하고 설정을 진행하였다. 설치 과정과 기본 설정 방법은 다음과 같다.
1. 필요한 패키지 설치
Next.js 프로젝트를 시작하기 위해 React, Next.js, 그리고 React의 요소를 DOM에 렌더링하는 React-DOM을 설치한다. 최신 버전을 설치하기 위해 다음 명령어를 터미널에 입력한다.
npm install react@latest next@latest react-dom@latest2. package.json 스크립트 수정
package.json 파일을 열어 scripts 항목을 수정하여 개발 서버를 실행할 수 있도록 설정한다. 수정 내용은 다음과 같다:
"scripts": {
"dev": "next dev"
}이 스크립트를 통해 npm run dev 명령어로 Next.js 개발 서버를 실행할 수 있다.
3. app 폴더와 page 파일 생성
Next.js는 app 디렉토리를 기반으로 라우팅 구조를 설정한다.
app 폴더 안에 page 파일을 생성하고, 기본 설정을 추가한다. 이는 npm run dev 명령어 실행 시 Next.js가 자동으로 app 폴더 내의 page 파일을 렌더링하기 때문이다.
-
폴더 및 파일 구조:
app/ page.tsx -
파일 이름은 반드시 page로 설정해야 하며, 확장자는
tsx(TypeScript) 또는jsx(JavaScript)를 선택할 수 있다.
필자는 TypeScript 기반으로 개발하기 위해
page.tsx파일을 사용하였다.
4. TypeScript 설정
npm run dev 명령어를 실행하면, Next.js는 TypeScript 사용 여부를 자동으로 감지한다. 만약 TypeScript 관련 패키지가 설치되어 있지 않다면, 자동으로 필요한 패키지를 설치하도록 돕는다. 실행 시 나타나는 메시지는 다음과 같다:
It looks like you're trying to use TypeScript but do not have the required package(s) installed.
Installing dependencies
If you are not trying to use TypeScript, please remove the tsconfig.json file from your package root (and any TypeScript files in your app and pages directories).
Installing devDependencies (npm):
- typescript
- @types/react
- @types/node위 메시지를 통해 Next.js가 TypeScript를 지원하기 위해 다음과 같은 패키지를 자동으로 설치해 준다는 것을 알 수 있다:
- typescript
- @types/react
- @types/node
5. 결과 확인
TypeScript 환경이 성공적으로 설치되면, npm run dev 명령어를 실행하여 Next.js 개발 서버가 실행된다. 브라우저에서 http://localhost:3000에 접속하면 기본 페이지가 정상적으로 렌더링되는 것을 확인할 수 있다.
참고: TypeScript를 사용하지 않는 경우
만약 TypeScript를 사용하지 않으려면, Next.js가 생성하는 tsconfig.json 파일을 삭제하고, app 디렉토리와 pages 디렉토리에서 .tsx 파일 대신 .jsx 파일을 사용하는 것이 좋다. 이렇게 하면 JavaScript 환경에서 Next.js를 간편하게 사용할 수 있다.
