ts nextjs tailwind starter

다음 .js + 테일 윈드 CSS + 타입 스크립트 스타터 및 보일러 플레이트

? TS-NEXTJS-TAILWIND-STARTER

JS + Tailwind CSS + 유용한 개발 기능이 포장 된 타입 스크립트 스타터.

Theodorus Clarence가 만든

특징

이 저장소는? 배터리가 포장 된 배터리 :

• 앱 라우터와 함께 ⚡️ next.js 14
• ⚛️ 반응 18
• TypeScript
• ? Tailwind CSS 3 - 기본 색상을 확장하기 위해 CSS 변수로 구성
• ? 사전 구축 구성 요소-브랜드 색상으로 자동 적응 하는 구성 요소, 여기에서 데모를 확인하십시오.
• ? JEST - 단위 테스트를 위해 구성되었습니다
• ? 절대 가져 오기 및 경로 별칭 - @/ prefix를 사용하여 구성 요소 가져 오기
• ? eslint - 코드에서 문제를 찾고 수정하면 수입을 자동 정렬 합니다.
• ? 더 예쁘게 - 코드를 일관되게 형식으로 형식화하십시오
• ? Husky & Lint Steaged - 커밋되기 전에 무대 파일에서 스크립트를 실행합니다.
• ? 기존 커밋 린트 - 당신과 당신의 팀원들이 기존의 커밋을 따르도록
• ⏰ 릴리즈 제발-릴리스- release-please 워크 플로를 활성화하여 Changelog를 생성하십시오.
• ? GitHub 조치 - PR에 코드를 보려고합니다
• ? 자동 분기 및 문제 AutoLink - Branch가 문제 지정시 자동으로 생성되고 PR에서 자동 연결됩니다.
• 스 니펫 - 유용한 스 니펫 모음
• ? 그래프 헬퍼 기능 열기 - OG, 포크 및 배포를 사용하여 생성 된 멋진 오픈 그래프!
• ? 사이트 맵 - 자동으로 sitemap.xml을 생성합니다
• ? 확장 팩 - 공통 라이브러리, 추가 구성 요소 및 구성을 쉽게 설치하십시오.

기능 세부 사항과 Changelog를 보시겠습니까? 자세한 내용.

내 블로그 게시물에서 모든 세부 사항과 데모를 확인할 수도 있습니다.

• Next.js & Tailwind CSS 프로젝트에서 효율성을 극대화하기위한 원 스톱 스타터

시작하기

1. 세 가지 방법 중 하나를 사용 하여이 템플릿을 복제하십시오.

1. 이 저장소를 템플릿으로 사용하십시오

   공개 : 이 저장소를 템플릿으로 사용하면 저장소에 귀속이 있습니다.

   당신이 그렇게한다면 감사하겠습니다.이 템플릿도 다른 사람들에게도 알 수 있습니까?

   

2. create-next-app 사용

   pnpm create next-app  -e https://github.com/theodorusclarence/ts-nextjs-tailwind-starter ts-pnpm

   여전히 페이지 디렉토리를 사용하려면 ( 적극적으로 유지 관리되지 않음 )이 명령을 사용할 수 있습니다.

   npx create-next-app -e https://github.com/theodorusclarence/ts-nextjs-tailwind-starter/tree/pages-directory project-name

3. degit 사용

   npx degit theodorusclarence/ts-nextjs-tailwind-starter YOUR_APP_NAME

4. Vercel에 배포하십시오

2. 종속성을 설치하십시오

허스키 후크가 제대로 작동 할 수 있도록 PNPM을 사용하는 것이 좋습니다.

pnpm install

3. 개발 서버를 실행하십시오

이 명령을 사용하여 서버를 시작할 수 있습니다.

pnpm dev

http : // localhost : 3000을 열어 브라우저를 사용하여 결과를 확인하십시오. src/pages/index.tsx 수정하여 페이지 편집을 시작할 수 있습니다.

4. 기본값을 변경하십시오

제목, URL, Favicon 등을 포함하여 변경해야 할 사항이 있습니다.

starterconf로 모든 의견을 찾은 다음 가이드를 따르십시오.

package.json에서 패키지 이름을 변경하는 것을 잊지 마십시오

5. 커밋 메시지 협약

이 스타터는 기존의 커밋을 사용하고 있으며, 변경을 저지르는 데 필수적입니다.

TS-nextjs-tailwind-starter를 사용하는 프로젝트

• Theodorusclarence.com (소스)
• Notiolink (소스)
• Nextjs + Materia UI + TypeScript

이 스타터를 사용하고 있습니까? 풀 요청을 통해 목록 끝에 페이지 (및 리포)를 추가하십시오. ?

확장 팩?

이 스타터에는 이제 확장 팩이 장착되어 있습니다.

단일 명령 줄을 사용하는 React Hook Form + 구성 요소, 스토리 북 등과 같은 확장을 쉽게 추가 할 수 있습니다.

Cleanshot.2021-12-04.at.18.54.07-Trimmed.mp4

명령에 대한 확장 팩 리포지토리를 확인하십시오

앱 라우터 업데이트

앱 라우터 업데이트로 인해 확장 팩은 현재 구식 입니다. 앞으로 업데이트 될 것입니다. 파일을 복사하고 붙여 넣어도 사용할 수 있습니다.