Next.js + TypeScript Boilerplate: 왜 만들고 어떻게 쓰나?

 

 

 개발자라면 누구나 새로운 프로젝트를 시작할 때마다 반복되는 설정 작업에 질려본 적이 있을 거예요. 매번 ESLint 설정하고, Prettier 추가하고, 폴더 구조 잡고, 필수 라이브러리 설치하고... 이거 하다가 정작 개발 시작도 전에 지쳐버리는 경우가 많죠. 🤦‍♂️

 

 그래서 등장한 게 바로 Boilerplate(보일러플레이트)! 쉽게 말해, 프로젝트를 시작할 때 기본적으로 필요한 코드와 설정을 미리 준비해둔 템플릿이에요. 특히 Next.js + TypeScript 조합을 사용할 때는 필수라고 해도 과언이 아닙니다.

 

💡 왜 Boilerplate를 만들까?

1. 시간 절약 ⏳

프로젝트를 시작할 때마다 같은 설정을 반복하는 건 비효율적이에요. Boilerplate를 만들어두면 단 몇 초 만에 프로젝트를 세팅하고 바로 개발에 집중할 수 있어요.

2. 일관성 유지 📏

팀 프로젝트를 하다 보면 코드 스타일이 제각각이어서 관리가 어려운 경우가 많죠. 미리 ESLint, Prettier 등의 설정을 해두면 코드 스타일을 통일할 수 있어요.

3. 생산성 향상 🚀

Boilerplate를 사용하면 개발자가 환경 설정보다는 본격적인 기능 개발에 집중할 수 있어요. 즉, 개발 속도를 높이고, 버그를 줄이고, 유지보수를 편하게 만들 수 있죠.

 

⚙️ Boilerplate에 포함해야 할 구성 요소

보일러플레이트를 만들 때는 어떤 요소들을 포함해야 할까요? 아래 표를 참고하세요! 📋

구성 요소	설명
Next.js 설정	TypeScript 지원을 포함한 Next.js 프로젝트 기본 설정
ESLint & Prettier	코드 스타일 유지 및 자동 정리 기능 추가
스타일링	Tailwind CSS, Styled Components 등 스타일링 라이브러리 설정
폴더 구조	일관된 디렉토리 구조 설정 (e.g., components/, pages/, utils/)
SEO 최적화	next-seo 등 SEO 설정 포함
테스트 환경	Jest, React Testing Library 등을 추가하여 테스트 가능하도록 설정
상태 관리	Redux, Zustand, Recoil 등 상태 관리 라이브러리 포함 (선택 사항)

 

이렇게 구성해두면 새로운 프로젝트를 시작할 때 필요한 요소들이 기본적으로 갖춰져 있어서 바로 개발을 시작할 수 있어요. 🎯

 

🛠️ Boilerplate 만들기

보일러플레이트를 직접 만들고 싶다면 다음 단계를 따라 하면 됩니다.

1. Next.js 프로젝트 생성

npx create-next-app@latest --typescript

2. ESLint & Prettier 설치 및 설정

npm install --save-dev eslint prettier eslint-config-prettier eslint-plugin-prettier

.eslintrc.json 설정:

{
  "extends": ["next/core-web-vitals", "prettier"],
  "rules": {
    "prettier/prettier": "error"
  }
}

3. Tailwind CSS 설치 (옵션)

npm install tailwindcss postcss autoprefixer
npx tailwindcss init -p

4. GitHub에 업로드하기

git init
git add -A
git commit -m "Initial commit"
git remote add origin https://github.com/your-username/boilerplate.git
git push -u origin main

이제 이 Boilerplate를 가져와서 새로운 프로젝트를 만들 때마다 활용할 수 있어요! 🤩

 

🚀 Boilerplate 활용하기

Boilerplate를 만들었다면 이제 새 프로젝트를 시작할 때 활용할 차례입니다!

1. Boilerplate 다운로드
2. git clone https://github.com/your-username/boilerplate.git new-project-name
3. 기존 Git 정보 제거
4. cd new-project-name rm -rf .git
5. 새 Git 저장소 연결
6. git init git remote add origin https://github.com/your-username/new-repo-name.git
7. 커밋 및 푸시
8. git add -A git commit -m "Initial commit from boilerplate" git push -u origin main

이렇게 하면 Boilerplate를 기반으로 새로운 프로젝트를 시작할 수 있습니다! 🎉

 

🎯 결론: Boilerplate는 필수다!

 Next.js + TypeScript 프로젝트를 할 때 Boilerplate를 만들면 시간도 절약되고, 개발 속도도 빨라지고, 코드 일관성도 유지할 수 있어요. 특히 협업할 때 더 빛을 발하는데, 초반 세팅하는 데 걸리는 시간을 아껴서 빠르게 본격적인 개발을 시작할 수 있습니다.

 

 그러니 여러분도 이제 Boilerplate 하나 만들어서 써보세요! 처음엔 귀찮아도 한 번 만들어두면 앞으로 모든 프로젝트에서 시간을 엄청 아낄 수 있을 거예요. ⏳💡