typescript nextjs starter typescript nextjs starter

typescript nextjs starter

โค้ดแหล่งที่มา AI

2.2.0

ดาวน์โหลด

next.js typescript starter

typescript starter ที่ไม่ได้รับการคัดค้านสำหรับ next.js

รากฐานที่ปรับขนาดได้สูงพร้อม DX ที่ดีที่สุด เครื่องมือทั้งหมดที่คุณต้องการในการสร้างโครงการต่อไปของคุณ

_{สร้างโดยJoão Pedro ด้วยความช่วยเหลือของผู้มีส่วนร่วมที่ยอดเยี่ยมมากมาย}

คุณสมบัติ

⚡ next.js 15 (เราเตอร์แอพ)
⚛ตอบสนอง 19
⛑ typescript
- ESLINT 9 - เพื่อค้นหาและแก้ไขปัญหาในรหัสของคุณ
- Prettier - Code Formatter สำหรับสไตล์ที่สอดคล้องกัน
- ฮัสกี้ - สำหรับการเรียกใช้สคริปต์ก่อนที่จะกระทำ
- commitlint - เพื่อให้แน่ใจว่าข้อความคอมมิชชันของคุณปฏิบัติตามอนุสัญญา
- ปรับปรุง - เพื่อให้การพึ่งพาของคุณทันสมัย
รูปผ้าสำลี-เรียกใช้ eslint และ prettier กับไฟล์ git ที่จัดฉาก
- PR Workflow - Run Type Check & Linters บนคำขอดึง
EditorConfig - รูปแบบการเข้ารหัสที่สอดคล้องกันทั่วทั้ง Editors และ IDES
- การแม็พพา ธ - นำเข้าส่วนประกอบหรือรูปภาพโดยใช้คำนำหน้า @
- 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 พร้อมเบราว์เซอร์ของคุณเพื่อดูผลลัพธ์

คำรับรอง

“ ผู้เริ่มต้นคนนี้เป็นผู้เริ่มต้น TypeScript ที่ดีที่สุดสำหรับ Next.js. ฟีเจอร์ที่บรรจุ แต่ไม่ได้รับการปรับแต่งในเวลาเดียวกัน!”
- Arafat Zahan

“ ฉันสามารถแนะนำ Repo Starter TypeScript Next.js เป็นรากฐานที่มั่นคงสำหรับอนาคตของคุณโครงการต่อไปของคุณ”
- Corfitz

“ งานที่ยอดเยี่ยม!”
- Soham dasgupta

การแสดง

รายการเว็บไซต์ที่เริ่มต้นด้วย next.js typescript starter:

freeinvoice.dev
ผู้ผลิตอวตาร
Ikea ราคาต่ำ
hygraph.com
rocketseat.com.br
vagaschapeco.com
unfork.vercel.app
cryptools.dev
เพิ่มของคุณ

เอกสาร

ความต้องการ

node.js> = 20
PNPM 9

โครงสร้างไดเรกทอรี

.github - การกำหนดค่า GitHub รวมถึงเวิร์กโฟลว์ CI
.husky - การกำหนดค่าฮัสกี้และตะขอ
public - สินทรัพย์คงที่เช่น robots.txt, รูปภาพและ Favicon
src - ซอร์สโค้ดแอปพลิเคชันรวมถึงหน้าส่วนประกอบสไตล์

สคริปต์

pnpm dev - เริ่มแอปพลิเคชันในโหมดการพัฒนาที่ http://localhost:3000
pnpm build - สร้างการสร้างการผลิตที่ดีที่สุดของแอปพลิเคชันของคุณ
pnpm start - เริ่มแอปพลิเคชันในโหมดการผลิต
pnpm type-check สอบรหัสโดยใช้คอมไพเลอร์ TypeScript
pnpm lint - เรียกใช้ ESLINT สำหรับไฟล์ทั้งหมดในไดเรกทอรี src
pnpm lint:fix - รัน ESLINT FIX สำหรับไฟล์ทั้งหมดในไดเรกทอรี src
pnpm format - ทำงานสวยกว่าสำหรับไฟล์ทั้งหมดในไดเรกทอรี src
pnpm format:check - ตรวจสอบรายการไฟล์ที่น่าสนใจที่ต้องจัดรูปแบบ
pnpm format:ci - การตรวจสอบที่สวยงามสำหรับ CI

การทำแผนที่เส้นทาง

TypeScript ได้รับการกำหนดค่าล่วงหน้าด้วยการแมปเส้นทางที่กำหนดเอง ในการนำเข้าส่วนประกอบหรือไฟล์ให้ใช้คำนำหน้า @

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

เปลี่ยนเป็นเส้นด้าย/npm

ผู้เริ่มต้นนี้ใช้ PNPM โดยค่าเริ่มต้น แต่ตัวเลือกนี้เป็นของคุณ หากคุณต้องการเปลี่ยนเป็นเส้นด้าย/NPM ให้ลบไฟล์ pnpm-lock.yaml ติดตั้งการพึ่งพาด้วยเส้นด้าย/NPM เปลี่ยนเวิร์กโฟลว์ CI และตะขอ Husky Git เพื่อใช้คำสั่งเส้นด้าย/NPM

หมายเหตุ: หากคุณใช้เส้นด้ายตรวจสอบให้แน่ใจว่าได้ทำตามขั้นตอนเหล่านี้จากเอกสาร Husky เพื่อให้ Git Hooks ไม่ล้มเหลวด้วยเส้นด้ายบน Windows

ตัวแปรสภาพแวดล้อม

เราใช้ T3 Env เพื่อจัดการตัวแปรสภาพแวดล้อม สร้างไฟล์ .env.local ในรูทของโครงการและเพิ่มตัวแปรสภาพแวดล้อมของคุณที่นั่น

เมื่อเพิ่มตัวแปรสภาพแวดล้อมเพิ่มเติมสคีมาใน ./src/lib/env/client.ts หรือ ./src/lib/env/server.ts ควรได้รับการปรับปรุงตามลำดับ

เปลี่ยนเส้นทาง

หากต้องการเพิ่มการเปลี่ยนเส้นทางให้อัปเดตอาร์เรย์ redirects ใน ./redirects.ts มันพิมพ์ดังนั้นคุณจะได้รับการเติมเงินอัตโนมัติสำหรับคุณสมบัติ

CSP (นโยบายความปลอดภัยของเนื้อหา)

นโยบายความปลอดภัยของเนื้อหา (CSP) เป็นเลเยอร์ความปลอดภัยที่ช่วยในการตรวจจับและลดการโจมตีบางประเภทรวมถึงการเขียนสคริปต์ข้ามไซต์ (XSS) และการโจมตีจากการฉีดข้อมูล CSP ถูกนำไปใช้ในไฟล์ next.config.ts

มันมีนโยบายเริ่มต้นและน้อยที่สุดที่คุณสามารถปรับแต่งให้เหมาะกับความต้องการของแอปพลิเคชันของคุณ มันเป็นรากฐานที่จะสร้างขึ้น