next enterprise

다음 .js Enterprise Boilerplate

Enterprise 프로젝트를위한 오픈 소스 템플릿 인 The Next.js Enterprise Boilerplate 에 오신 것을 환영합니다! 고성능, 유지 관리 및 즐거운 앱을 구축하는 데 도움이되는 기능이 장착되어 있습니다. 우리는 당신을 위해 모든 무거운 리프팅을 해왔으므로 앉아서 휴식을 취하고 놀라운 앱으로 세상을 정복 할 준비를하십시오! ?

메모

Blazity 는 Next.js/Headless 전문가 그룹입니다. 프로젝트에 대해 이야기하고 싶거나 당사와 대화를 나누려면 [email protected]으로 문의하십시오.

특징

이 템플릿을 사용하면 필요한 모든 굉장함을 얻을 수 있습니다.

• ? ️ next.js- 기본적으로 빠른 속도로 성능을 위해 최적화 된 구성 ( 앱 디렉토리 포함)
• ? Tailwind CSS- 빠른 UI 개발을위한 유틸리티 우선 CSS 프레임 워크
• Eslint and Pretier- 깨끗하고 일관성이 있으며 오류가없는 코드
• 극도 ts-reset
• GitHub 조치 - 번들 크기 및 성능 통계를 포함한 부드러운 워크 플로에 대한 사전 구성된 작업
• ? 완벽한 등대 점수 - 성능이 중요하기 때문입니다
• 번들 분석기 플러그인 - 번들 크기를 주시하십시오.
• Jest 및 React Testing Library -Rock -Solid 장치 및 통합 테스트 용.
• 극작가 -프로처럼 엔드 투 엔드 테스트를 작성하십시오
• 스토리 북 - 구성 요소를 작성, 테스트 및 전시합니다
• 연기 테스트 및 수락 테스트 - 배포에 대한 신뢰
• 기존 커밋 git 훅 - 커밋 역사를 깔끔하고 깔끔하게 유지하십시오.
• 관찰 가능성 - 원활한 모니터링을위한 열린 원격 측정 통합
• 절대 수입 - 더 이상 스파게티 수입
• 건강 검사 - 강력한 배포를위한 Kubernetes 호환
• RADIX UI- 끝없는 사용자 정의를위한 헤드리스 UI 구성 요소
• CVA- 일관되고 재사용 가능하며 원자 설계 시스템을 만듭니다.
• Renovate Bot- 자동 업데이트 종속성이 있으므로 코딩에 집중할 수 있습니다.
• 패치 패키지 - 마음을 잃지 않고 외부 종속성을 수정하십시오
• 구성 요소 커플 링 및 응집력 그래프 - 구성 요소 관계 관리 도구
• 자동화 된 chatgpt 코드 검토 - AI 기반 코드 리뷰를 통해 최첨단에 머무르십시오!
• 시맨틱 릴리스 - 자동 변경 사항
• T3 ENV- 환경 변수를 쉽게 관리합니다

목차

• 다음 .js Enterprise Boilerplate
  • 특징
  • 목차
  • 시작하기
  • 전개
  • 스크립트 개요
  • 커플 링 그래프
  • 테스트
    • 실행 테스트
    • 수락 테스트
    • 연기 테스트
  • 스타일링 및 디자인 시스템
    • CVA- 변종에 대한 새로운 접근법
  • 국가 관리
    • Zustand
    • 조타이
    • 뒷걸음질
  • chatgpt 코드 검토
  • 환경 변수 처리
  • 기부금
  • 지원하다
  • 특허
  • 기고자

시작하기

이 보일러 플레이트를 시작하려면 다음 단계를 따르십시오.

1. 포크 & 클론 리포지토리 :

 # # Don't forget to  star and fork it first :)
git clone https://github.com/ < your_username)/next-enterprise.git

2. 종속성 설치 :

yarn install --frozen-lockfile

3. 개발 서버 실행 :

yarn dev

4. http : // localhost : 3000을 열어 브라우저를 사용하여 결과를 확인하십시오.

5. 이 프로젝트는 GIT 후크를 사용하여 기존의 커밋을 시행합니다. Git Hook를 설치하려면 프로젝트의 루트 디렉토리에서 다음 명령을 실행하십시오.

brew install pre-commit
pre-commit install -t commit-msg

전개

아래 버튼을 클릭하여 Vercel을 사용하여 다음.js 앱을 쉽게 배포하십시오.

? 스크립트 개요

다음 스크립트는 package.json 에서 사용할 수 있습니다.

• dev : 색상화 된 출력으로 개발 서버를 시작합니다
• build : 제작 앱을 구축합니다
• start : 프로덕션 서버를 시작합니다
• lint : Eslint를 사용하여 코드를 줄입니다
• lint:fix : 라인 오류를 자동으로 수정합니다
• prettier : 올바른 형식이 있는지 코드를 점검합니다
• prettier:fix : 포맷 문제를 자동으로 수정합니다
• analyze : 클라이언트, 서버 및 에지 환경의 번들 크기 분석
• storybook : 스토리 북 서버를 시작합니다
• build-storybook : 배포를위한 스토리 북을 작성합니다
• test : 장치 및 통합 테스트를 실행합니다
• e2e:headless : 헤드리스 모드에서 엔드 투 엔드 테스트를 실행합니다
• e2e:ui : UI로 엔드 투 엔드 테스트를 실행합니다
• format : 더 예쁘게 코드를 형식화합니다
• postinstall : 패치를 외부 종속성에 적용합니다
• preinstall : 프로젝트가 원사와 함께 설치되도록합니다
• coupling-graph : 구성 요소에 대한 커플 링 및 응집력 그래프를 생성합니다.

? 커플 링 그래프

coupling-graph 스크립트는 프로젝트의 내부 모듈 간의 커플 링과 연결을 시각화하는 데 도움이되는 유용한 도구입니다. Madge Library를 사용하여 제작되었습니다. 그래프를 생성하려면 다음 명령을 실행하십시오.

yarn coupling-graph

이렇게하면 구성 요소 간의 연결을 그래픽으로 표시하는 graph.svg 파일이 생성됩니다. SVG 호환 뷰어로 파일을 열 수 있습니다.

기여를 추가하십시오