create-next-app with template

들어가며

웹 개발을 할 때 어떤 기술들로 구성하는지는 매번 달라지는 것이 보통이지만, 그럼에도 불구하고 개발자마다 항상 사용하는 설정들이 있습니다. 저를 예를 들면 다국어는 i18n을 사용하고, API 캐싱은 React Query를 사용합니다. 프로젝트를 처음 설정할 때 생각보다 시간이 많이 걸리기 마련인데, 이런 설정들을 미리 템플릿화해두면 시간도 아끼고 초기 시행착오를 줄일 수 있습니다.

어떻게 사용하나요?

Next.js를 사용하시는 개발자라면 create-next-app 명령어를 아실겁니다. 공식 문서에서 제공하는 기능이니까요. 이 명령어를 사용하면 프로젝트 이름, TypeScript 사용 여부 등을 쉽게 설정할 수 있습니다.

npx create-next-app

그리고 문서를 자세히 살펴보면 오늘 말씀드릴 example 옵션을 찾아볼 수 있습니다.

repo url을 옵션으로 함께 써주면 그대로 구성을 해줍니다. 미리 자주 사용하는 설정들을 Github에 push 해두고, repo의 url을 함께 입력하면 시간을 절약할 수 있습니다.

사용 예시

간단한 기능이지만, 저처럼 작은 프로젝트를 계속 만드는 개발자라면 특히 유용합니다. Next.js도 이곳에서 여러개의 템플릿을 제공하고 있습니다. 아래와 같은 형태로 템플릿을 생성할 수 있습니다.

npx create-next-app -e <Github URL>

npx create-next-app -e https://github.com/danver-io/template-danver-web

더 나아가서

이대로도 충분합니다만, 혹시나 여러개의 템플릿을 가지고 계시다면 좋은 방법이 있습니다. 공식 Repo를 보면 하나의 Repo 안에 여러개의 템플릿이 있습니다. Github에 template repo를 생성하시고,폴더마다 자신만의 템플릿들을 추가해보세요. 예를 들면, SPA (Single Page Application), Mobile App 등 많은 템플릿을 만들어둘 수 있겠네요. 이때는 --example-path [path-to-example] 옵션을 추가해주시면 됩니다.

npx create-next-app -e <Github URL> --example-path <Path>

npx create-next-app -e https://github.com/vercel/next.js --example-path examples/blog

실행 결과