next kickstart

다음 킥 스타트

기능이 포장 된 다음 다음 .js 보일러 플레이트. 제로 설정. 가장자리 준비.

일부 기능은 환경 변수 (기능 목록에 표시)에 따라 달라 지므로 활성화해야합니다. 앱이 설정없이 실행되도록 기본적으로 비활성화됩니다. @enable {feature} 나타나는 위치 아래에서 모든 줄을 벗어나서 활성화 할 수 있습니다.

특징

다른 기능 세트에 대한 저장소 지점보기 (예 : BUN)

핵심

• TypeScript- 유형 안전을 극대화하도록 구성되었습니다
• T3 ENV- 환경 변수 검증
• TRPC- 클라이언트 및 서버 구성 요소에서 작동하는 엔드 투 엔드 타입 안전 API 생성
• ⚡ websockets- 실시간 통신 (푸셔 사용이지만 대안을 위해 교체 할 수 있음)
  • ? 엔드 투 엔드 타입 안전 이벤트를 위해 TRPC와 통합됩니다
• ? 이슬비 - 최대 유형 안전성이있는 ORM
• Lucia Auth- 유연하고 안전한 인증
  • ? 이슬비와 통합하여 인증 데이터를 저장합니다

개발

• ? ESLINT- 일관된 코드 표준
• 더 예쁘게 - 일관된 코드 스타일
• ? Tailwind CSS- 유틸리티 우선 CSS 프레임 워크
• ? Shadcn/UI- Radix UI 및 Tailwind CSS로 구축 된 구성 요소
• MDX- 구성 요소와 함께 Markdown을 사용하십시오
• ? 절대 가져 오기 - 더 쉽고 깨끗한 모듈 수입
• vs 코드 구성 - 손쉬운 디버깅을위한 구성

테스트

• ? 유리한 - 유연한 테스트 프레임 워크
• ? React Testing Library- 관리 가능한 구성 요소 테스트
  • ? 테스트 프레임 워크로서 Vitest와 통합됩니다
• ? 극작가 -여러 환경에 대한 엔드 투 엔드 테스트

전개

• 번들 분석기 - pnpm run build:analyze
• ? Next -PWA- 웹 사이트를 PWA (Progressive Web App)로 만듭니다.
• ? Docker- (지역 및 제작) Docker -Compose 및 Dockerfiles가 어디든 달리기를위한 Dockerfiles
• Github 동작 - 강력한 CI/CD

? 시작하기

옵션 1 : 복제 및 Vercel로 배포하십시오

? 옵션 2 : 클론 및 로컬로 달리십시오

1. 포크이 저장소 (선택 해제 ' main 지점을 다른 지점 / 기능 세트에 관심이있는 경우에만 복사하십시오)
2. 새 저장소를 복제하십시오
3. 종속성을 설치하고 개발 서버를 실행하십시오

• PNPM과 함께

  pnpm install
  pnpm run dev

• 또는 Docker와 함께

  docker-compose --file docker/dev/docker-compose.yml up

구성

도커

• .dockerignore
• docker/ - Dockerfile 및 Docker -Compose.yml 개발 및 생산

이슬비

(활성화 필요)

• src/db/
• src/lib/db.ts
• drizzle.config.ts

eslint

• .eslintrc.json

Github 동작

• .github/workflows/ci.yml 유형 확인 및 Linting (따라서이 오류는 next.config.mjs 에서 무시됩니다)

루시아 인증

(활성화 필요)

• src/app/api/auth
• src/app/auth
• src/components/auth.tsx
• src/db/schemas/auth.ts) 데이터베이스에 인증 데이터를 저장합니다
• src/lib/auth.ts
• types/lucia.d.ts

예

• src/app/examples/profile/page.tsx

MDX

• mdx-components.tsx

Next-PWA

• public/icon-512x512.png
• public/manifest.json
• next.config.mjs

극작가

• e2e/
• playwright.config.ts

더 예쁘다

• .eslintrc.json
• .prettierignore
• .prettierrc.json

반응 테스트 라이브러리

• src/app/page.test.tsx
• testing/setup.ts

shadcn/ui

• src/components/providers/theme-provider.tsx
• src/components/ui/
• src/components/theme-toggle.tsx
• components.json

T3 Env

• src/env.mjs 환경 변수를 구성합니다
• next.config.mjs .config.mjs- 환경 변수는 빌드 타임에 검증됩니다

테일 윈드 CSS

• src/styles/globals.css
• tailwind.config.js

trpc

• src/app/api/trpc/[trpc]/route.ts
• src/components/providers/trpc-provider.tsx
• src/trpc/

예

• src/app/examples/client-component/page.tsx 클라이언트 구성 요소에서 사용합니다
• src/app/examples/server-component/page.tsx 서버 구성 요소에서 사용합니다

TypeScript

• tsconfig.json Create-next-App의 모든 수정 사항이 주석으로 설명됩니다.
• types/reset.d.ts TS-Reset을 사용하여 유형 안전성을 증가시킵니다

최소한

• testing/setup.ts
• vitest.config.ts

대 코드

• .vscode/extensions.json 권장 작업 공간 확장자
• .vscode/launch.json 디버그 구성
• .vscode/settings.json 프로젝트 typecript 버전을 사용합니다

푸셔가있는 websockets

(활성화 필요)

• src/hooks/useEvent.ts
• src/lib/events.ts
• src/trpc/methods.ts

예

• src/app/examples/websockets/page.tsx