precedent

전례

다음 프로젝트를위한 빌딩 블록

소개 · 원 클릭 배포 · 기술 스택 + 기능 · 저자

소개

Predent는 Next.js 프로젝트를위한 구성 요소, 후크 및 유틸리티 모음입니다.

원 클릭 배포

아래 버튼 으로이 템플릿을 Vercel에 배포 할 수 있습니다.

다음 명령 으로이 저장소를 복제하고 로컬로 만들 수도 있습니다.

npx create-next-app precedent --example " https://github.com/steven-tey/precedent "

그런 다음 선택한 패키지 관리자와 함께 종속성을 설치하십시오.

npm i
yarn
pnpm i

기술 스택 + 기능

Precedent-demo.mp4

프레임 워크

• Next.js - 최상의 개발자 경험을 갖춘 수행자 앱을 구축하기위한 반응 프레임 워크
• 서기 - 아름답게 설계된 드롭 인 반응 구성 요소가있는 포괄적 인 사용자 관리 플랫폼

플랫폼

• Vercel - GIT로 쉽게 미리보기 및 변경 사항을 배포합니다

UI

• Tailwind CSS-빠른 UI 개발을위한 유틸리티 우선 CSS 프레임 워크
• RADIX - Modal, Popover 등과 같은 프리미티브 등은 훌륭한 사용자 경험을 구축합니다.
• 프레이머 모션 - 애니메이션 구성 요소에 쉽게 반응하는 모션 라이브러리
• Lucide-아름답게 단순하고 픽셀-완벽한 아이콘
• next/font - 사용자 지정 글꼴 최적화 및 외부 네트워크 요청 제거 성능 향상
• ImageResponse - 가장자리에서 동적 열린 그래프 이미지 생성

갈고리와 유틸리티

• useIntersectionObserver - 요소가 뷰포트에 들어가거나 떠날 때 관찰 할 반응 후크
• useLocalStorage - 브라우저의 로컬 스토리지에서 데이터를 지속시킵니다
• useScroll - 스크롤 위치를 관찰하기 위해 반응 후크 (예)
• nFormatter - 1.2k 또는 1.2M 와 같은 접미사가있는 형식 번호
• capitalize - 문자열의 첫 글자를 대문자
• truncate - 지정된 길이로 문자열을 잘라냅니다
• use-debounce -기능 호출 / 상태 업데이트를 분해합니다

코드 품질

• TypeScript-엔드 투 엔드 타입 안전을위한 정적 유형 검사기
• 더 예쁘다 - 일관된 코드 스타일을위한 의견이 많은 코드 포맷터
• eslint - 다음 .js 및 typescript 용 플러그 가능한 린터

여러 가지 잡다한

• Vercel Analytics-독창적 인 방문자, Pageviews 등을 개인 정보를 친숙한 방식으로 추적합니다.

작가

• Steven Tey (@steventey)