close

NextJS Base Blog: เครื่องมือสร้างบล็อกสมัยใหม่ด้วย Next.js 15 และ Tailwind

หากคุณกำลังมองหาเทมเพลตเริ่มต้นบล็อกสมัยใหม่ที่สร้างด้วย Next.js โปรเจกต์ NextJS Base Blogคือจุดเริ่มต้นที่ยอดเยี่ยม มันเป็นแอปพลิเคชันบล็อกโอเพนซอร์สที่มีคุณสมบัติครบถ้วน สร้างด้วยNext.js 15, React 19, TypeScript และ Tailwind CSS 4

โปรเจกต์นี้มีสถาปัตยกรรมที่เรียบง่าย อินเทอร์เฟซผู้ใช้ที่ทันสมัยcomponents​​และเลเยอร์ API จำลองทำให้เหมาะสำหรับนักพัฒนาที่ต้องการสร้างบล็อกอย่างรวดเร็วโดยไม่ต้องตั้งค่าแบ็กเอนด์

ที่เก็บโค้ดบน GitHub: https://github.com/bfotool/nextjs-base-blog

โครงการนี้มีประโยชน์อย่างยิ่งสำหรับ:

  • นักพัฒนาเรียนรู้การใช้งานNext.js สำหรับแอปพลิเคชันRouter

  • สร้างบล็อกหรือเว็บไซต์เนื้อหาอย่างรวดเร็ว

  • การสร้างโปรเจ็กต์ต้นแบบ Next.js

  • พัฒนาฟีเจอร์ UI ก่อนเชื่อมต่อกับ API แบ็กเอนด์จริง

ภาพรวมโครงการ

NextJS Base Blogถูกออกแบบมาให้เป็นเทมเพลตบล็อกที่พร้อมใช้งานจริงโดยมีฟีเจอร์ทั่วไปมากมายที่พบได้ในเว็บไซต์เนื้อหาสมัยใหม่

โครงการนี้ประกอบด้วย:

  • หน้าแรกที่มีบทความเด่น

  • หน้าบทความบล็อก

  • การกรองหมวดหมู่

  • การค้นหาข้อความเต็ม

  • การแบ่งหน้า

  • สารบัญ

  • บทความที่เกี่ยวข้อง

  • ธีมสีเข้ม/สีอ่อน

ส่วนที่น่าสนใจที่สุดส่วนหนึ่งของโปรเจ็กต์นี้คือFake API Layerซึ่งจำลอง REST API โดยใช้Axios interceptorsこれによりนักพัฒนาสามารถสร้างและทดสอบแอปพลิเคชันได้โดยไม่ต้องมีเซิร์ฟเวอร์แบ็กเอนด์

คุณสมบัติหลัก

หน้าแรก

หน้าแรกแสดงส่วนสำคัญหลายส่วน:

  • โพสต์เด่น

  • ตัวกรองหมวดหมู่

  • ตารางแสดงบทความในบล็อก

  • การนำทางแบบแบ่งหน้า

ดีไซน์ได้รับการออกแบบให้ปรับขนาดได้ อย่างสมบูรณ์แบบ และเหมาะสมที่สุดสำหรับทั้งคอมพิวเตอร์ตั้งโต๊ะและอุปกรณ์มือถือ

หน้าบทความบล็อก

แต่ละบทความสามารถเข้าถึงได้ผ่านเส้นทางแบบไดนามิก:

/blog/[slug]

หน้าบทความในบล็อกประกอบด้วยคุณสมบัติที่มีประโยชน์หลายอย่าง:

  • เนื้อหาบทความฉบับเต็ม

  • สารบัญอัตโนมัติ

  • เวลาอ่านโดยประมาณ

  • ปุ่มแชร์บนโซเชียลมีเดีย

  • คำแนะนำบทความที่เกี่ยวข้อง

คุณสมบัติเหล่านี้ช่วยสร้างประสบการณ์การอ่านแบบมืออาชีพที่คล้ายคลึงกับแพลตฟอร์มบล็อกสมัยใหม่

หน้าหมวดหมู่

ผู้ใช้สามารถเรียกดูโพสต์ตามหมวดหมู่ได้

ตัวอย่างเส้นทาง:

/blog/category/[slug]

คุณสมบัตินี้ช่วยให้ผู้อ่านสามารถสำรวจเนื้อหาภายในหัวข้อเฉพาะได้

ฟังก์ชันการค้นหา

โครงการนี้มีหน้าค้นหาในตัว:

/search

การค้นหารองรับ:

  • ผลลัพธ์แบบเรียลไทม์

  • อินพุตที่ลดการสั่นสะเทือน

  • การค้นหาโดยใช้ชื่อเรื่อง ข้อความย่อ และแท็ก

สิ่งนี้ช่วยปรับปรุงการใช้งานและช่วยให้ผู้ใช้ค้นหาเนื้อหาที่เกี่ยวข้องได้อย่างรวดเร็ว

หน้าเกี่ยวกับเราและหน้าติดต่อเรา

โครงการนี้ยังรวมถึงหน้าเพิ่มเติมที่มักพบได้ในบล็อกระดับมืออาชีพอีกด้วย

เกี่ยวกับหน้าเพจ

หน้า "เกี่ยวกับเรา" จะแนะนำข้อมูลดังต่อไปนี้:

  • ทีม

  • เรื่องราวของโครงการ

  • ค่านิยมหลัก

หน้าติดต่อ

หน้าติดต่อประกอบด้วยแบบฟอร์มที่ผ่านการตรวจสอบความถูกต้องอย่างสมบูรณ์ ซึ่งประกอบด้วย:

  • การตรวจสอบความถูกต้องของแบบฟอร์ม

  • การแจ้งเตือนขนมปังปิ้ง

  • ข้อเสนอแนะเกี่ยวกับความสำเร็จและข้อผิดพลาด

รองรับโหมดมืด

บล็อกนี้รองรับทั้งโหมดมืดและโหมดสว่าง

คุณสมบัติเด่นได้แก่:

  • การตรวจจับธีมระบบอัตโนมัติ

  • สลับด้วยตนเอง

  • การคงธีมไว้โดยใช้localStorage

เลเยอร์ API จำลอง(การพัฒนาโดยไม่มีแบ็กเอนด์)

ส่วนที่น่าสนใจที่สุดส่วนหนึ่งของโปรเจกต์นี้คือระบบFake API

แทนที่จะเรียกใช้เซิร์ฟเวอร์จริง แอปพลิเคชันนี้ใช้Axios interceptorเพื่อจำลองการตอบสนองของ REST API

วิธีการทำงานของ Fake API

  1. อินสแตนซ์ Axios ถูกสร้างขึ้นที่:

src/services/api-client.ts

  1. เมื่อเปิดใช้งานตัวแปรสภาพแวดล้อม:

NEXT_PUBLIC_USE_MOCK_API=true

  1. คำขอจะถูกดักจับก่อนที่จะส่งถึงเครือข่าย

  2. ตัวจัดการจำลองจะส่งคืนการตอบสนองปลอมที่มีความล่าช้าที่สมจริง(200–600 มิลลิวินาที)

  3. การตอบสนองมีลักษณะเหมือนกับการตอบสนองของ API จริงๆ

ข้อมูลจำลองถูกจัดเก็บไว้ใน:

src/mocks/

รวมทั้ง:

  • ตัวอย่างบทความ

  • ผู้เขียน

  • หมวดหมู่

จุดเชื่อมต่อ API ที่ใช้งานได้

API จำลองนี้รองรับเอนด์พอยต์หลายรายการ:

วิธี จุดสิ้นสุด คำอธิบาย
รับ /โพสต์ บทความบล็อกแบบแบ่งหน้า
รับ /โพสต์/บทความเด่น บทความเด่น
รับ /โพสต์/:สลัก บทความบล็อกเดียว
รับ /หมวดหมู่ รายการหมวดหมู่
รับ /ผู้เขียน รายชื่อผู้เขียน
โพสต์ /ติดต่อ ส่งแบบฟอร์มติดต่อ

เทคโนโลยีสแต็ก

โครงการนี้ใช้สแต็กฟรอนต์เอนด์ที่ทันสมัย

ชั้น เทคโนโลยี
กรอบ Next.js 15
ไลบรารี UI รีแอค 19
ภาษา ไทป์สคริปต์
จัดแต่งทรงผม เทลวินด์ CSS 4
ไคลเอ็นต์ HTTP แอกซิโอส
ไอคอน ลูไซด์ รีแอคท์
เศษผ้า อีเอสลินท์
การจัดรูปแบบ สวยขึ้น

ชุดซอฟต์แวร์นี้ประกอบด้วย:

  • ความปลอดภัยประเภทที่แข็งแกร่ง

  • สถาปัตยกรรมที่บำรุงรักษาได้

  • ประสบการณ์นักพัฒนาสมัยใหม่

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

โครงสร้างของโครงการเป็นไปตามสถาปัตยกรรมที่เรียบง่ายและปรับขนาดได้

src/ 
├── app/ 
├── components/ 
├── services/ 
├── mocks/ 
├── contexts/ 
├── hooks/ 
├── types/ 
└── lib/

แอปRouter

ไดเร็กทอรี นี้appประกอบด้วยเส้นทางทั้งหมดของแอปพลิเคชัน

ตัวอย่าง:

app/page.tsx 
app/blog/[slug]/page.tsx 
app/search/page.tsx

นี่เป็นไปตามสถาปัตยกรรมแอปพลิเคชัน Next.jsRouterที่ได้รับการแนะนำใน Next.js เวอร์ชันใหม่กว่า

ส่วนประกอบ

ส่วนติดต่อผู้ใช้(UI) componentsถูกจัดระเบียบเป็นกลุ่มตามหลักตรรกะ:

components/layout 
components/common 
components/blog

โครงสร้างนี้ช่วยให้โค้ดส่วนติดต่อผู้ใช้เป็นระเบียบและดูแลรักษาง่ายขึ้น

ชั้นบริการ

โฟลเดอร์ นี้servicesประกอบด้วยตรรกะที่เกี่ยวข้องกับ API:

  • การกำหนดค่าไคลเอ็นต์ API

  • บริการไปรษณีย์

  • บริการหมวดหมู่

  • บริการแบบฟอร์มติดต่อ

เลเยอร์นี้แยกตรรกะการดึงข้อมูลออกจากส่วนติดต่อผู้ใช้componentsซึ่งช่วยเพิ่มความสามารถในการขยายขนาด

คู่มือการติดตั้ง

ความต้องการ

ก่อนเริ่มต้น โปรดตรวจสอบให้แน่ใจว่าคุณมีสิ่งต่อไปนี้:

  • Node.js เวอร์ชัน 18 หรือใหม่กว่า

  • npm, yarn หรือ pnpm

โคลนที่เก็บข้อมูล

git clone https://github.com/bfotool/nextjs-base-blog.git 
cd nextjs-base-blog

ติดตั้งส่วนประกอบที่จำเป็น

npm install

กำหนดค่าตัวแปรสภาพแวดล้อม

cp .env.example .env

เริ่มเซิร์ฟเวอร์สำหรับการพัฒนา

npm run dev

เปิดเบราว์เซอร์ของคุณและเข้าไปที่:

http://localhost:3000

สคริปต์ที่พร้อมใช้งาน

สั่งการ คำอธิบาย
npm run dev เริ่มเซิร์ฟเวอร์สำหรับการพัฒนา
npm run build สร้างเวอร์ชันสำหรับใช้งานจริง
npm run start เริ่มเซิร์ฟเวอร์การผลิต
npm run lint รัน ESLint
npm run format จัดรูปแบบโค้ดด้วย Prettier
npm run type-check เรียกใช้การตรวจสอบ TypeScript

การเปลี่ยนไปใช้ API จริง

หากคุณต้องการเชื่อมต่อโปรเจ็กต์กับ API แบ็กเอนด์จริง ให้ทำตามขั้นตอนเหล่านี้

ขั้นตอนที่ 1: ปิดใช้งาน Mock API

แก้ไข.envไฟล์:

NEXT_PUBLIC_USE_MOCK_API=false

ขั้นตอนที่ 2: ตั้งค่า URL พื้นฐานของ API

NEXT_PUBLIC_API_BASE_URL=https://your-api-server.com

ขั้นตอนที่ 3: จับคู่ประเภทข้อมูล

ตรวจสอบให้แน่ใจว่า API ฝั่งแบ็กเอนด์ของคุณส่งคืนข้อมูลที่ตรงกับคำจำกัดความของ TypeScript ใน:

src/types/index.ts

ไม่ต้องแก้ไขโค้ดเพิ่มเติมใดๆ

การปรับแต่งเนื้อหา

สามารถแก้ไขเนื้อหาจำลองได้ภายใน:

src/mocks/posts.ts 
src/mocks/categories.ts 
src/mocks/authors.ts

วิธีนี้ช่วยให้นักพัฒนาสามารถปรับแต่งเนื้อหาตัวอย่างได้อย่างรวดเร็ว

การปรับแต่งธีมและส่วนติดต่อผู้ใช้

สไตล์สากลสามารถพบได้ใน:

src/app/globals.css

โครงการนี้ใช้ฟอนต์ต่อไปนี้:

  • ดีเอ็ม ซานส์

  • เจ็ทเบรนส์ โมโน

คุณสามารถปรับแต่งสไตล์หรือเปลี่ยนแบบอักษรได้ตามความต้องการในการออกแบบของคุณ

บทสรุป

NextJS Base Blogเป็นเทมเพลตเริ่มต้นที่ทรงพลังและทันสมัยสำหรับการสร้างบล็อกด้วย Next.js

ข้อดีที่สำคัญของโครงการนี้ ได้แก่:

  • ชุดเทคโนโลยีสมัยใหม่

  • สถาปัตยกรรมที่สะอาด

  • API จำลองสำหรับการพัฒนา

  • ผสานรวมเข้ากับ API แบ็กเอนด์จริงได้อย่างง่ายดาย

  • อินเทอร์เฟซผู้ใช้ที่ตอบสนองได้ดีและคุณสมบัติที่ทันสมัย

หากคุณกำลังสร้างบล็อก เว็บไซต์สำหรับนักพัฒนา หรือแพลตฟอร์มเนื้อหาด้วย Next.js คลังเก็บโค้ดนี้จะช่วยประหยัดเวลาในการพัฒนาได้อย่างมาก

ดูซอร์สโค้ดได้ที่นี่: https://github.com/bfotool/nextjs-base-blog