next kickstart

เตะครั้งต่อไป

ฟีเจอร์บรรจุ next.js หม้อต้ม การตั้งค่าเป็นศูนย์ พร้อมขอบ

คุณสมบัติบางอย่างขึ้นอยู่กับตัวแปรสภาพแวดล้อม (ระบุไว้ในรายการคุณสมบัติด้วย) และต้องเปิดใช้งาน พวกเขาจะถูกปิดใช้งานโดยค่าเริ่มต้นเพื่อให้แอปทำงานโดยไม่มีการตั้งค่าใด ๆ พวกเขาสามารถเปิดใช้งานได้โดยการเขียนบททั้งหมดภายใต้ที่ @enable {feature} ปรากฏขึ้น

คุณสมบัติ

ดูสาขาที่เก็บสำหรับชุดคุณสมบัติอื่น ๆ (เช่นขนมปัง)

แกนกลาง

• TypeScript - กำหนดค่าเพื่อเพิ่มความปลอดภัยประเภทสูงสุด
• T3 Env - การตรวจสอบตัวแปรสภาพแวดล้อม
• TRPC- สร้าง API แบบ end-to-type-safe ที่ทำงานทั้งในส่วนประกอบไคลเอนต์และเซิร์ฟเวอร์
• ⚡ WebSockets - การสื่อสารแบบเรียลไทม์ (ใช้ pusher แต่สามารถเปลี่ยนเป็นทางเลือกได้)
  • - รวมเข้ากับ TRPC สำหรับเหตุการณ์แบบ end-to-type-safe
• - Drizzle - ORM ด้วยความปลอดภัยประเภทสูงสุด
• Lucia Auth - การรับรองความถูกต้องที่ยืดหยุ่นและปลอดภัย
  • - รวมเข้ากับ Drizzle เพื่อจัดเก็บข้อมูลการรับรองความถูกต้อง

การพัฒนา

• - ESLINT - มาตรฐานรหัสที่สอดคล้องกัน
• Prettier - สไตล์การออกแบบรหัสที่สอดคล้องกัน
• - Tailwind CSS - Utility -First Framework Framework
• - Shadcn/UI - ส่วนประกอบที่สร้างด้วย radix ui และ tailwind css
• MDX - ใช้ markdown กับส่วนประกอบ
• - การนำเข้าแบบสัมบูรณ์ - การนำเข้าโมดูลที่ง่ายขึ้นและทำความสะอาด
• VS Code Configurations - การกำหนดค่าสำหรับการดีบักง่ายๆ

การทดสอบ

• - Vitest - กรอบการทดสอบที่ยืดหยุ่น
• - ไลบรารีการทดสอบปฏิกิริยา - การทดสอบส่วนประกอบที่สามารถบำรุงรักษาได้
  • - รวมเข้ากับ Vitest เป็นกรอบการทดสอบของคุณ
• - นักเขียนบทละคร -การทดสอบแบบ end-to-end กับหลาย ๆ สภาพแวดล้อม

การปรับใช้

• ตัววิเคราะห์ชุด - วิเคราะห์ขนาดชุดในแต่ละสภาพแวดล้อมด้วย pnpm run build:analyze
• - NEXT -PWA - สร้างเว็บไซต์ของคุณเป็นเว็บแอปก้าวหน้า (PWA)
• - Docker - (ท้องถิ่นและการผลิต) นักเทียบท่าและ Dockerfiles สำหรับการทำงานได้ทุกที่
• การกระทำของ GitHub - CI/CD ที่แข็งแกร่ง

- เริ่มต้น

ตัวเลือกที่ 1: โคลนและปรับใช้กับ vercel

- ตัวเลือกที่ 2: โคลนและทำงานในพื้นที่

1. ส้อมที่เก็บนี้ (ยกเลิกการเลือก 'คัดลอกสาขา main เท่านั้น `หากคุณสนใจในชุด / ชุดคุณสมบัติอื่น ๆ )
2. โคลนที่เก็บใหม่ของคุณ
3. ติดตั้งการพึ่งพาและเรียกใช้เซิร์ฟเวอร์การพัฒนา

• ด้วย PNPM

  pnpm install
  pnpm run dev

• หรือกับนักเทียบท่า

  docker-compose --file docker/dev/docker-compose.yml up

การกำหนดค่า

นักเทียบท่า

• .dockerignore
• docker/ - Dockerfile และ Docker -compose.yml สำหรับการพัฒนาและการผลิต

ละอองฝน

(ต้องเปิดใช้งาน)

• src/db/
• src/lib/db.ts
• drizzle.config.ts

eslint

• .eslintrc.json

การกระทำของ GitHub

• .github/workflows/ci.yml - การตรวจสอบประเภทและผ้าสำลี (ดังนั้นข้อผิดพลาดเหล่านี้จะถูกละเว้นใน next.config.mjs )

Lucia Auth

(ต้องเปิดใช้งาน)

• src/app/api/auth
• src/app/auth
• src/components/auth.tsx
• src/db/schemas/auth.ts) จัดเก็บข้อมูลการรับรองความถูกต้องในฐานข้อมูล
• src/lib/auth.ts
• types/lucia.d.ts

ตัวอย่าง

• src/app/examples/profile/page.tsx

MDX

• mdx-components.tsx

ต่อไป

• public/icon-512x512.png
• public/manifest.json
• next.config.mjs

นักเขียนบทละคร

• e2e/
• playwright.config.ts

สวยกว่า

• .eslintrc.json
• .prettierignore
• .prettierrc.json

react testing library

• src/app/page.test.tsx
• testing/setup.ts

Shadcn/ui

• src/components/providers/theme-provider.tsx
• src/components/ui/
• src/components/theme-toggle.tsx
• components.json

t3 env

• src/env.mjs - กำหนดค่าตัวแปรสภาพแวดล้อม
• next.config.mjs - ตัวแปรสภาพแวดล้อมได้รับการตรวจสอบในเวลาที่สร้าง

tailwind css

• src/styles/globals.css
• tailwind.config.js

TRPC

• src/app/api/trpc/[trpc]/route.ts
• src/components/providers/trpc-provider.tsx
• src/trpc/

ตัวอย่าง

• src/app/examples/client-component/page.tsx - ใช้ในส่วนประกอบไคลเอนต์
• src/app/examples/server-component/page.tsx - ใช้ในส่วนประกอบเซิร์ฟเวอร์

ตัวพิมพ์ใหญ่

• tsconfig.json การแก้ไขทั้งหมดจาก create-next-app ได้รับการอธิบายด้วยความคิดเห็น
• types/reset.d.ts การใช้ TS-Reset เพื่อเพิ่มประเภทความปลอดภัย

การพูดด้วยน้ำ

• testing/setup.ts
• vitest.config.ts

รหัส VS

• .vscode/extensions.json - ส่วนขยายพื้นที่ทำงานที่แนะนำ
• .vscode/launch.json - การกำหนดค่าการดีบัก
• .vscode/settings.json - ใช้รุ่น Project TypeScript

WebSockets กับ Pusher

(ต้องเปิดใช้งาน)

• src/hooks/useEvent.ts
• src/lib/events.ts
• src/trpc/methods.ts

ตัวอย่าง

• src/app/examples/websockets/page.tsx