/next-boilerplate

πŸ«– Next.js Boilerplate by sookyeongyeom

Primary LanguageTypeScript

πŸ«– Next.js Boilerplate

sookyeongyeom의 λ³΄μΌλŸ¬ν”Œλ ˆμ΄νŠΈμž…λ‹ˆλ‹€ :D

μ§€μ†μ μœΌλ‘œ κ°œμ„ ν•˜μ—¬ μ—…λ°μ΄νŠΈν•©λ‹ˆλ‹€.
μŠ€νƒ λ³€κ²½ κ³Όμ • 및 μƒμ„Έν•œ μ½”λ“œ μ»¨λ²€μ…˜μ€ μ•„λž˜ μœ„ν‚€μ—μ„œ ν™•μΈν•˜μ‹€ 수 μžˆμŠ΅λ‹ˆλ‹€.

πŸ“– 상세 μœ„ν‚€ λ°”λ‘œκ°€κΈ°

Index

1. μ‹œμž‘ν•˜κΈ°

1. Clone & Install

$ git clone https://github.com/sookyeongyeom/next-boilerplate
$ cd next-boilerplate
$ git remote remove origin
$ yarn install

2. Run

$ yarn dev

2. 기술 μŠ€νƒ





3. 전체 ꡬ쑰 ν•œλˆˆμ— 보기

β”œβ”€β”€ .github/workflows
β”‚   β”œβ”€β”€ dev.yml       // Dev μ„œλ²„ λ°°ν¬μžλ™ν™”λ₯Ό μœ„ν•œ yml
β”‚   └── prod.yml      // Prod μ„œλ²„ λ°°ν¬μžλ™ν™”λ₯Ό μœ„ν•œ yml
β”œβ”€β”€ pages
β”œβ”€β”€ public
β”œβ”€β”€ src
β”‚   β”œβ”€β”€ @types
β”‚   β”‚   β”œβ”€β”€ api       // API μš”μ²­, 응닡 μŠ€ν‚€λ§ˆ νƒ€μž…
β”‚   β”‚   β”œβ”€β”€ client    // API μ œμ™Έ λͺ¨λ“  νƒ€μž…
β”‚   β”‚   └── dep       // μ™ΈλΆ€ λͺ¨λ“ˆ νƒ€μž… μ˜€λ²„λΌμ΄λ”©
β”‚   β”œβ”€β”€ api
β”‚   β”‚   β”œβ”€β”€ core      // Axios μΈμŠ€ν„΄μŠ€
β”‚   β”‚   β”œβ”€β”€ hooks     // React Query Hooks
β”‚   β”‚   └── promises  // API μš”μ²­ Promises
β”‚   β”œβ”€β”€ atoms         // Jotai Atoms
β”‚   β”œβ”€β”€ components
β”‚   β”œβ”€β”€ constants
β”‚   β”œβ”€β”€ hooks         // Custom Hooks
β”‚   β”œβ”€β”€ styles
β”‚   └── utils         // μœ ν‹Έ ν•¨μˆ˜
β”œβ”€β”€ next-env.d.ts
β”œβ”€β”€ next.config.js
β”œβ”€β”€ package.json
β”œβ”€β”€ tsconfig.json
β”œβ”€β”€ yarn-error.log
β”œβ”€β”€ yarn.lock
β”œβ”€β”€ Dockerfile        // λ°°ν¬μžλ™ν™”λ₯Ό μœ„ν•œ λ„μ»€νŒŒμΌ
└── README.md

4. κΈ°λ³Έ μ»΄ν¬λ„ŒνŠΈ

  1. components/layouts/DefaultLayout.tsx
  2. components/hocs/RouterGuard.tsx
  3. components/seo/CustomHead.tsx

5. κΈ°λ³Έ μ»€μŠ€ν…€ ν›…

  1. hooks/useChange.ts
  2. hooks/useCustomRouter.ts
  3. hooks/useInput.ts
  4. hooks/useMobile.ts
  5. hooks/usePreventScroll.ts
  6. hooks/useQueryString.ts
  7. hooks/useRouteToPath.ts
  8. hooks/useSwitch.ts
  9. hooks/useUniqueId.ts

6. κΈ°λ³Έ μƒμˆ˜

  1. constants/keys.tsx
  2. constants/paths.tsx

7. κΈ°λ³Έ μŠ€νƒ€μΌ μƒμˆ˜

  1. styles/alphaToHex.ts - 0~1을 Hex둜 λ³€ν™˜ν•œ κ°’λ“€μ˜ λͺ¨μŒ
  2. styles/colors.ts
  3. styles/devices.ts - λ·°ν¬νŠΈμ— λ”°λ₯Έ λ””λ°”μ΄μŠ€ ꡬ뢄 κΈ°μ€€
  4. styles/fonts.ts - κΈ°λ³Έ μ•„ν† λ―Ή νƒ€μ΄ν¬κ·Έλž˜ν”Ό
  5. styles/global.ts - κΈ°λ³Έ μ „μ—­ μŠ€νƒ€μΌ
  6. styles/reset.ts - κΈ°λ³Έ 리셋 μŠ€νƒ€μΌ
  7. styles/sizes.ts
  8. styles/svgs.tsx

8. κΈ°λ³Έ μœ ν‹Έ

  1. utils/fetchAndSet.ts
  2. utils/setLayout.ts
  3. utils/withoutPropagation.ts

9. 컀밋 μ»¨λ²€μ…˜

1. 브랜치 이름 μ»¨λ²€μ…˜

Feature/[κΈ°λŠ₯μš”μ•½]

- 맨 μ²«κΈ€μž F만 λŒ€λ¬Έμžλ‘œ, κΈ°λŠ₯μš”μ•½μ€ μ†Œλ¬Έμžλ‘œ μž‘μ„±ν•œλ‹€.
- λ„μ–΄μ“°κΈ°λŠ” ν•˜μ΄ν”ˆμœΌλ‘œ κ΅¬λΆ„ν•œλ‹€.

ex) Feature/modal-publishing

2. 컀밋 메세지 μ»¨λ²€μ…˜

<νƒœκ·Έ>: <제λͺ©>

- νƒœκ·Έμ˜ μ²«κΈ€μžλŠ” λŒ€λ¬Έμžλ‘œ μž‘μ„±ν•œλ‹€.
- νƒœκ·ΈλŠ” μ•„λž˜μ— 적힌 κ²ƒλ“€λ§Œ μ‚¬μš©ν•œλ‹€.

Feat: μƒˆλ‘œμš΄ κΈ°λŠ₯ μΆ”κ°€, κΈ°λŠ₯ 둜직 λ³€κ²½
Fix: 버그 μˆ˜μ •
Refactor: μ½”λ“œ λ¦¬νŒ©ν† λ§ (κΈ°λŠ₯ λ³€ν™” X)
Style: μ½”λ“œ ν¬λ§·νŒ…, μ½”λ“œ 변경이 μ—†λŠ” 경우
Chore: λΉŒλ“œ 업무 μˆ˜μ •, νŒ¨ν‚€μ§€ λ§€λ‹ˆμ € μˆ˜μ •
Docs: λ¬Έμ„œ μˆ˜μ •, 주석

3. 머지 μ „λž΅

λͺ¨λ“  Feature λΈŒλžœμΉ˜λŠ” Squash Merge ν•©λ‹ˆλ‹€.