Next.js 보일러 플레이트 만들기

보일러 플레이트를 만들어 봅시당

개념

🔥 **보일러플레이트(Boilerplate)**란?

1. 개념 : 반복적으로 자주 사용하는 코드 구조나 파일.

 

2. 이름의 유래 : 신문 인쇄소에서 자주 쓰던 금속판에서 온 말로, 자주 쓰는 문구를 금속판으로 찍어두고 복사 붙여넣기 하듯 사용했던 것에서 유래된다. 소프트웨어에선 반복적으로 쓰는 코드라는 의미

 

3. 개발에서의 의미

• 매 프로젝트마다 거의 비슷하게 생기는 기본 뼈대 코드
• 처음부터 직접 하나하나 다 작성하지 않아도 되도록, 초기 세팅을 미리 해둔 코드 묶음

4. 보일러 플레이트의 장점 

• 시간 절약: 매번 똑같은 설정 안 해도 됨.
• 일관성 유지: 팀원들이 같은 구조에서 개발.
• 생산성 향상: 중요한 로직에만 집중 가능.

 

목적

스토리북이나, 다른 라이브러리 등을 공부하거나 테스트하고 싶을때,
매번 설정을 새로하기 귀찮습니다.

그럴때, 보일러 플레이트를 작성해 하고싶은 작업때마다 설정을 복사하려고 합니다.
또한 일관성을 위해 commit 템플릿과 PR템플릿을 만들겠습니다.

 

1. 라이브러리 설치

• Next.js
• TailwindCss
• eslint
• prettier
• typescript
• svgr

필요한 라이브러리들을 설치해준다.

 

 

eslint.config.mjs

import { dirname } from "path";
import { fileURLToPath } from "url";
import { FlatCompat } from "@eslint/eslintrc";

const __filename = fileURLToPath(import.meta.url);
const __dirname = dirname(__filename);

const compat = new FlatCompat({
  baseDirectory: __dirname,
});

const eslintConfig = [
  ...compat.extends("next/core-web-vitals", "next/typescript"),
  {
    rules: {
      "@typescript-eslint/no-explicit-any": "warn",
      "import/no-unresolved": "error",
    },
  },
];

export default eslintConfig;

 

 

.prettierrc

{
  "plugins": ["prettier-plugin-tailwindcss"],
  "semi": true,
  "singleQuote": true,
  "tabWidth": 2,
  "trailingComma": "all",
  "printWidth": 100,
  "bracketSpacing": true,
  "arrowParens": "always"
}

 

2. commit Message 설정

• 루트폴더에 아래와 같은 파일을 추가합니다.

[타입]: 간략한 제목 (최대 50자)

상세 내용 (필요 시 작성, 최대 72자 권장)

# 타입 예시
# feat     : 기능 추가
# fix      : 버그 수정
# docs     : 문서 업데이트
# refactor : 코드 리팩토링
# chore    : 기타 변경사항
# style    : 코드 스타일 변경
# test     : 테스트 코드 작성 및 수정
# perf     : 성능 개선
# setting : 라이브러리 추가 및 설정 추가

 

 

• commit 템플릿 설정 (한번만 설정 필요)

git config --local commit.template .gitmessage.txt

 

 

 

• 모든 레포지토리에 기본값으로 설정하려면

git config --global commit.template ~/.gitmessage.txt

 

 

3. PR템플릿 설정

• 루트폴더에서 아래경로로 파일을 생성합니다

.github/pull_request_template.md

## 📝 작업 내용

- [ ] 기능 추가
- [ ] 버그 수정
- [ ] 코드 리팩터링
- [ ] 스타일 수정
- [ ] 문서 업데이트
- [ ] 기타 (설명):

## 📌 변경 사항 및 이유
- 변경사항과 이유를 간략히 설명해주세요.

## 📷 스크린샷 (옵션)
| Before | After |
|--------|-------|
|        |       |

## ✅ 체크리스트
- [ ] 코드는 규칙을 준수합니다.
- [ ] 테스트를 통과했습니다.
- [ ] 문서를 업데이트했습니다. (필요한 경우)

• 이런식으로 PR템플릿을 설정합니다. PR템플릿은 github에서 자동으로 불러오기때문에 따로 명령어로 설정해줄 필요는 없습니다.

 

4. ISSUE 템플릿 설정

 

 

5. ReadMe 설정

프로젝트 이름

프로젝트에 대한 간단한 설명을 작성합니다.
예: 이 프로젝트는 ___ 서비스를 제공하는 웹 애플리케이션입니다.

---

🚀 시작하기

1. 레포지토리 클론

git clone https://github.com/bananana0118/repo-name.git
cd repo-name

2. 패키지 설치

npm install

3. 개발 서버 실행

npm run dev

📁 폴더 구조

/src
  ├── app            # 페이지 컴포넌트 (Next.js app 라우팅)
  ├── components       # 공통 UI 컴포넌트
  ├── hooks            # 커스텀 훅
  ├── utils            # 유틸리티 함수
  ├── styles           # 전역 스타일 정의
  └── store            # 전역 상태 관리

🛠 사용 기술 스택

• Next.js
• TypeScript
• Tailwind CSS
• ESLint / Prettier

📌 커밋 컨벤션

• feat: 새로운 기능 추가
• fix: 버그 수정
• docs: 문서 변경
• style: 코드 스타일 변경 (포맷팅 등)
• refactor: 코드 리팩터링
• test: 테스트 코드 추가/수정
• chore: 기타 변경사항
• setting : 라이브러리 추가 및 설정 추가

# 예시 커밋 메시지
[feat]: 로그인 버튼 UI 구현

- 로그인 버튼 UI를 세부구현 했습니다. (옵션)

🔍 브랜치 전략

• main: 배포 브랜치
• dev: 개발 브랜치 (기능 병합 전용)
• feature/이름: 개별 기능 개발 브랜치

PR 규칙

• PR 제목: [Feat] 기능 이름, [Fix] 버그 설명 등
• PR 생성 시 템플릿을 활용해 작업 내용 명확히 작성
• 리뷰어 지정 필수
• 본인 PR은 최소 1명 이상 리뷰 후 병합

📄 라이선스

이 프로젝트는 MIT 라이선스를 따릅니다.

 

6. husky 세팅

- 커밋메시지 템플릿을 설정했다지만, 일관성 없이 오타가 나거나 할 수 있기 때문에 커밋 메세지가 형식에 맞는지 검사하고 싶었다.

🐶 1) Husky란 ?

허스키는 Git의 특정 이벤트(커밋, 푸시 등)가 일어날 때마다 특정 스크립트를 자동으로 실행하도록 도구이다.

• 커밋 전에 (pre-commit) ESLint로 코드 검사
• 커밋 메시지를 작성할 때 (commit-msg) Commitlint로 커밋 메시지 형식 검사
• 푸시 전에 (pre-push) 자동으로 테스트 실행

🐶 2) 장점

1. 코드 품질 유지

• 매번 커밋할 때마다 코드 포매팅이나 린팅을 자동화하여 일관성 유지

2. 휴먼 에러 감소

• 잘못된 커밋 메시지나 코드가 Git 저장소에 들어가는 것을 사전 방지

3. 협업 시 코드 컨벤션 통일

• 모든 팀원이 동일한 규칙과 품질 기준을 지키도록 자동화 가능

4. 생산성 향상

• 개발자는 코드 리뷰나 CI 과정에서 생길 문제를 미리 방지하고, 더 중요한 작업에 집중 가능

 

🐶3) 커밋메세지 형식 강제 지정하기

#!/bin/sh
npx --no -- commitlint --edit ${1}

 

$1 : husky의 commit-msg 훅에서 사용되는 git에서 제공되는 인자이다. 커밋 메시지가 저장된 파일의 경로를 의미한다.

       즉 커밋을 생성할 때 입력한 메시지가 저장된 임시 파일의 경로다.

 

🐶4) 커밋메세지 형식 커스텀하기

import type { UserConfig } from "@commitlint/types";
import { RuleConfigSeverity } from "@commitlint/types";

const Configuration: UserConfig = {
  extends: ["@commitlint/config-conventional"],
  parserPreset:{
    parserOpts:{
        headerPattern: "^\\[([a-z]+)\\]: (.+)$",
        headerCorrespondence: ["type", "subject"],
    },
    },
  formatter: "@commitlint/format",
  rules: {
    "type-enum": [
      RuleConfigSeverity.Error,
      "always",
      [
        "feat",      // 기능 추가
        "fix",       // 버그 수정
        "docs",      // 문서 업데이트
        "refactor",  // 코드 리팩토링
        "chore",     // 기타 변경사항
        "style",     // 코드 스타일 변경
        "test",      // 테스트 코드 작성 및 수정
        "perf",      // 성능 개선
        "setting",   // 라이브러리 추가 및 설정 추가
        "ci",        // CI/CD 관련 작업
        "build",     // 빌드 시스템 및 의존성 변경
        "revert",    // 이전 커밋으로 되돌림
        "merge",     // 병합 관련 작업
        "hotfix",    // 긴급 수정사항
        "improve",   // 코드 개선 및 최적화
      ],
    ],
    "subject-max-length": [RuleConfigSeverity.Error, "always", 50],
    "header-max-length": [RuleConfigSeverity.Error, "always", 72],
    "body-max-line-length": [RuleConfigSeverity.Warning, "always", 72],
    "scope-case": [RuleConfigSeverity.Warning, "always", "lower-case"],
    "type-case": [RuleConfigSeverity.Error, "always", "lower-case"],
    "type-empty": [RuleConfigSeverity.Error, "never"],
    "subject-empty": [RuleConfigSeverity.Error, "never"],
  },
};

export default Configuration;

 

- 우선 세팅에 들어갈 type값은 또 추가될 수 있을것 같아서 추가해놨다.

ex) 커밋메시지 :  [feat]: 버튼 ui 수정

난 이런식으로 하고싶었기 때문에 headerPattern에 정규식을 추가하여 형식을 맞춰주었다.

headerPattern을 설정하면 꼭 headerCorrespondence를 설정해주어야 하는데, 각각 들어가야 하는 변수이름을 넣어주면 된다.

 

커밋을 할 때, 오타와 같은 휴먼에러를 잡아준다.

 

- 프롬프트를 이용하여 휴먼에러를 최소화 하는 방법이 있지만 커밋할때마다 프롬프트 엔터치면서 하면 귀찮을 것 같아서 그냥 패스했다.

 

---

 

 

템플릿을 설정해두면 추후에 프로젝트를 만들 때 일관성을 유지할 수 있고 귀찮은 설정을 할 필요가 없다.
그때 그때 필요한것들은 커스텀 할 수 있도록 최대한 러프하게 템플릿을 만들었다.

허스키로 commit lint도 추가할 생각이다.

 

Reference : 

https://velog.io/@himprover/%EB%82%B4%EA%B0%80-%EC%93%B0%EB%8A%94-Next.js-%EB%B3%B4%EC%9D%BC%EB%9F%AC-%ED%94%8C%EB%A0%88%EC%9D%B4%ED%8A%B8-%EB%A7%8C%EB%93%A4%EA%B8%B0