Next.js Boilerplate

이 Boilerplate는 다음 기술들을 사용하여 간단한 CRUD 애플리케이션을 구축합니다:

• Next.js
• React
• Tailwind CSS
• React-Query
• Recoil
• Prisma
• React Hook Form
• React-Table
• shadcn/ui

살펴 보기

CodeSandbox 에서도 체험해 볼 수 있습니다: CodeSandbox

또는 Github Codespace를 이용해서 살펴 볼 수 있습니다 :

⚠️ CRUD가 제대로 작동하지 않는다면 .env 에서 NEXT_PUBLIC_API_URI를 환경에 맞게 수정해주세요.

설치 방법

git clone https://github.com/ATG-AMS/ams-next-boilerplate.git
cd ams-next-boilerplate
npm install

사용 방법

1. Prisma의 데이터베이스 설정(DATABASE_URL)과 요청 서버(NEXT_PUBLIC_API_URI)을 /.env에서 확인하고 필요한 설정을 조정하세요.

2. 데이터베이스 마이그레이션: ( ⚠️ 필요한 경우에만)

   npx prisma migrate dev --name="<마이그레이션 명>"

3. Next.js 개발 서버 실행:

   npm run dev # default Next.js bundler
   # 또는
   npm run turbo # (experimental) Next.js Turbopack

기능

Table을 이용한 간단한 CRUD를 체험해볼 수 있습니다.

• CRUD 연산: 간단한 CRUD 작업을 위한 API 엔드포인트 및 프론트엔드 구성.
• State Management: Recoil을 사용한 상태 관리.
• Data Fetching: React-Query를 사용하여 데이터 가져오기 및 캐싱.
• Database Integration: Prisma를 사용하여 데이터베이스 연동.
• UI Components: @shadcn/ui 컴포넌트를 사용하여 모던한 UI 구성.

기여

프로젝트에 기여하고 싶으시면, PR을 열어 주세요!