มาลองเล่น Supabase ด้วย Next.js กัน

[@jdoublek]

ยินดีกับ 10,000 ซับด้วยนะคะ ชอบช่องนี้ สอนเข้าใจง่ายมาก เอาไปต่อยอดได้ดีเลยค่ะ

[@devfriday]

ตินิดนึงนะครับ เราไม่ควรเขียน condition โดยการใช้ && ใน jsx นะครับ เพราะ && operator มันจะทำเงื่อนไขโดยไปเช็คทั้งคู่เสมอ สิ่งที่ดีคือ ควรใช้ or operator อย่าง ? แทน เพราะมันจะคิดฝั่งซ้ายก่อนอย่างเดียว ทำให้เพิ่มประสิทธิภาพในการ render ได้ดีกว่าครับ และก็ขอเสริมว่า ถ้าใครอยากทำ form state ดีๆ แนะนำกระโดดไปใช้ react hook form จะดีกว่าครับ ใช้คู่กับ package อย่าง zod หรือ yup ที่เป็น schema object และ @hookform/resolvers ที่ช่วยจัดการเรื่องปัญหาในการใช้คู่กับ validator รับรองว่าท่าที่เขียนจะออกมาสวย และได้ performance ดีควบคู่กันไปด้วยครับ

[@devfriday]

และก็เสริมได้อีกนิด ถ้าเราจะทำ seo ด้วย ไม่ควรเขียนท่านี้อย่างยิ่งเลยครับ ควรใช้ search params แทนที่จะดีกว่า เพื่อให้ url ได้ถูก generate ตาม paging ครับ เวลาเราจะส่งข้อมูลแชร์ให้คนอื่นที่อยู่ page 2 / 3 มันจะได้ทำได้ นอกจากนี้ยังสามารถใช้ร่วมกับท่าของ ssr อย่าง revalidatePath ได้เลย ไหนๆก็ใช้ server action แล้วก็ควรใช้ความสามารถของ ssr ให้สุดครับ ถ้าใช้ use client ผสมๆกับ use server ที่เป็นฟีเจอร์ทำงานกับ form ของ server action มันจะไม่สุดสักทางนึงครับผม

[@mikelopster]

ขอบคุณสำหรับคำแนะนำนะครับ ขอเพิ่มเติมจากที่แนะนำสำหรับเคสการใช้ && หรือ ? นะครับ
&& หรือ ? จะดีตามที่กล่าวมาในกรณีที่เงื่อนไขมันกลับกัน เช่นเคสการเช็คตัวแปร isLoading แบบนี้
{ isLoading && }
{ !isLoading && }
ใช้เป็น { isLoading ? : } จะลดจำนวน operation การเช็คได้
แต่ไม่ได้หมายความว่า เราไม่สามารถใช้ && ได้นะครับ (&& จะเหมือนกับ if และ ? จะเหมือนกับ if-else) จะขึ้นอยู่กับการเรียง condition ของเราด้วยนะครับ

[@devfriday]

ก็ผมกำลังพูดถึง jsx syntax render อยู่นะครับ ในส่วน render มันก็ทำงานตามที่ผมบอกไป นอกเหนือส่วนอื่นๆจะใช้ && มันก็ปกติอยู่แล้วครับไม่เกี่ยวกันและผมก็ไม่ได้พูดถึงการใช้ if else เลยครับ แนะนำให้เขียนตามที่ document react แนะนำครับผม
@@mikelopster

[@devfriday]

ซึ่งใน document นี้จะเขียนเพิ่มเติมเหตุผลไว้อีกว่า การใช้ && ที่มันไม่ควรเพราะ condition มันจะเหมาะกับการใช้ boolean เท่านั้นครับ เป็นเรื่อง proof of syntax ถ้าเราเขียนโค้ดจุดนึงใช้ ? จุดนึงใช้ && จะทำให้การทำงานกับทีมใหญ่ๆไม่มี standard pattern ที่ดีครับ@@mikelopster

[@rinabluuer]

กำลังศึกษาเรื่องนี้อยู่เลยค่ะ ขอบคุณสำหรับความรู้นะคะ 🥹

[@suwatthamsena6313]

ร้องเฮ้เลยครับพี่ไมค์ ชีวิตง่ายขึ้นเยอะเลย ฮ๋าๆ กราบขอบพระคุณครับผม

[@kunkode6326]

เยี่ยมเลยครับ กำลังจะเริ่มโปรเจ็คด้วย supabase เลย ดูคลิปแล้วพร้อมลุย ++

[@premwetchayanon5128]

ยินดี 10k sub นะครับพี่ mike ขอบคุณที่สร้าง content แบ่งปันความรู้ดีๆกับชาว dev นะครับ

[@PanCk-x3m]

สอนดีกระชับสนุกค่ะ ไม่ง่วงนอนนนน เลิฟช่องนี้

[@marsimadz]

ชอบมากเลยครับ สอนดี มีพลัง พูดไว สนุก และเข้าใจง่าย

[@AryMiku]

ยินดีด้วยครับกับ 10,000 Sub ครับ รอ content svelte อันต่อไปอยู่นะครับบ ^^

[@maoudaiou]

ทำคอส nextjs ตัวล่าสุด + mongodb หรือ supabase ลง udemy หน่อยครับ
ขอ workshop สัก 2-3 อย่าง จะแจ่มมาก รอเรียนเลย

[@poorin5788]

อยากได้คอร์ส supabase มาก

[@prokong.academy]

ฮ่า ๆ ขออนุญาตไหว้สวย หนึ่งหมื่นซับ ดีใจด้วยครับไมล์ 🍷

[@mikelopster]

ไปต่อครับ 💪

[@dutchmillcz4998]

ยินดีด้วยกับ10k subครับ 🎉

[@mikelopster]

ไปกันต่อครับ 💪

[@faytodot]

กราบคับ นึกว่าพี่จะไมทำ next js อีกสะแล้ว เรารัก next js🥹

[@mikelopster]

next.js จะอยู่ในใจเราเสมอครับ 😆

[@visaumnadkiatgul8899]

ยอดเยี่ยมเหมือนเดิมครับ

[@ChaloemchaiChanbualun]

สอนดีมากเลยครับอยากให้สอน nextjs กับ Redux toolkit บ้างครับ

[@mikelopster]

ผมเก็บไว้ใน checklist ก่อนน้า 😁

[@poorin5788]

จัดให้จริงด้วยๆ

[@Erdnalf]

จบแบบคลีนโค้ดสวยๆ เลย 😎👍

[@pitchayutkhotsuno4490]

ขอบคุณครับ🎉

[@chaiyalan]

อยากให้มีซักคลิบที่พูดเรื่องการ Deploy เว็บขึ้น Server จริงๆ ซักคลิบจะดีมากเลยครับ 555

[@mikelopster]

ผมกำลังทำการบ้านเรื่องนี้อยู่น้า เรื่องนี้เดี๋ยวมีหยิบมาเล่าแน่นอน

[@chatchawarnsrimontree]

ติดตามครับ

[@Jongjate]

ช่องไฟแรง กระชับ เนื้อหาใหม่ แน่น น้องๆ ใน บ ก็ติดตามอยู่ครับ อยากทราบประวัติการทำงาน หรือเรียนเลยครับ

[@mikelopster]

เดี๋ยวมีโอกาสจะหยิบมาแชร์กันนะครับ 😁

[@jirawatmaubkhuntod1823]

ว้าวซ่า😂

[@micro927]

สอบถามหน่อยครับ
ถ้าเราอยากใช้ supabase ให้เป็น full backend server เลย (นอกจากจะ query ข้อมูลจาก DB แล้ว อยากจะให้มันทำ logic บางอย่างก่อน แล้วค่อยส่งค่าออกมา)
ซึ่งหน้าบ้านที่เป็น Client side rendering (React) จะได้ call endpoint และรอรับ result อย่างเดียว ไม่ต้องมี logic อะไรที่หน้าบ้านเลย มันสามารถทำแบบนั้นได้มั้ยครับผม

[@mikelopster]

ได้ครับ จัดการผ่านตัว backend ของ next.js ก่อนได้ใน server component หรือ api routes ก่อนส่งไปยัง component ได้เลยครับ

[@bababa4439]

มีวิธีของ page router มั้ยครับ เจอแต่typescriptครับ

[@mikelopster]

จริงๆ วิธีการเหมือนกันกับ typescript เลยน้า ปลด type ออก ก็สามารถใช้เป็นท่าของ javascript ได้แล้วนะครับ

[@catorangefat]

สงสัยว่าทำไมในไทย ไม่ค่อยมีคนสอน supabase เลยครับ
ขอบคุณครับผม

[@mikelopster]

คิดว่า อาจจะยังมีคนใช้น้อยอยู่นะครับ แม้แต่ตัวผมเองก็พึ่งรู้จักไม่นานนี้เหมือนกัน แต่เชื่อว่าอนาคต มีแนมโน้มว่าคนน่าจะใช้เพิ่มเรื่อยๆ จาก feature ที่มีก็ถือว่าครบครันอยู่นะครับ 😁

[@kongtrumpet1749]

good job

[@kongtrumpet1749]

งงว่า ทำไม Error: Rendered fewer hooks than expected. This may be caused by an accidental early return statement.

[@3stdv93]

ผมอ่านสุภาเบส 😂

[@mikelopster]

เพื่อนๆของสุภาษิต 😂

[@parktoykung]

[@pornputS]

อยากให้สอนใช้งาน Web-socket ค้าบ P'mike

[@mikelopster]

น่าสนใจจ