Next.js + Typescript 개발 환경 구축하기 ⚙️
자동으로 생성해주는 방법과 수동으로 생성하는 두 가지 방법을 정리해 볼게요!
Automatic Setup ⚙️
자동으로 설정해주는 create-next-app를 사용하여 Next.js 앱 생성하기
--typescript를 추가해주면 typescript 환경으로 생성된다.
yarn create next-app --typescript설치 후
- http://localhost:3000 에서 개발 서버를 시작하기 위해 yarn dev를 실행한다.
- http://localhost:3000 에서 애플리케이션을 확인한다.
- pages/index.js를 편집하고 브라우저에서 업데이트된 결과를 확인한다.
Manual Setup ⚙️
1. package.json 생성하기
프로젝트 폴더 생성 후 해당 디렉토리에 아래 명령어를 실행한다.
yarn init -ypackage.json이 생성 됐는지 확인한다.
2. 필요한 package 설치하기
아래 명령어를 실행 해주면 node_modules 폴더가 생성되며 package.json 파일 dependencies에 추가가 된 것을 확인할 수 있다.
yarn add react next react-dom3. package.json에 script 추가하기
"scripts": {
"dev": "next dev",
"build": "next build",
"start": "next start",
"lint": "next lint"
}- dev - 개발 모드에서 Next.js를 시작한다.
- build - 프로덕션 사용을 위해 애플리케이션을 빌드한다.
- start - Next.js 프로덕션 서버를 시작한다.
- lint - Next.js의 기본 제공 ESLint 구성을 설정합니다.
4. root에 pages와 public 폴더 생성하기
- pages - 파일 이름에 따라 경로와 연결된다. 예를 들어 pages/about.js는 /about에 매핑된다.
- public - 이미지, 글꼴 등과 같은 static을 저장한다. 그러면 public 폴더 내의 파일은 기본 URL(/)에서 시작하는 코드에서 참조할 수 있다.
Next.js는 페이지 개념을 중심으로 구축 되었으며 페이지는 페이지 디렉토리에 있는 .js, .jsx, .ts 또는 .tsx 파일에서 내보낸 React 컴포넌트이다. 파일 이름으로 동적 경로 매개변수를 추가할 수도 있다.
시작하려면 pages 폴더 내에 index.tsx 파일을 추가한다. 이 파일은 애플리케이션의 루트에 렌더링되는 페이지이다.
function HomePage() {
return <div>Welcome to Next.js!</div>
}
export default HomePage설정 후
- http://localhost:3000 에서 개발 서버를 시작하기 위해 yarn dev를 실행한다.
- http://localhost:3000 에서 애플리케이션을 확인한다.
- pages/index.js를 편집하고 브라우저에서 업데이트된 결과를 확인한다.
5. Typescript 추가하기
typescript를 사용하기 위해 루트 폴더에서 아래 명령어를 실행해 준다.
touch tsconfig.json실행 후 빈 tsconfig.json 파일이 생성된다.
생성이 된 것을 확인 했으면 아래 명령어를 실행한다.
yarn dev
TypeScript를 사용하려고 하지만 필요한 패키지가 설치되어 있지 않은 것 같다는 메세지와 함께 typescript에 필요한 패키지를 설치 해준 후 http://localhost:3000 으로 접속해 보면 실행된 것을 확인해 볼 수 있다.
추가적으로 다른 설정이 필요하면 프로젝트마다 필요한 라이브러리 등을 세팅 해주면 됩니다 😀
참고 자료
