NextJS Boilerplate

프론트엔드를 위한 Next.js boilerplate입니다.

많은 코드가 Charka UI와 React Query가 결합한 형태입니다.

마음대로 클론을 하셔도 되고, 필요한 부분만 복사해 가셔도 됩니다.

Demo

데모사이트의 데이터는 임의로 삭제될 수 있습니다. link

Getting Started

의존성 설치 후

yarn

Next.js 서버를 시작합니다.

yarn dev

Main Features

• Global Modal Provider (Zustand)
• Global Toast Message (React Query)
• Optimistic Update (React Query, refer to github)
• WYSIWYG Editor (Quill)
• Forms (React Hook Form)
• Table (React Table)
• Infinite List (React Query)
• Virtual List (React Virtual)
• Translation (React I18next)

라이브러리

Core

• Next.js

UI

• Charka UI
• React Table
• Quill
• React Icons

Data

• Axios
• Zustand
• React Query
• React Hook Form

Utilities

• React Virtual
• React I18next

Code

• TypeScript
• ESLint
• Prettier

Attention

• 이 프로젝트는 풀 스택 개발을 위해 개발되지 않았습니다. 프론트엔드 개발에만 초점이 맞춰져 있습니다.

• 서버 사이드 렌더링은 사용되지 않았습니다. 모든 것이 클라이언트 사이드 렌더링으로만 작동합니다. 라우터만 변경한다면 리액트와 쉽게 통합이 가능합니다.

• 서버 사이드에 작성된 코드들은 오로지 예시를 위해 개발되었으므로, 사용하지 않는다면 삭제해 주셔야 합니다. 서버 사이드 코드를 삭제할 시 아래 라이브러리들을 추가로 제거해 주셔야 합니다.

  • formidable (폼 파싱을 위해 사용)
  • aws-sdk (파일 업로드를 위해 사용)

Previews