Next js Boilerplate
v3.60.5
Boilerplate และ Starter สำหรับ Next.js พร้อมเราเตอร์แอพ, Tailwind CSS และ TypeScript ⚡จัดลำดับความสำคัญประสบการณ์นักพัฒนาก่อน: Next.js, typenscript, eslint, สวยขึ้น, husky, lint stage, vitest (PostgreSQL, SQLITE และ MYSQL), การตรวจสอบข้อผิดพลาดด้วยยาม, การเข้าสู่ระบบด้วย PINO.JS และการจัดการบันทึก, การตรวจสอบเป็นรหัส, หนังสือนิทาน, หลายภาษา (I18N), ปลอดภัยด้วย ArcJet (การตรวจจับ BOT, การ จำกัด อัตราการป้องกันการโจมตี ฯลฯ ) และอื่น ๆ
โคลนโครงการนี้และใช้เพื่อสร้างโครงการ Next.js ของคุณเอง คุณสามารถตรวจสอบการสาธิตสดได้ที่ Next.js Boilerplate ซึ่งรวมถึงระบบตรวจสอบความถูกต้องที่ใช้งานได้
 |  |   |
 |  | |
 |  | |
| เพิ่มโลโก้ของคุณที่นี่ |
Live Demo: Next.js Boilerplate
| ลงทะเบียน | ลงชื่อเข้าใช้ |
|---|---|
 | |
ประสบการณ์นักพัฒนาก่อนหน้าโครงสร้างรหัสที่ยืดหยุ่นอย่างมากและเก็บสิ่งที่คุณต้องการเท่านั้น:
@ คำนำหน้าฟีเจอร์ในตัวจาก next.js:
เรียกใช้คำสั่งต่อไปนี้ในสภาพแวดล้อมท้องถิ่นของคุณ:
git clone --depth=1 https://github.com/ixartz/Next-js-Boilerplate.git my-project-name
cd my-project-name
npm installสำหรับข้อมูลของคุณการพึ่งพาทั้งหมดจะได้รับการอัปเดตทุกเดือน
จากนั้นคุณสามารถเรียกใช้โครงการในท้องถิ่นในโหมดการพัฒนาด้วยการโหลดสดโดยการดำเนินการ:
npm run devเปิด http: // localhost: 3000 พร้อมเบราว์เซอร์ที่คุณชื่นชอบเพื่อดูโครงการของคุณ
ในการเริ่มต้นคุณจะต้องสร้างบัญชีเสมียนที่ Clerk.com และสร้างแอปพลิเคชันใหม่ในแผงควบคุมเสมียน เมื่อคุณทำอย่างนั้นแล้วให้คัดลอก NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY และ CLERK_SECRET_KEY และเพิ่มลงในไฟล์ .env.local (ไม่ได้ติดตามโดย Git):
NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=your_clerk_pub_key
CLERK_SECRET_KEY=your_clerk_secret_keyตอนนี้คุณมีระบบการตรวจสอบความถูกต้องที่ใช้งานได้อย่างสมบูรณ์พร้อม next.js รวมถึงคุณสมบัติเช่นการลงทะเบียนลงชื่อเข้าใช้ลงชื่อเข้าใช้ลืมรหัสผ่านรีเซ็ตรหัสผ่านอัปเดตโปรไฟล์อัปเดตรหัสผ่านอัปเดตอีเมลอัปเดตบัญชีลบและอื่น ๆ
โครงการใช้ Drizzleorm ซึ่งเป็น ORM ที่ปลอดภัยซึ่งเข้ากันได้กับฐานข้อมูล PostgreSQL, SQLite และ MySQL โดยค่าเริ่มต้นโครงการได้รับการกำหนดค่าให้ทำงานกับ PostgreSQL ได้อย่างราบรื่นและคุณมีความยืดหยุ่นในการเลือกผู้ให้บริการฐานข้อมูล PostgreSQL ที่คุณเลือก
สำหรับการแปลโครงการใช้ next-intl รวมกับ Crowdin ในฐานะนักพัฒนาคุณจะต้องดูแลเวอร์ชันภาษาอังกฤษ (หรือภาษาเริ่มต้นอื่น) เท่านั้น การแปลสำหรับภาษาอื่น ๆ จะถูกสร้างและจัดการโดย Crowdin โดยอัตโนมัติ คุณสามารถใช้ crowdin เพื่อร่วมมือกับทีมแปลของคุณหรือแปลข้อความด้วยตัวเองด้วยความช่วยเหลือของการแปลด้วยเครื่อง
ในการตั้งค่าการแปล (i18n) สร้างบัญชีที่ crowdin.com และสร้างโครงการใหม่ ในโครงการที่สร้างขึ้นใหม่คุณจะสามารถค้นหารหัสโครงการได้ คุณจะต้องสร้างโทเค็นการเข้าถึงส่วนบุคคลใหม่โดยไปที่การตั้งค่าบัญชี> API จากนั้นในการกระทำของคุณคุณต้องกำหนดตัวแปรสภาพแวดล้อมต่อไปนี้: CROWDIN_PROJECT_ID และ CROWDIN_PERSONAL_TOKEN
หลังจากกำหนดตัวแปรสภาพแวดล้อมในการกระทำ GitHub ของคุณไฟล์การแปลของคุณจะถูกซิงโครไนซ์กับ Crowdin ทุกครั้งที่คุณผลักดันการประชุมใหม่ให้กับสาขา main
.
├── README.md # README file
├── .github # GitHub folder
├── .husky # Husky configuration
├── .storybook # Storybook folder
├── .vscode # VSCode configuration
├── migrations # Database migrations
├── public # Public assets folder
├── src
│ ├── app # Next JS App (App Router)
│ ├── components # React components
│ ├── libs # 3rd party libraries configuration
│ ├── locales # Locales folder (i18n messages)
│ ├── models # Database models
│ ├── styles # Styles folder
│ ├── templates # Templates folder
│ ├── types # Type definitions
│ ├── utils # Utilities folder
│ └── validations # Validation schemas
├── tests
│ ├── e2e # E2E tests, also includes Monitoring as Code
│ └── integration # Integration tests
├── tailwind.config.js # Tailwind CSS configuration
└── tsconfig.json # TypeScript configuration คุณสามารถกำหนดค่า JS Boilerplate ถัดไปได้อย่างง่ายดายโดยค้นหาโครงการทั้งหมดสำหรับ FIXME: เพื่อทำการปรับแต่งอย่างรวดเร็ว นี่คือไฟล์ที่สำคัญที่สุดในการปรับแต่ง:
public/apple-touch-icon.png , public/favicon.ico , public/favicon-16x16.png และ public/favicon-32x32.png : เว็บไซต์ของคุณ faviconsrc/utils/AppConfig.ts : ไฟล์การกำหนดค่าsrc/templates/BaseTemplate.tsx : ธีมเริ่มต้นnext.config.mjs : next.js การกำหนดค่า.env : ตัวแปรสภาพแวดล้อมเริ่มต้นคุณสามารถเข้าถึงซอร์สโค้ดได้อย่างเต็มรูปแบบสำหรับการปรับแต่งเพิ่มเติม รหัสที่ให้ไว้เป็นเพียงตัวอย่างที่จะช่วยให้คุณเริ่มโครงการของคุณ ท้องฟ้าเป็นขีด จำกัด
ในการแก้ไขสคีมาฐานข้อมูลในโครงการคุณสามารถอัปเดตไฟล์สคีมาได้ที่ ./src/models/Schema.ts ไฟล์นี้กำหนดโครงสร้างของตารางฐานข้อมูลของคุณโดยใช้ไลบรารี Drizzle ORM
หลังจากทำการเปลี่ยนแปลงสคีมาแล้วให้สร้างการย้ายถิ่นโดยเรียกใช้คำสั่งต่อไปนี้:
npm run db:generateสิ่งนี้จะสร้างไฟล์การโยกย้ายที่สะท้อนถึงการเปลี่ยนแปลงสคีมาของคุณ การโยกย้ายจะถูกนำไปใช้โดยอัตโนมัติในระหว่างการโต้ตอบฐานข้อมูลถัดไปดังนั้นจึงไม่จำเป็นต้องเรียกใช้ด้วยตนเองหรือรีสตาร์ทเซิร์ฟเวอร์ถัดไป JS
โครงการดังกล่าวเป็นไปตามข้อกำหนดการกระทำทั่วไปซึ่งหมายความว่าข้อความที่กระทำทั้งหมดจะต้องจัดรูปแบบตามนั้น เพื่อช่วยให้คุณเขียนข้อความที่กระทำโครงการใช้ Contimitizen ซึ่งเป็น CLI แบบโต้ตอบที่จะแนะนำคุณผ่านกระบวนการกระทำ หากต้องการใช้ให้เรียกใช้คำสั่งต่อไปนี้:
npm run commit ข้อดีอย่างหนึ่งของการใช้ Commental Commits คือความสามารถในการสร้างไฟล์ CHANGELOG โดยอัตโนมัติ นอกจากนี้ยังช่วยให้เราสามารถกำหนดหมายเลขเวอร์ชันถัดไปได้โดยอัตโนมัติตามประเภทของการกระทำที่รวมอยู่ในการเปิดตัว
การทดสอบหน่วยทั้งหมดตั้งอยู่ข้างซอร์สโค้ดในไดเรกทอรีเดียวกันทำให้หาได้ง่ายขึ้น โครงการใช้ไลบรารีการทดสอบและตอบสนองสำหรับการทดสอบหน่วย คุณสามารถเรียกใช้การทดสอบด้วยคำสั่งต่อไปนี้:
npm run testโครงการใช้การทดสอบบทละครสำหรับการรวมและการทดสอบแบบ end-to-end (E2E) คุณสามารถเรียกใช้การทดสอบด้วยคำสั่งต่อไปนี้:
npx playwright install # Only for the first time in a new environment
npm run test:e2e ในสภาพแวดล้อมในท้องถิ่นการทดสอบด้วยภาพถูกปิดใช้งานและเทอร์มินัลจะแสดงข้อความ [percy] Percy is not running, disabling snapshots. - โดยค่าเริ่มต้นการทดสอบด้วยภาพจะทำงานในการกระทำของ GitHub เท่านั้น
โฟลเดอร์เราเตอร์แอพเข้ากันได้กับ Edge Runtime คุณสามารถเปิดใช้งานได้โดยการเพิ่มบรรทัดต่อไปนี้ src/app/layouts.tsx :
export const runtime = 'edge' ; สำหรับข้อมูลของคุณการโยกย้ายฐานข้อมูลไม่สามารถใช้งานได้กับ Edge Runtime ดังนั้นคุณต้องปิดใช้งานการย้ายถิ่นโดยอัตโนมัติใน src/libs/DB.ts :
await migrate ( db , { migrationsFolder : './migrations' } ) ;หลังจากปิดการใช้งานแล้วคุณจะต้องเรียกใช้การย้ายถิ่นด้วยตนเองด้วย:
npm run db:migrateคุณต้องเรียกใช้คำสั่งทุกครั้งที่คุณต้องการอัปเดตสคีมาฐานข้อมูล
ในระหว่างกระบวนการสร้างการโยกย้ายฐานข้อมูลจะถูกดำเนินการโดยอัตโนมัติดังนั้นจึงไม่จำเป็นต้องเรียกใช้ด้วยตนเอง อย่างไรก็ตามคุณต้องกำหนด DATABASE_URL ในตัวแปรสภาพแวดล้อมของคุณ
จากนั้นคุณสามารถสร้างงานสร้างด้วย:
$ npm run buildมันสร้างการสร้างการผลิตที่ดีที่สุดของแผ่นหม้อไอน้ำ เพื่อทดสอบการสร้างที่สร้างขึ้นเรียกใช้:
$ npm run start คุณต้องกำหนดตัวแปรสภาพแวดล้อม CLERK_SECRET_KEY โดยใช้คีย์ของคุณเอง
คำสั่งนี้เริ่มต้นเซิร์ฟเวอร์ท้องถิ่นโดยใช้การผลิต ตอนนี้คุณสามารถเปิด http: // localhost: 3000 ในเบราว์เซอร์ที่คุณต้องการเพื่อดูผลลัพธ์
โครงการใช้ Sentry เพื่อตรวจสอบข้อผิดพลาด ในสภาพแวดล้อมการพัฒนาไม่จำเป็นต้องมีการตั้งค่าเพิ่มเติม: Next.js Boilerplate ได้รับการกำหนดค่าล่วงหน้าเพื่อใช้ Sentry และ Spotlight (Sentry เพื่อการพัฒนา) ข้อผิดพลาดทั้งหมดจะถูกส่งไปยังอินสแตนซ์สปอตไลท์ในพื้นที่ของคุณโดยอัตโนมัติซึ่งจะช่วยให้คุณได้สัมผัสกับ Sentry ในพื้นที่
สำหรับสภาพแวดล้อมการผลิตคุณจะต้องสร้างบัญชี Sentry และโครงการใหม่ จากนั้นใน next.config.mjs คุณต้องอัปเดตแอตทริบิวต์ org และ project ในฟังก์ชั่น withSentryConfig นอกจากนี้เพิ่ม Sentry DSN ของคุณไปยัง sentry.client.config.ts , sentry.edge.config.ts และ sentry.server.config.ts
Next.js Boilerplate อาศัย Codecov สำหรับโซลูชันการรายงานการครอบคลุมรหัส ในการเปิดใช้งาน codecov ให้สร้างบัญชี codecov และเชื่อมต่อกับบัญชี GitHub ของคุณ ที่เก็บของคุณควรปรากฏบนแผงควบคุม Codecov ของคุณ เลือกที่เก็บข้อมูลที่ต้องการและคัดลอกโทเค็น ในการกระทำของ GitHub ให้กำหนดตัวแปรสภาพแวดล้อม CODECOV_TOKEN และวางโทเค็น
ตรวจสอบให้แน่ใจว่าได้สร้าง CODECOV_TOKEN เป็นความลับการกระทำของ GitHub อย่าวางลงในซอร์สโค้ดของคุณโดยตรง
โครงการใช้ pino.js สำหรับการบันทึก ในสภาพแวดล้อมการพัฒนาบันทึกจะแสดงในคอนโซลโดยค่าเริ่มต้น
สำหรับการผลิตโครงการได้ถูกรวมเข้ากับสแต็กที่ดีกว่าในการจัดการและสอบถามบันทึกของคุณโดยใช้ SQL หากต้องการใช้สแต็คที่ดีกว่าคุณต้องสร้างบัญชีสแต็กที่ดีขึ้นและสร้างแหล่งใหม่: ไปที่แผงควบคุมสแต็กที่ดีกว่าของคุณ> แหล่งที่มา> เชื่อมต่อแหล่งที่มา จากนั้นคุณต้องตั้งชื่อให้กับแหล่งที่มาของคุณและเลือก node.js เป็นแพลตฟอร์ม
หลังจากสร้างแหล่งที่มาคุณจะสามารถดูและคัดลอกโทเค็นแหล่งที่มาของคุณ ในตัวแปรสภาพแวดล้อมของคุณวางโทเค็นลงในตัวแปร LOGTAIL_SOURCE_TOKEN ตอนนี้บันทึกทั้งหมดจะถูกส่งไปโดยอัตโนมัติและกลืนโดยสแต็คที่ดีกว่า
โครงการใช้การตรวจสอบเพื่อให้แน่ใจว่าสภาพแวดล้อมการผลิตของคุณทำงานอยู่เสมอ ในช่วงเวลาปกติการตรวจสอบการทดสอบที่ลงท้ายด้วย *.check.e2e.ts ส่วนขยายและแจ้งให้คุณทราบหากการทดสอบใด ๆ ล้มเหลว นอกจากนี้คุณมีความยืดหยุ่นในการดำเนินการทดสอบจากหลายสถานที่เพื่อให้แน่ใจว่าแอปพลิเคชันของคุณมีอยู่ทั่วโลก
ในการใช้งานคุณต้องสร้างบัญชีบนเว็บไซต์ของพวกเขาก่อน หลังจากสร้างบัญชีให้สร้างคีย์ API ใหม่ในแผงควบคุมการเช็คเอาต์และตั้งค่าตัวแปรสภาพแวดล้อม CHECKLY_API_KEY ในการกระทำของ GitHub นอกจากนี้คุณจะต้องกำหนด CHECKLY_ACCOUNT_ID ซึ่งสามารถพบได้ในแผงควบคุมของคุณภายใต้การตั้งค่าผู้ใช้> ทั่วไป
หากต้องการทำการตั้งค่าให้เสร็จสมบูรณ์ให้อัปเดตไฟล์ checkly.config.ts พร้อมที่อยู่อีเมลและ URL การผลิตของคุณเอง
โครงการใช้ ArcJet ซึ่งเป็นผลิตภัณฑ์รหัสที่มีคุณสมบัติหลายอย่างที่สามารถใช้เป็นรายบุคคลหรือรวมกันเพื่อให้การป้องกันในเชิงลึกสำหรับเว็บไซต์ของคุณ
ในการตั้งค่า ArcJet ให้สร้างบัญชีฟรีและรับรหัส API ของคุณ จากนั้นเพิ่มลงในตัวแปรสภาพแวดล้อม ARCJET_KEY
ArcJet ได้รับการกำหนดค่าด้วยคุณสมบัติหลักสองประการ: การตรวจจับบอทและ ArcJet Shield WAF:
ArcJet ได้รับการกำหนดค่าด้วยไคลเอนต์กลางที่ src/libs/Arcjet.ts ซึ่งรวมถึงกฎ SHIELD WAF กฎเพิ่มเติมได้รับการกำหนดค่าใน src/app/[locale]/layout.tsx ตามประเภทหน้า
Next.js Boilerplate รวมถึงเครื่องวิเคราะห์มัดในตัว มันสามารถใช้ในการวิเคราะห์ขนาดของกลุ่ม JavaScript ของคุณ ในการเริ่มต้นให้เรียกใช้คำสั่งต่อไปนี้:
npm run build-statsโดยการเรียกใช้คำสั่งมันจะเปิดหน้าต่างเบราว์เซอร์ใหม่โดยอัตโนมัติพร้อมผลลัพธ์
โครงการได้รับการกำหนดค่าด้วย Drizzle Studio เพื่อสำรวจฐานข้อมูล คุณสามารถเรียกใช้คำสั่งต่อไปนี้เพื่อเปิดสตูดิโอฐานข้อมูล:
npm run db:studioจากนั้นคุณสามารถเปิด https://local.drizzle.studio ด้วยเบราว์เซอร์ที่คุณชื่นชอบเพื่อสำรวจฐานข้อมูลของคุณ
หากคุณเป็นผู้ใช้ VSCODE คุณสามารถรวมเข้ากับ VSCODE ได้ดีขึ้นโดยการติดตั้งส่วนขยายที่แนะนำใน .vscode/extension.json รหัสเริ่มต้นมาพร้อมกับการตั้งค่าสำหรับการรวมที่ไร้รอยต่อกับ VSCODE การกำหนดค่าการดีบักยังมีไว้สำหรับประสบการณ์การดีบักส่วนหน้าและแบ็กเอนด์
ด้วยปลั๊กอินที่ติดตั้งใน VSCODE ของคุณ ESLINT และ PRETTIER สามารถแก้ไขรหัสและแสดงข้อผิดพลาดได้โดยอัตโนมัติ เช่นเดียวกับการทดสอบ: คุณสามารถติดตั้งส่วนขยาย Vscode Vitest เพื่อเรียกใช้การทดสอบของคุณโดยอัตโนมัติและยังแสดงการครอบคลุมรหัสในบริบท
เคล็ดลับ PRO: หากคุณต้องการการตรวจสอบแบบกว้างของโครงการพร้อม TypeScript คุณสามารถเรียกใช้งานบิลด์ด้วย CMD + Shift + B บน Mac
ทุกคนยินดีที่จะมีส่วนร่วมในโครงการนี้ อย่าลังเลที่จะเปิดปัญหาหากคุณมีคำถามใด ๆ หรือค้นหาข้อผิดพลาด เปิดรับข้อเสนอแนะและการปรับปรุงโดยสิ้นเชิง
ได้รับใบอนุญาตภายใต้ใบอนุญาต MIT ลิขสิทธิ์© 2024
ดูใบอนุญาตสำหรับข้อมูลเพิ่มเติม
| | |
| | |
| | |
| เพิ่มโลโก้ของคุณที่นี่ |
ทำด้วย♥โดย creativedesignsguru
กำลังมองหาแผ่นต้มที่กำหนดเองเพื่อเริ่มโครงการของคุณหรือไม่? ฉันดีใจที่ได้พูดคุยว่าฉันจะช่วยคุณสร้างได้อย่างไร อย่าลังเลที่จะติดต่อได้ตลอดเวลาที่ [email protected]!
