typescript nextjs starter 다운로드 - typescript nextjs starter 소스 코드 다운로드

typescript nextjs starter

AI 소스 코드

2.2.0

다운로드

다음 .js 타입 스크립트 스타터

Next.js 용 비 이온화 된 타입 스크립트 스타터

최고의 DX를 갖춘 매우 확장 가능한 기초. 다음 프로젝트를 구축하는 데 필요한 모든 도구.

_{João Pedro가 많은 훌륭한 기고자들의 도움으로 만들었습니다.}

특징

⚡️ next.js 15 (앱 라우터)
⚛️ 반응 19
typeScript
? Eslint 9 - 코드에서 문제를 찾고 수정하려면
? 더 예쁘다 - 일관된 스타일을위한 코드 포맷터
? 허스키 - 커밋하기 전에 스크립트를 실행하는 것
? CommitLint - 커밋 메시지가 컨벤션을 따르도록합니다.
? 리노베이션 - 의존성을 최신 상태로 유지합니다
Lint-Staged-Staged Git 파일에 대해 Eslint 및 Pretier를 실행합니다.
? PR 워크 플로 - 풀 요청에서 실행 유형 확인 및 라이터
EditorConfig- 편집자 및 IDE의 일관된 코딩 스타일
? 경로 매핑 - @ prefix를 사용하여 구성 요소 또는 이미지 가져 오기
? CSP - 향상된 보안을위한 컨텐츠 보안 정책 (기본 최소 정책)
? T3 ENV-유형-안전 환경 변수
? 리디렉션 - 응용 프로그램에 리디렉션을 쉽게 추가하십시오

빠른 시작

이 템플릿에서 시작하는 가장 좋은 방법은 다음 앱을 만드는 것입니다.

 # pnpm
pnpm create next-app -e https://github.com/jpedroschmitz/typescript-nextjs-starter
# yarn
yarn create next-app -e https://github.com/jpedroschmitz/typescript-nextjs-starter
# npm
npx create-next-app -e https://github.com/jpedroschmitz/typescript-nextjs-starter

개발

로컬로 프로젝트를 시작하려면 실행하십시오.

pnpm dev

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

증언

"이 스타터는 Next.js. 기능을위한 최고의 타입 스타터입니다.
- Arafat Zahan

"다음 .JS TypeScript 스타터 리포지기를 향후 Next.js 프로젝트를위한 탄탄한 기초로 추천 할 수 있습니다."
- Corfitz

"훌륭한 일!"
- Soham Dasgupta

유리 진열장

Next.js TypeScript 스타터로 시작한 웹 사이트 목록 :

FreeInvoice.dev
개념 아바타 제작자
IKEA 저렴한 가격
hygraph.com
RocketSeat.com.br
vagaschapeco.com
unlork.vercel.app
cryptools.dev
당신을 추가하십시오

선적 서류 비치

요구 사항

node.js> = 20
PNPM 9

디렉토리 구조

.github - CI 워크 플로를 포함한 Github 구성.
.husky - 허스키 구성 및 후크.
public - Robots.txt, 이미지 및 Favicon과 같은 정적 자산.
src - 페이지, 구성 요소, 스타일을 포함한 응용 프로그램 소스 코드.

스크립트

pnpm dev - http://localhost:3000 에서 개발 모드에서 응용 프로그램을 시작합니다.
pnpm build - 애플리케이션의 최적화 된 생산 빌드를 만듭니다.
pnpm start - 생산 모드에서 응용 프로그램을 시작합니다.
pnpm type-check -TypeScript 컴파일러를 사용하여 코드를 유효하게하십시오.
pnpm lint - src 디렉토리의 모든 파일에 대해 ESLINT를 실행합니다.
pnpm lint:fix - src 디렉토리의 모든 파일에 대해 ESLINT FIX를 실행합니다.
pnpm format - src 디렉토리의 모든 파일에 대해 더 예쁘게 실행됩니다.
pnpm format:check - 형식화되어야하는 파일의 더 예쁜 파일 목록을 확인하십시오.
pnpm format:ci - CI에 대한 더 예쁜 점검.

경로 매핑

TypeScript는 사용자 정의 경로 매핑으로 사전 구성됩니다. 구성 요소 또는 파일을 가져 오려면 @ Prefix를 사용하십시오.

 import { Button } from '@/components/Button' ;
// To import images or other files from the public folder
import avatar from '@/public/avatar.png' ;

원사/npm으로 전환하십시오

이 스타터는 기본적으로 PNPM을 사용하지만이 선택은 귀하의 것입니다. YARN/NPM으로 전환하려면 pnpm-lock.yaml 파일을 삭제하려면 YARN/NPM으로 종속성을 설치하고 CI 워크 플로를 변경하고 Husky Git 후크를 변경하여 YARN/NPM 명령을 사용하십시오.