next enterprise

Next.js Enterprise Boilerplate

ยินดีต้อนรับสู่ Next.js Enterprise Boilerplate เทมเพลตโอเพนซอร์ซสำหรับโครงการระดับองค์กร! มันเต็มไปด้วยคุณสมบัติที่จะช่วยให้คุณสร้างแอพที่มีประสิทธิภาพสูงบำรุงรักษาและสนุกสนาน เราได้ทำการยกที่หนักหน่วงให้กับคุณดังนั้นนั่งลงผ่อนคลายและเตรียมพร้อมที่จะพิชิตโลกด้วยแอพที่น่าทึ่งของคุณ! -

บันทึก

Blazity เป็นกลุ่มของผู้เชี่ยวชาญ next.js/headless ติดต่อเราที่ [email protected] หากคุณต้องการพูดคุยเกี่ยวกับโครงการของคุณหรือเพียงแค่คุยกับเรา

คุณสมบัติ

ด้วยเทมเพลตนี้คุณจะได้รับความสุดยอดทั้งหมดที่คุณต้องการ:

• ? ️ next.js - เร็วโดยค่าเริ่มต้นด้วยการกำหนดค่าที่ดีที่สุดสำหรับประสิทธิภาพ (พร้อม ไดเรกทอรีแอพ )
• - Tailwind CSS - กรอบ CSS ยูทิลิตี้แรกสำหรับการพัฒนา UI อย่างรวดเร็ว
• eslint และ prettier - สำหรับรหัสที่สะอาดสอดคล้องและปราศจากข้อผิดพลาด
• Typescript ที่เข้มงวดมาก - ด้วยไลบรารี ts-reset เพื่อความปลอดภัยประเภทสุดยอด
• การกระทำของ GitHub - การกระทำที่กำหนดค่าล่วงหน้าสำหรับเวิร์กโฟลว์ที่ราบรื่นรวมถึงขนาดชุดและสถิติประสิทธิภาพ
• - คะแนนประภาคารที่สมบูรณ์แบบ - เพราะการแสดงมีความสำคัญ
• ปลั๊กอินเครื่องวิเคราะห์ชุด - จับตาดูขนาดชุดของคุณ
• jest and React Testing Library - สำหรับหน่วยที่ละลายของหินและการทดสอบการรวม
• นักเขียนบทละคร -เขียนการทดสอบแบบ end-to-end เช่น Pro
• หนังสือนิทาน - สร้างทดสอบและแสดงส่วนประกอบของคุณ
• การทดสอบการทดสอบควัน และ การยอมรับ - เพื่อความมั่นใจในการปรับใช้ของคุณ
• Commental Commits Git Hook - รักษาประวัติของคุณให้เรียบร้อยและเป็นระเบียบ
• ความสามารถในการสังเกต - การรวม telemetry แบบเปิดสำหรับการตรวจสอบอย่างราบรื่น
• การนำเข้าสัมบูรณ์ - ไม่มีการนำเข้าสปาเก็ตตี้อีกต่อไป
• การตรวจสอบสุขภาพ - เข้ากันได้กับ Kubernetes สำหรับการปรับใช้ที่แข็งแกร่ง
• Radix UI - ส่วนประกอบ UI แบบไม่มีหัวสำหรับการปรับแต่งที่ไม่มีที่สิ้นสุด
• CVA - สร้างระบบการออกแบบที่สอดคล้องกันได้และนำกลับมาใช้ซ้ำและอะตอม
• ปรับปรุงบอท - การพึ่งพาการอัปเดตอัตโนมัติเพื่อให้คุณสามารถมุ่งเน้นไปที่การเข้ารหัส
• Patch -Package - แก้ไขการพึ่งพาภายนอกโดยไม่สูญเสียความคิดของคุณ
• ส่วนประกอบการมีเพศสัมพันธ์และกราฟการทำงานร่วมกัน - เครื่องมือสำหรับการจัดการความสัมพันธ์ส่วนประกอบ
• รีวิวรหัส CHATGPT อัตโนมัติ - อยู่บนขอบที่ทันสมัยด้วยรีวิวรหัส AI ที่ขับเคลื่อนด้วย!
• Semantic Release - สำหรับการเปลี่ยนแปลงอัตโนมัติ
• T3 Env - จัดการตัวแปรสภาพแวดล้อมของคุณได้อย่างง่ายดาย

สารบัญ

• Next.js Enterprise Boilerplate
  • คุณสมบัติ
  • สารบัญ
  • เริ่มต้น
  • การปรับใช้
  • ภาพรวมสคริปต์
  • กราฟการมีเพศสัมพันธ์
  • การทดสอบ
    • การทดสอบกำลังดำเนินการ
    • การทดสอบการยอมรับ
    • การทดสอบควัน
  • ระบบจัดแต่งทรงผมและการออกแบบ
    • CVA - แนวทางใหม่สำหรับตัวแปร
  • การจัดการรัฐ
    • ซุสและ
    • โจติ
    • การหดตัว
  • รีวิวรหัส CHATGPT
  • การจัดการตัวแปรสภาพแวดล้อม
  • ผลงาน
  • สนับสนุน
  • ใบอนุญาต
  • ผู้มีส่วนร่วม

เริ่มต้น

ในการเริ่มต้นด้วยแผ่นหม้อไอน้ำนี้ให้ทำตามขั้นตอนเหล่านี้:

1. ที่เก็บส้อม & โคลน:

 # # Don't forget to  star and fork it first :)
git clone https://github.com/ < your_username)/next-enterprise.git

2. ติดตั้งการอ้างอิง:

yarn install --frozen-lockfile

3. เรียกใช้เซิร์ฟเวอร์การพัฒนา:

yarn dev

4. เปิด http: // localhost: 3000 พร้อมเบราว์เซอร์ของคุณเพื่อดูผลลัพธ์

5. โครงการนี้ใช้ตะขอ Git เพื่อบังคับใช้การกระทำทั่วไป ในการติดตั้ง Git Hook ให้เรียกใช้คำสั่งต่อไปนี้ในไดเรกทอรีรูทของโครงการ:

brew install pre-commit
pre-commit install -t commit-msg

การปรับใช้

ปรับใช้แอป next.js ของคุณได้อย่างง่ายดายด้วย vercel โดยคลิกที่ปุ่มด้านล่าง:

- ภาพรวมสคริปต์

สคริปต์ต่อไปนี้มีอยู่ใน package.json :

• dev : เริ่มเซิร์ฟเวอร์การพัฒนาด้วยเอาต์พุตสี
• build : สร้างแอพสำหรับการผลิต
• start : เริ่มเซิร์ฟเวอร์การผลิต
• lint : ผ้าสำลีโดยใช้ ESLINT
• lint:fix : แก้ไขข้อผิดพลาดของผ้าสำลีโดยอัตโนมัติ
• prettier : ตรวจสอบรหัสสำหรับการจัดรูปแบบที่เหมาะสม
• prettier:fix : แก้ไขปัญหาการจัดรูปแบบโดยอัตโนมัติ
• analyze : วิเคราะห์ขนาดชุดสำหรับลูกค้าเซิร์ฟเวอร์และสภาพแวดล้อมขอบ
• storybook : เริ่มเซิร์ฟเวอร์นิทาน
• build-storybook : สร้างหนังสือนิทานสำหรับการปรับใช้
• test : รันหน่วยและการทดสอบการรวม
• e2e:headless : รันการทดสอบแบบ end-to-end ในโหมดหัวขาด
• e2e:ui : เรียกใช้การทดสอบแบบ end-to-end กับ UI
• format : รูปแบบรหัสด้วยสวยกว่า
• postinstall : ใช้แพตช์กับการพึ่งพาภายนอก
• preinstall : มั่นใจได้ว่าโครงการจะติดตั้งด้วยเส้นด้าย
• coupling-graph : สร้างกราฟการมีเพศสัมพันธ์และการทำงานร่วมกันสำหรับส่วนประกอบ

- กราฟการมีเพศสัมพันธ์

สคริปต์ coupling-graph เป็นเครื่องมือที่มีประโยชน์ที่ช่วยให้เห็นภาพการมีเพศสัมพันธ์และการเชื่อมต่อระหว่างโมดูลภายในของโครงการของคุณ มันถูกสร้างขึ้นโดยใช้ห้องสมุด Madge ในการสร้างกราฟเพียงเรียกใช้คำสั่งต่อไปนี้:

yarn coupling-graph

สิ่งนี้จะสร้างไฟล์ graph.svg ซึ่งมีการแสดงกราฟิกของการเชื่อมต่อระหว่างส่วนประกอบของคุณ คุณสามารถเปิดไฟล์ด้วยผู้ชมที่เข้ากันได้กับ SVG

เพิ่มการมีส่วนร่วมของคุณ