tailnext

tailnext

TailNext เป็นเทมเพลตฟรีและโอเพ่นซอร์สเพื่อให้เว็บไซต์ของคุณใช้ NextJS + Tailwind CSS พร้อมที่จะเริ่มโครงการใหม่และออกแบบโดยคำนึงถึงแนวทางปฏิบัติที่ดีที่สุด

คุณสมบัติ

• ✅การรวมเข้ากับ Tailwind CSS ที่รองรับ โหมดมืด
• ✅คะแนน พร้อมการผลิต ใน Lighthouse และ Pagespeed Insights Reports
• ✅ การเพิ่มประสิทธิภาพภาพ และ การเพิ่มประสิทธิภาพแบบอักษร
• ✅ บล็อกที่เป็นมิตรอย่างรวดเร็วและ SEO
• ✅การสร้าง แผนผังไซต์ และ robots.txt ตามเส้นทางของคุณ

สารบัญ

• การสาธิต
• เริ่มต้น
  • โครงสร้างโครงการ
  • คำสั่ง
  • การกำหนดค่า
  • ปรับใช้
• แผนงาน
• การบริจาค
• กิตติกรรมประกาศ
• ใบอนุญาต

การสาธิต

- https://tailnext.vercel.app/

เริ่มต้น

• โคลน: git clone https://github.com/onwidget/tailnext.git
• ป้อนในไดเรกทอรี: cd tailnext
• ติดตั้งการพึ่งพา: npm install
• เริ่มต้นเซิร์ฟเวอร์การพัฒนา: npm run dev
• ดูโครงการในสภาพแวดล้อมท้องถิ่น: localhost:3000

โครงสร้างโครงการ

ภายในเทมเพลต TailNext คุณจะเห็นโฟลเดอร์และไฟล์ต่อไปนี้:

 /
├── .storybook/
├── app/
│   ├── (blog)
│   │   ├── [slug]
|   |   |   └── page.js
|   |   └── blog
|   |       └── page.js
│   ├── head.js
│   ├── layout.js
│   └── page.js
├── public/
│   └── favicon.svg
├── src/
│   ├── assets/
│   │   ├── images/
|   |   └── styles/
|   |       └── base.css
│   ├── components/
│   │   ├── atoms/
|   |   └── widgets/
|   |       ├── Header.astro
|   |       ├── Footer.astro
|   |       └── ...
│   │── content/
│   |   └── blog/
│   |       ├── demo-post-1.md
│   |       └── ...
│   ├── stories/
│   ├── utils/
│   └── config.mjs
├── package.json
└── ...

ปรุงรส next.js ผู้เชี่ยวชาญ? ลบไฟล์นี้ อัปเดต config.mjs และเนื้อหา มีความสุข!

คำสั่ง

คำสั่งทั้งหมดเรียกใช้จากรูทของโครงการจากเทอร์มินัล:

สั่งการ	การกระทำ
npm install	ติดตั้งการพึ่งพา
npm run dev	เริ่มเซิร์ฟเวอร์ dev ท้องถิ่นที่ localhost:3000
npm run build	สร้างเว็บไซต์การผลิตของคุณเป็น ./dist/
npm run preview	ดูตัวอย่างงานสร้างของคุณในเครื่องก่อนปรับใช้
npm run storybook	หนังสือนิทานเปิดเพื่อดูเรื่องราวโดยวิดเจ็ต
npm run format	รหัสฟอร์แมตด้วยสวยกว่า
npm run lint:eslint	เรียกใช้ ESLINT

การกำหนดค่า

เร็วๆ นี้ ..

ปรับใช้

ปรับใช้กับการผลิต (คู่มือ)

คุณสามารถสร้างงานสร้างที่ดีที่สุดด้วย:

npm run build

ตอนนี้เว็บไซต์ของคุณพร้อมที่จะนำไปใช้งานแล้ว ไฟล์ที่สร้างขึ้นทั้งหมดจะอยู่ที่โฟลเดอร์ dist ซึ่งคุณสามารถปรับใช้โฟลเดอร์ไปยังบริการโฮสติ้งใด ๆ ที่คุณต้องการ

ปรับใช้เพื่อ netlify

โคลนที่เก็บนี้ในบัญชี GitHub ของตัวเองและปรับใช้เพื่อ netlify:

ปรับใช้กับ vercel

โคลนที่เก็บนี้ในบัญชี GitHub ของตัวเองและปรับใช้กับ Vercel:

แผนงาน

เร็วๆ นี้ ..

การบริจาค

หากคุณมีความคิดคำแนะนำหรือค้นหาข้อบกพร่องใด ๆ อย่าลังเลที่จะเปิดการสนทนาปัญหาหรือสร้างคำขอดึง นั่นจะมีประโยชน์มากสำหรับเราทุกคนและเรายินดีที่จะฟังและลงมือทำ

กิตติกรรมประกาศ

เริ่มแรกสร้างโดย Onwidget และดูแลโดยชุมชนของผู้มีส่วนร่วม

ใบอนุญาต

Tailnext ได้รับอนุญาตภายใต้ใบอนุญาต MIT - ดูไฟล์ใบอนุญาตสำหรับรายละเอียด