Next js Boilerplate 다운로드 Next js Boilerplate 소스 코드 다운로드

Next js Boilerplate

AI 소스 코드

v3.60.5

다운로드

JS 15+, Tailwind CSS 3.4 및 TypeScript의 BoilerPlate 및 스타터.

다음 JS 스타터 배너

앱 라우터, Tailwind CSS 및 TypeScript가있는 BoilerPlate 및 Starter ⚡️ 개발자 경험 우선 순위 우선 순위 우선 순위를 정합니다. Next.js, TypeScript, Eslint, Pretier, Husky, Lint-Stage, Vitest (교체), 테스트 라이브러리, Playwright, Commitlint, VScode, Tablewind CSS, DataBl, DataBal, Database, Database, Database, DataBase, Database, DataBase, Testing Library, Testing Library, Testing Library. SQLITE 및 MYSQL), Sentry를 사용한 오류 모니터링, Pino.JS 및 Log Management로 로깅, 코드, 스토리 북, 다중 언어 (i18N)로 모니터링, ArcJet (봇 감지, 속도 제한, 공격 보호 등)을 확보합니다.

이 프로젝트를 복제하고이를 사용하여 다음 Next.js 프로젝트를 만듭니다. 작업 인증 시스템이 포함 된 Next.js Boilerplate에서 라이브 데모를 확인할 수 있습니다.

스폰서




여기에 로고를 추가하십시오

데모

라이브 데모 : Next.js 보일러 플레이트

가입하십시오	로그인

특징

개발자는 먼저, 매우 유연한 코드 구조를 경험하고 필요한 것을 유지합니다.

app 앱 라우터 지원이 포함 된 다음 .js
유형 확인 typescrip
? Tailwind CSS와 통합
typeScript 및 반응의 엄격한 모드 19
서기와의 인증 : 가입, 로그인, 로그 아웃, 비밀번호를 잊고 비밀번호를 재설정하는 등.
? Magic Links, MFA (Multi-Factor Auth), Social Auth (Google, Facebook, Twitter, Github, Apple 등)를 사용한 암호없는 인증, Passkeys와의 암호없는 로그인, 사용자 가장.
? Drizzleorm이 포함 된 유형-안전 ORM, Postgresql, SQLite 및 MySQL과 호환됩니다.
? pglite가있는 오프라인 및 지역 개발 데이터베이스
다음 Intl 및 Crowdin이있는 다중 언어 (i18n)
t3 env와 함께 유형-안전 환경 변수
반응 후크 양식으로 양식 처리
? ZOD가있는 검증 라이브러리
? eslint가있는 Linter (Default Next.js, Next.js Core Web Vitals, Tailwind CSS 및 Antfu 구성)
? 더 예쁘고 코드 포맷터
? git 후크를위한 허스키
Git Steaged Files에서 Linters를 실행하기위한 Lint-Stage
? Commitlint와 함께 보풀 git 커밋
? Commitizen과 함께 표준 준수 커밋 메시지를 작성하십시오
? Vitest 및 React Testing Library를 사용한 단위 테스트
? 극작가와의 통합 및 E2E 테스트
? GitHub 작업으로 풀 요청시 테스트를 실행합니다
? UI 개발을위한 스토리 북
센트리로 오류 모니터링
codecov를 통한 코드 커버리지
더 나은 스택으로 pino.js 및 로그 관리로 로깅
점검을 통해 코드로 모니터링합니다
? 보안 및 봇 보호 (Arcjet)
? 시맨틱 릴리스가있는 자동 변경 사항 생성
? Percy와의 시각적 테스트 (선택 사항)
@ prefix를 사용한 절대 가져 오기
? VSCODE 구성 : 디버그, 설정, 작업 및 확장
? SEO 메타 데이터, JSON-LD 및 오픈 그래프 태그
? ️ siteemap.xml 및 robots.txt
drizzle 스튜디오 및 이슬비 키트를 사용한 CLI 마이그레이션 도구를 사용한 데이터베이스 탐색
번들러 분석기
? 무료 미니멀리스트 테마를 포함하십시오
? 등대 점수를 최대화합니다

Next.js의 내장 기능 :

html & css를 최소화하십시오
? 라이브 리로드
cache 캐시 파열

철학

당신에게서 숨겨져있는 것은 없으므로 요구 사항과 선호도에 맞게 필요한 조정을 할 수 있습니다.
의존성은 매월 정기적으로 업데이트됩니다
선불 비용없이 무료로 시작하십시오
사용자 정의하기 쉽습니다
최소 코드
스타일되지 않은 템플릿
SEO 친화적입니다
생산 준비

요구 사항

node.js 20+ 및 npm

시작하기

지역 환경에서 다음 명령을 실행하십시오.

git clone --depth=1 https://github.com/ixartz/Next-js-Boilerplate.git my-project-name
cd my-project-name
npm install

정보의 경우 모든 의존성은 매월 업데이트됩니다.

그런 다음 실행을 통해 라이브 재 장전으로 개발 모드로 프로젝트를 로컬로 실행할 수 있습니다.

npm run dev

http : // localhost : 3000을 좋아하는 브라우저와 함께 프로젝트를 볼 수 있습니다.

인증을 설정합니다

시작하려면 clerk.com에서 서기 계정을 만들고 서기 대시 보드에서 새 신청서를 만들어야합니다. 이 작업을 마치면 NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY 및 CLERK_SECRET_KEY 값을 복사하여 .env.local 파일 (Git에서 추적하지 않음)에 추가하십시오.

NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=your_clerk_pub_key
CLERK_SECRET_KEY=your_clerk_secret_key

이제 가입, 로그인, 가입, 비밀번호 잊어 버리고 암호 재설정, 비밀번호 재설정, 프로필 업데이트, 비밀번호 업데이트, 이메일 삭제 등과 같은 기능을 포함하여 Next.js와 함께 완벽하게 기능적 인 인증 시스템이 있습니다.

원격 데이터베이스를 설정합니다

이 프로젝트는 PostgreSQL, SQLite 및 MySQL 데이터베이스와 호환되는 유형-안전 ORM 인 DrizzleOrm을 사용합니다. 기본적으로 프로젝트는 PostgreSQL과 원활하게 작업하도록 구성되며 선택한 PostgreSQL 데이터베이스 제공 업체를 선택할 수있는 유연성이 있습니다.

번역 (i18n) 설정

번역을 위해이 프로젝트는 Crowdin과 결합 된 next-intl 사용합니다. 개발자는 영어 (또는 다른 기본 언어) 버전 만 돌봐야합니다. 다른 언어에 대한 번역은 Crowdin에 의해 자동으로 생성되고 처리됩니다. Crowdin을 사용하여 번역 팀과 협력하거나 기계 번역의 도움으로 메시지를 직접 번역 할 수 있습니다.

번역 (i18n)을 설정하려면 crowdin.com에서 계정을 만들고 새 프로젝트를 만듭니다. 새로 생성 된 프로젝트에서는 프로젝트 ID를 찾을 수 있습니다. 계정 설정> API로 이동하여 새로운 개인 액세스 토큰을 만들어야합니다. 그런 다음 GitHub 작업에서 다음 환경 변수를 정의해야합니다. CROWDIN_PROJECT_ID 및 CROWDIN_PERSONAL_TOKEN .

GitHub 조치에서 환경 변수를 정의한 후 현지화 파일은 새로운 커밋을 main 지점으로 밀어 넣을 때마다 크라우드와 동기화됩니다.

프로젝트 구조

 .
├── README.md                       # README file
├── .github                         # GitHub folder
├── .husky                          # Husky configuration
├── .storybook                      # Storybook folder
├── .vscode                         # VSCode configuration
├── migrations                      # Database migrations
├── public                          # Public assets folder
├── src
│   ├── app                         # Next JS App (App Router)
│   ├── components                  # React components
│   ├── libs                        # 3rd party libraries configuration
│   ├── locales                     # Locales folder (i18n messages)
│   ├── models                      # Database models
│   ├── styles                      # Styles folder
│   ├── templates                   # Templates folder
│   ├── types                       # Type definitions
│   ├── utils                       # Utilities folder
│   └── validations                 # Validation schemas
├── tests
│   ├── e2e                         # E2E tests, also includes Monitoring as Code
│   └── integration                 # Integration tests
├── tailwind.config.js              # Tailwind CSS configuration
└── tsconfig.json                   # TypeScript configuration

사용자 정의

FIXME: 빠른 사용자 정의를 작성합니다. 다음은 사용자 정의해야 할 가장 중요한 파일입니다.

public/apple-touch-icon.png , public/favicon.ico , public/favicon-16x16.png 및 public/favicon-32x32.png : 웹 사이트 Favicon
src/utils/AppConfig.ts : 구성 파일
src/templates/BaseTemplate.tsx : 기본 테마
next.config.mjs : 다음 .js 구성
.env : 기본 환경 변수

추가 사용자 정의를 위해 소스 코드에 대한 전체 액세스 권한이 있습니다. 제공된 코드는 프로젝트를 시작하는 데 도움이되는 예일뿐입니다. 하늘은 한계입니다.

데이터베이스 스키마를 변경하십시오

프로젝트에서 데이터베이스 스키마를 수정하려면 ./src/models/Schema.ts 에있는 스키마 파일을 업데이트 할 수 있습니다. 이 파일은 이슬비 ORM 라이브러리를 사용하여 데이터베이스 테이블의 구조를 정의합니다.

스키마를 변경 한 후 다음 명령을 실행하여 마이그레이션을 생성합니다.

npm run db:generate

스키마 변경을 반영하는 마이그레이션 파일이 생성됩니다. 다음 데이터베이스 상호 작용 중에 마이그레이션이 자동으로 적용되므로 수동으로 실행하거나 다음.js 서버를 다시 시작할 필요가 없습니다.

메시지 형식을 커밋하십시오

이 프로젝트는 기존 Commits 사양을 따릅니다. 즉, 모든 커밋 메시지는 그에 따라 형식화되어야합니다. 커밋 메시지를 작성하는 데 도움을주기 위해이 프로젝트는 커밋 프로세스를 안내하는 대화식 CLI 인 Commitizen을 사용합니다. 사용하려면 다음 명령을 실행하십시오.

npm run commit

기존 커밋을 사용하는 이점 중 하나는 CHANGELOG 파일을 자동으로 생성하는 기능입니다. 또한 릴리스에 포함 된 커밋 유형에 따라 다음 버전 번호를 자동으로 결정할 수 있습니다.

테스트

모든 단위 테스트는 동일한 디렉토리의 소스 코드와 함께 위치하여 쉽게 찾을 수 있습니다. 이 프로젝트는 단위 테스트를 위해 Vitest 및 React 테스트 라이브러리를 사용합니다. 다음 명령으로 테스트를 실행할 수 있습니다.

npm run test

통합 및 E2E 테스트

이 프로젝트는 극작가를 사용하여 통합 및 엔드 투 엔드 (E2E) 테스트를 사용합니다. 다음 명령으로 테스트를 실행할 수 있습니다.

npx playwright install # Only for the first time in a new environment
npm run test:e2e

지역 환경에서 시각적 테스트가 비활성화되고 터미널 [percy] Percy is not running, disabling snapshots. . 기본적으로 시각적 테스트는 GitHub 작업에서만 실행됩니다.

에지 런타임 활성화 (선택 사항)

앱 라우터 폴더는 Edge 런타임과 호환됩니다. 다음 줄 src/app/layouts.tsx 추가하여 활성화 할 수 있습니다.

 export const runtime = 'edge' ;

정보의 경우 데이터베이스 마이그레이션은 Edge 런타임과 호환되지 않습니다. 따라서 src/libs/DB.ts 에서 자동 마이그레이션을 비활성화해야합니다.

 await migrate ( db , { migrationsFolder : './migrations' } ) ;

비활성화 한 후에는 수동으로 마이그레이션을 실행해야합니다.

npm run db:migrate

또한 데이터베이스 스키마를 업데이트 할 때마다 명령을 실행해야합니다.

생산에 배치

빌드 프로세스 중에 데이터베이스 마이그레이션이 자동으로 실행되므로 수동으로 실행할 필요가 없습니다. 그러나 환경 변수에서 DATABASE_URL 정의해야합니다.

그런 다음 다음과 같이 생산 빌드를 생성 할 수 있습니다.

$ npm run build

보일러 플레이트의 최적화 된 생산 빌드를 생성합니다. 생성 된 빌드를 테스트하려면 실행 :

$ npm run start

또한 자신의 키를 사용하여 환경 변수 CLERK_SECRET_KEY 정의해야합니다.

이 명령은 프로덕션 빌드를 사용하여 로컬 서버를 시작합니다. 이제 선호하는 브라우저에서 http : // localhost : 3000을 열어 결과를 확인할 수 있습니다.

오류 모니터링

이 프로젝트는 센트리를 사용하여 오류를 모니터링합니다. 개발 환경에서는 추가 설정이 필요하지 않습니다. 다음 .js 보일러 플레이트는 센트리 및 스포트라이트 (개발을위한 센트리)를 사용하도록 미리 구성되어 있습니다. 모든 오류는 로컬 스포트라이트 인스턴스로 자동으로 전송되므로 로컬에서 센트리를 경험할 수 있습니다.

생산 환경의 경우 센트리 계정과 새 프로젝트를 만들어야합니다. 그런 다음, next.config.mjs 에서는 withSentryConfig 함수에서 org 및 project 속성을 업데이트해야합니다. 또한 Sentry DSN을 sentry.client.config.ts , sentry.edge.config.ts 및 sentry.server.config.ts 에 추가하십시오.

코드 적용 범위

다음 .js 보일러 플레이트는 코드 커버리지보고 솔루션을 위해 Codecov에 의존합니다. CodeCov를 활성화하려면 CodeCov 계정을 작성하여 GitHub 계정에 연결하십시오. 저장소가 Codecov 대시 보드에 표시되어야합니다. 원하는 저장소를 선택하고 토큰을 복사하십시오. GitHub 조치에서 CODECOV_TOKEN 환경 변수를 정의하고 토큰을 붙여 넣으십시오.

GitHub 작업 비밀로 CODECOV_TOKEN 작성하고 소스 코드에 직접 붙여 넣지 마십시오.

벌채 반출

이 프로젝트는 로깅에 pino.js를 사용합니다. 개발 환경에서 로그는 기본적으로 콘솔에 표시됩니다.

생산을 위해이 프로젝트는 이미 더 나은 스택과 통합되어 SQL을 사용하여 로그를 관리하고 쿼리합니다. 더 나은 스택을 사용하려면 더 나은 스택 계정을 생성하고 새 소스를 만들어야합니다. 더 나은 스택 로그 대시 보드> 소스> 연결 소스로 이동하십시오. 그런 다음 소스에 이름을 제시하고 플랫폼으로 node.js를 선택해야합니다.

소스를 만들면 소스 토큰을보고 복사 할 수 있습니다. 환경 변수에서 토큰을 LOGTAIL_SOURCE_TOKEN 변수에 붙여 넣으십시오. 이제 모든 로그는 더 나은 스택으로 자동으로 전송되고 섭취됩니다.

점검 모니터링

이 프로젝트는 Checkly를 사용하여 생산 환경이 항상 시작되고 실행되고 있는지 확인합니다. 정기적 인 간격으로 Checkly는 *.check.e2e.ts Extension으로 끝나는 테스트를 실행하고 테스트가 실패한 경우 알려줍니다. 또한 여러 위치에서 테스트를 실행하여 애플리케이션을 전 세계적으로 사용할 수 있도록 유연하게 유연합니다.

Checkly를 사용하려면 먼저 웹 사이트에서 계정을 작성해야합니다. 계정을 작성한 후 Checkly 대시 보드에서 새 API 키를 생성하고 GitHub 작업에서 CHECKLY_API_KEY 환경 변수를 설정하십시오. 또한 CHECKLY_ACCOUNT_ID 정의해야하며 사용자 설정> 일반의 Checkly 대시 보드에서도 찾을 수 있습니다.

설정을 완료하려면 자체 이메일 주소 및 생산 URL로 checkly.config.ts 파일을 업데이트하십시오.

ArcJet 보안 및 봇 보호

이 프로젝트는 ArcJet을 사용하여 보안으로 사용하여 코드 제품으로 개별적으로 사용하거나 결합 할 수있는 여러 기능을 포함하여 사이트에 깊이있는 방어를 제공합니다.

ArcJet을 설정하려면 무료 계정을 작성하고 API 키를 얻으십시오. 그런 다음 ARCJET_KEY 환경 변수에 추가하십시오.

ArcJet은 봇 감지와 ArcJet Shield Waf : 두 가지 주요 기능으로 구성됩니다.

봇 감지는 검색 엔진, 미리보기 링크 생성기 (Slack 및 Twitter 미리보기)를 허용하고 일반적인 가동 시간 모니터링 서비스를 허용하도록 구성됩니다. 스크레이퍼 및 AI 크롤러와 같은 다른 모든 봇이 차단됩니다. 허용 또는 차단할 추가 봇 유형을 구성 할 수 있습니다.
ArcJet Shield WAF는 SQL 주입, 크로스 사이트 스크립팅 및 기타 OWASP Top 10 취약점과 같은 일반적인 공격을 감지하고 차단합니다.

ArcJet은 src/libs/Arcjet.ts 에서 Shield WAF 규칙을 포함하는 중앙 클라이언트로 구성됩니다. 추가 규칙은 페이지 유형을 기반으로 src/app/[locale]/layout.tsx 로 구성됩니다.

유용한 명령

번들 분석기

다음 .js 보일러 플레이트에는 내장 번들 분석기가 포함되어 있습니다. JavaScript 번들의 크기를 분석하는 데 사용할 수 있습니다. 시작하려면 다음 명령을 실행하십시오.

npm run build-stats

명령을 실행하면 결과와 함께 새 브라우저 창이 자동으로 열립니다.

데이터베이스 스튜디오

이 프로젝트는 이미 Drizzle Studio로 구성되어 데이터베이스를 탐색했습니다. 다음 명령을 실행하여 데이터베이스 스튜디오를 열 수 있습니다.

npm run db:studio

그런 다음 좋아하는 브라우저를 사용하여 https://local.drizzle.studio를 열어 데이터베이스를 탐색 할 수 있습니다.

VSCODE 정보 (선택 사항)

VSCODE 사용자 인 경우 .vscode/extension.json 에 제안 된 확장자를 설치하여 VSCODE와 더 나은 통합을 가질 수 있습니다. 스타터 코드에는 VSCODE와 완벽한 통합을위한 설정이 제공됩니다. 디버그 구성은 프론트 엔드 및 백엔드 디버깅 경험에도 제공됩니다.

vscode에 플러그인이 설치된 경우 Eslint 및 Pretier는 코드를 자동으로 수정하고 오류를 표시 할 수 있습니다. 테스트에도 동일하게 적용됩니다. VSCODE vitest 확장을 설치하여 테스트를 자동으로 실행할 수 있으며 컨텍스트의 코드 적용 범위도 표시됩니다.

Pro Tips : TypeScript로 Project 와이드 타입 확인이 필요한 경우 Mac에서 CMD + Shift + B 로 빌드를 실행할 수 있습니다.