ลองใช้ Strapi กับ Next.js กัน (มาทำเว็บ Blog กัน)

☕️ สนับสนุนช่องเราด้วยการสมัครสมาชิกช่องทางนี้ได้เลย
   / @mikelopster  

ลองไมค์ สัปดาห์นี้มาต่อกันที่หัวข้อ Next.js ด้วย Strapi CMS Headless library ที่ช่วยทำ CMS ออกมาให้ เราจะลองนำ Strapi มาใช้ร่วมกันกับ Next.js กัน โดยเราจะทำกันตั้งแต่เริ่มต้น จนถึง deploy ขึ้น Server ของจริงกันเลย 😆

โดยหัวข้อนี้จะประกอบด้วย
1. รู้จัก Strapi และมาลองเล่น Strapi กัน
2. ทำ Login ผ่าน Strapi และควบคุม Access Control ผ่าน Strapi
3. นำ Next.js ต่อเข้ากับ Rest API ของ Strapi
4. Deploy Strapi และ Next.js ขึ้นบน Server กัน !

ขอย้ำ 1 อย่าง ในหัวข้อนี้เราจะไม่ย้ำพื้นฐานของ Next.js ในหลายๆจุด หากใครฟังจุดไหนแล้วงง Concept ของ Next.js สามารถย้อนกลับไปฟังที่หัวข้อ Next.js ของเราก่อนได้น้า

หัวข้อ
00:00 แนะนำ Session
01:44 แนะนำ Strapi และ Headless CMS
07:20 การเชื่อมกันระหว่าง Strapi และ Next.js
08:27 setup strapi project
11:40 Strapi - การเพิ่ม Schema collection
17:23 Strapi - การเพิ่ม Content เข้า Schema นั้น
18:50 Strapi - การดึงข้อมูลผ่าน Rest API (และ Permission)
22:59 Strapi - เพิ่ม Schema แบบ Single Type และ API
25:25 Strapi - Rest API กับ populate
26:35 Strapi - การเพิ่ม Relation ระหว่าง Schema
31:20 Strapi - User และการ login
38:03 คำแนะนำอื่นๆของ Strapi
39:08 Setup Next.js
40:35 Next.js - ดึงข้อมูลจาก Blog ใน Strapi
46:26 Next.js - ดึง Blog แต่ละ id ออกมาได้
50:25 Next.js - เพิ่ม Link จากหน้า Blog สู่ Blog Detail
51:26 Next.js - เพิ่ม Login และ Server action
59:36 Next.js - ยิง Special Blog (ที่ต้อง Authentication ก่อน)
1:02:48 Next.js - เพิ่ม middleware กั้นสิทธิเฉพาะคน Login
1:11:05 Deploy Strapi สู่ Heroku
1:24:21 Deploy Next สู่ Vercel (ต่อเข้ากับ Strapi)
1:29:21 สรุปทั้งหมดเราทำอะไรไปบ้าง
1:31:04 ขอขอบคุณ Supporter ทุกท่านด้วยหัวใจ 🙏

ฉบับ Document
https://mikelopster.dev/posts/next-st...

ใครมีข้อสงสัยเพิ่มเติม มาพูดคุยแลกเปลี่ยนความรู้กันได้ที่
Facebook page:   / mikelopster.dev   กันได้เลย

พิกัดของด้านหลัง : https://shope.ee/8A54c8cfkf

Enjoy ครับ 😘