next auth roles template

다음 인증 역할 템플릿

이 Next.js 템플릿으로 최고 속도로 시작해보세요!

설치 · Tech Stack + 기능 · 작성자

설치

다음 명령을 사용하여 이 저장소를 로컬로 복제하고 생성합니다.

npx create-next-app my-saas-project --example " https://github.com/mickasmt/next-auth-roles-template "

또는 Vercel을 사용하여 배포합니다.

단계

1. pnpm을 사용하여 종속성을 설치합니다.

pnpm install

2. .env.example .env.local 에 복사하고 변수를 업데이트합니다.

cp .env.example .env.local

3. 개발 서버를 시작합니다.

pnpm run dev

4. 원하지 않는 부분을 제거하세요.

터미널에서 pnpm run remove-content 명령을 사용하여 프로젝트의 특정 부분을 제거할 수 있습니다. 이 명령은 다음 매개변수를 지원합니다.

• --blog : 프로젝트에서 블로그 섹션을 제거합니다.
• --docs : 프로젝트에서 문서 섹션을 제거합니다.

권장사항

• 두 섹션 모두 제거 : 매개변수( --blog 또는 --docs )를 지정하지 않고 pnpm run remove-content 사용하는 것이 좋습니다. 이렇게 하면 "문서" 다음에 "블로그"를 제거하거나 그 반대의 경우 일부 문서가 삭제/업데이트되지 않을 수 있으므로 모든 관련 문서가 제대로 제거됩니다.

예

1. 블로그 및 설명서 섹션을 모두 제거하려면 다음을 수행하세요.

pnpm run remove-content

2. 블로그 섹션만 제거하려면:

pnpm run remove-content --blog

3. 문서 섹션만 제거하려면 다음을 수행하십시오.

pnpm run remove-content --docs

메모

이 프로젝트를 업데이트하기 위해 npm-check-updates 패키지를 사용합니다.

프로젝트를 업데이트하려면 ncu -i --format group 명령을 사용하세요.

기술 스택 + 기능

프레임워크

• Next.js – 최고의 개발자 경험으로 고성능 앱을 구축하기 위한 React 프레임워크
• Auth.js – Google, Twitter, GitHub 등과 같은 제공업체를 통해 사용자 인증을 쉽게 처리합니다.
• Prisma - Typescript 우선 Node.js용 ORM
• React Email – 효율적이고 유연한 이메일 개발을 위한 다목적 이메일 프레임워크

플랫폼

• Vercel – git을 사용하여 변경 사항을 쉽게 미리 보고 배포
• 재전송 – 간소화된 이메일 개발을 위한 강력한 이메일 프레임워크
• Neon – 자동 확장, 분기, 무한한 스토리지 및 넉넉한 무료 등급을 갖춘 서버리스 Postgres입니다.

UI

• Tailwind CSS – 신속한 UI 개발을 위한 유틸리티 우선 CSS 프레임워크
• Shadcn/ui – Radix UI 및 Tailwind CSS를 사용하여 구축된 재사용 가능한 구성 요소
• Lucide – 아름답고 단순하며 픽셀까지 완벽한 아이콘
• next/font – 성능 향상을 위해 사용자 정의 글꼴을 최적화하고 외부 네트워크 요청을 제거합니다.
• ImageResponse – 가장자리에서 동적 오픈 그래프 이미지 생성

후크 및 유틸리티

• useIntersectionObserver – 요소가 뷰포트에 들어오거나 나갈 때 관찰하는 React 후크
• useLocalStorage – 브라우저의 로컬 저장소에 데이터를 유지합니다.
• useScroll – 스크롤 위치를 관찰하기 위한 반응 후크(예)
• nFormatter – 1.2k 또는 1.2M 과 같은 접미사가 포함된 숫자 형식 지정
• capitalize - 문자열의 첫 글자를 대문자로 표시합니다.
• truncate – 문자열을 지정된 길이로 자릅니다.
• use-debounce – 함수 호출/상태 업데이트 디바운스

코드 품질

• TypeScript – 엔드투엔드 유형 안전성을 위한 정적 유형 검사기
• Prettier – 일관된 코드 스타일을 위한 독창적인 코드 포맷터
• ESLint – Next.js 및 TypeScript용 플러그형 린터

여러 가지 잡다한

• Vercel Analytics – 개인 정보를 보호하는 방식으로 고유 방문자, 페이지 조회수 등을 추적합니다.

작가

이 프로젝트는 Next SaaS Stripe Starter를 기반으로 합니다.

2023년 @miickasmt가 제작했으며 MIT 라이선스에 따라 출시되었습니다.

크레딧

대시보드 사이드바 코드의 일부를 제공해 주신 Hosna Qasmei에게 감사드립니다.