ts nextjs tailwind starter

next.js + tailwind css + typescript startter และ boilerplate

- ts-nextjs-tailwind-starter

next.js + tailwind css + typescript สตาร์ทเตอร์ที่เต็มไปด้วยคุณสมบัติการพัฒนาที่มีประโยชน์

ทำโดย Theodorus Clarence

คุณสมบัติ

ที่เก็บนี้คือ? แบตเตอรี่ที่เต็มไปด้วย:

• ⚡ next.js 14 พร้อมเราเตอร์แอป
• ⚛ตอบสนอง 18
• ตัวพิมพ์ใหญ่
• - Tailwind CSS 3 - กำหนดค่าด้วยตัวแปร CSS เพื่อขยายสี หลัก
• - ส่วนประกอบที่สร้างไว้ล่วงหน้า-ส่วนประกอบที่จะ ปรับให้เข้ากับสีแบรนด์ของคุณโดยอัตโนมัติ ตรวจสอบที่นี่เพื่อดูตัวอย่าง
• - jest - กำหนดค่าสำหรับการทดสอบหน่วย
• - Absolute Import and Path Alias - ส่วนประกอบนำเข้าโดยใช้ @/ คำนำหน้า
• - ESLINT - ค้นหาและแก้ไขปัญหาในรหัสของคุณและจะ เรียงลำดับการนำเข้าของคุณโดยอัตโนมัติ
• - prettier - จัดรูปแบบรหัสของคุณอย่างสม่ำเสมอ
• - Husky & Lint staged - เรียกใช้สคริปต์บนไฟล์ฉากของคุณก่อนที่จะมีการกระทำ
• - Lint commit ตามแบบฉบับ - ตรวจสอบให้แน่ใจว่าคุณและเพื่อนร่วมทีมของคุณปฏิบัติตามการกระทำทั่วไป
• ⏰โปรดเปิดตัว-สร้าง changelog ของคุณโดยเปิดใช้ release-please
• - การกระทำของ GitHub - ผ้าสำลีของคุณในการประชาสัมพันธ์
• - สาขาอัตโนมัติและปัญหา Autolink - สาขาจะถูกสร้างขึ้นโดยอัตโนมัติเมื่อ มีการกำหนด ปัญหาและเชื่อมโยงอัตโนมัติบน PR
• ตัวอย่าง - คอลเลกชันของตัวอย่างที่มีประโยชน์
• - เปิดฟังก์ชั่นผู้ช่วยกราฟ - กราฟเปิดที่ยอดเยี่ยมที่สร้างขึ้นโดยใช้ OG, Fork It and Teploy!
• - แผนที่ไซต์ - สร้าง 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, favicons ฯลฯ

ค้นหาความคิดเห็นทั้งหมดด้วย! StarterConf จากนั้นทำตามคำแนะนำ

อย่าลืมเปลี่ยนชื่อแพ็คเกจใน package.json

5. ประชุมการประชุมข้อความ

ผู้เริ่มต้นนี้ใช้การกระทำทั่วไปมันเป็นข้อบังคับที่จะใช้มันเพื่อกระทำการเปลี่ยนแปลง

โครงการที่ใช้ ts-nextjs-tailwind-starter

• Theodorusclarence.com (แหล่งที่มา)
• Notiolink (แหล่งที่มา)
• nextjs + materia ui + typescript

คุณใช้ผู้เริ่มต้นนี้หรือไม่? โปรดเพิ่มหน้าของคุณ (และ repo) ที่ส่วนท้ายของรายการผ่านคำขอดึง -

แพ็คขยาย?

ตอนนี้ผู้เริ่มต้นนี้มีชุดขยาย

คุณสามารถเพิ่มการขยายตัวได้อย่างง่ายดายเช่น React Hook Form + ส่วนประกอบนิทานและอื่น ๆ เพียงแค่ใช้บรรทัดคำสั่งเดียว

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

ตรวจสอบที่เก็บแพ็คขยายสำหรับคำสั่ง

อัปเดตเราเตอร์แอป

เนื่องจากการอัปเดตเราเตอร์แอพพลิเคชั่นการขยายตัวในขณะนี้ ล้าสมัย มันจะได้รับการอัปเดตในอนาคต คุณยังสามารถใช้งานได้โดยคัดลอกและวางไฟล์