Category Archives: nextjs

Higher-Order Components & Render Props

ทั้งหมดทำหน้าที่แก้ปัญหา cross cutting concern แยกส่วนโค้ดที่ซับซ้อนไปอยู่ในที่เดียว 1.ยุบแยกไปทำ new components 2.HOC(Higher Order Component) – logic ซ้ำๆกัน ย้ายไปทำในนี้ โยน Component เข้าไป ได้ Component เดิม เพิ่มเติมคือมี logic พิเศษเพิ่มขึ้นมา เช่น Redux ก็จะได้ความสามารถเข้าถึง store 3.renderProps – พวก Form ที่ใช้ซ้ำๆกัน

Posted in nextjs, react | Leave a comment

functional programming map reduce function

การเปลี่ยนแปลงค่าใน array const arr = [1,2,3] /// [2,4,6] const result = arr.map(n => n*2) console.log(result) // [2,4,6] การกรอง array const arr = [1,2,3,4,5,6] // [2,4,6] arr.filter(n=> n % 2 === 0) console.log(result) // [2,4,6] หาแค่ value ตัวแรกที่พบ const arr = … Continue reading

Posted in functional_programming, nextjs | Leave a comment

nextjs styled components ทำอะไร

Styled Components มีคอนเซ็ปทำให้ component สมบูรณ์ด้วยตนเอง ไม่ต้องแยกไฟล์ css .scss ซึ่งถือว่าดีมากๆ เราจะเขียน stylesheet ลงไปใน Component เลย และเมื่อสั่ง yarn build มันจะทำการ pack style จากฝั่ง SSR(Server Side Rendering) ไปลงอยู่ใน head เพื่อเพิ่มความไวและแก้ปัญหาเรื่อง Critical CSS Path (แต่มันเอามาทั้งหมดเลย ยังไม่ดีที่สุด) 1.Config ที่ต้องเพิ่ม หากจะใช้ Styled Component 1.1) เพิ่ม dependency … Continue reading

Posted in nextjs | Leave a comment

nextjs method getInitialProps ทำอะไร

getInitialProps เป็น method พิเศษมีเฉพาะ nextjs ที่จะประมวลผลในฝั่ง SSR ในการเรียกครั้งแรก(First Hit) และทำงานฝั่ง Client ในการเรียกครั้งที่สองเป็นต้นไป โดย return ค่าอะไรก็ตาม ค่านั้นจะเป็น props ของ Component โดยหากมีการทำ Higher Order Component method getInitialProps จะทำงานแค่ด้านในสุดที่ Component ส่วน method getInitialProps ของลูกจะต้องเขียนเรียกเอง ถึงจะทำงาน ซึ่งการเขียนเรียกเองนั้น จะทำงานฝั่ง Client class Index extends Component { … Continue reading

Posted in nextjs | Leave a comment