ลองทำ Static Site Generator ด้วย Next.js

การเขียนเว็บด้วย framework ต่าง ๆ และทำการ generate website ให้กลายเป็น HTML ก่อน deploy ขึ้น production กำลังเป็นที่นิยมขึ้นเรื่อย ๆ ในหมู่นักพัฒนา ที่เห็นได้ชัดเลยเว็บที่เป็นพวก blog ส่วนตัวของนักพัฒนา เริ่มไม่ได้เขียนโดยใช้ WordPress เหมือนแต่ก่อนแล้ว แต่ใช้เทคโนโลยีที่เรียกว่า Static Site Generator ในการสร้างเว็บ blog ของตัวเองมากขึ้น

framework ที่เป็นที่นิยมมาก ๆ เลยก็คือ GatsbyJS ที่สามารถสร้าง Static Site ได้ และมี plugin ช่วยเหลือหลายอย่าง แต่วันนี้เราไม่ได้มาพูดถึงการใช้ GatsbyJS แต่จะเล่าถึงอีก framework นึงที่เป็นที่โด่งดังไม่แพ้กันในเรื่องของการนำมาเป็น Server Side Render ให้กับ ReactJS นั่นก็คือ Next.js ที่เป็น framework โปรดของเรานั่นเอง โดยวันนี้จะลองเอา Next.js มาทำ Static Site Generator ที่หลายคนอาจจะยังไม่รู้ว่าสามารถทำได้เหมือนกัน และไม่ยากอย่างที่คิดเลย มาเริ่มกันเลยดีกว่า

เผื่อหลายคนไม่ทราบ เดี๋ยวนี้เราสามารถ setup Next.js ได้ง่ายมาก ๆ ยิ่งกว่าเดิมอีก โดยการพิมพ์คำสั่ง npm init next-app หรือ yarn create next-app เราจะได้ project ที่ setup Next.js มาให้ทันที

ลองสั่ง npm run dev ก็จะได้หน้าเว็บไซต์เริ่มต้นขึ้นมา โดยอยู่ใน folder pages/index.js ให้เรียบร้อยแล้ว

ทีนี้จะมาพูดถึงวีธีการทำ Static Site Generator กันบ้าง วิธีทำง่ายมากๆๆ เติม scripts next export เข้าไป

และรัน npm run build && npm run export ระบบจะสร้าง folder ชื่อ out ขึ้นมาที่เก็บ static file ของงานเราไว้

ลองเปิดไฟล์ out/index.html ขึ้นมา จะได้ website ที่หน้าตาเหมือนกับที่เราทำไว้เด๊ะ ๆ แต่เร็วกว่ามาก ๆ เพราะ code React ทั้งหมดถูก compile เป็น HTML แล้ว ไม่จำเป็นต้องใช้ Server Side Render อีกต่อไป ไฟล์อื่น ๆ ที่อยู่ใน folder pages ก็จะถูก render เป็น HTML ทั้งหมด

ทีนี้ทุกคนคงเริ่มสงสัยว่า ถ้าเป็นเว็บ blog จริง ๆ URL จะออกมาเป็นประมาณนี้ www.exampleblog.com/blog/some-content-title www.exampleblog.com/blog/another-content-title
แล้วเราจะต้องสร้างไฟล์เป็น content ใน blog เราแต่ละหน้าเองไปเรื่อย ๆ หรอ?

Next.js สามารถให้เราสร้างไฟล์ที่เป็นเหมือน template ให้กับ content ของเรา แล้วดึงข้อมูลจาก API มา render เป็นหน้าเว็บแต่ละหน้าได้ โดยการเขียนโค๊ดแค่ครั้งเดียว วิธีทำคือเราจะสร้างไฟล์ pages/blog/[title].js ขึ้นมา ในไฟล์ [title].js จะเขียนโค๊ดตามนี้

export async function getStaticPaths() {
  // ตรงนี้สามารถ List Content ทั้งหมดผ่าน API ได้
  // และใส่เป็น params
  return {
    paths: [
      {
        params: {
          title: 'some-content-title',
        },
      },
      {
        params: {
          title: 'another-content-title'
        },
      }
    ],
    fallback: false,
  }
}
export async function getStaticProps(context) {
  // ตรงนี้สามารถดึงข้อมูล content ที่ต้องการผ่าน API ได้
  const content = {
    'some-content-title': { content: 'Hello World' },
    'another-content-title': { content: 'This is Content' }
  }
  return {
    props: {
      title: context.params.title,
      content: content[context.params.title].content
    },
  }
}
export default (props) => {
  return (
    <>
      <h1>{props.title}</h1>
      <p>{props.content}</p>
    </>
  )
}

ส่วนสำคัญจะมีทั้งหมด 3 ส่วนคือ getStaticPaths getStaticProps และ function export default

getStaticPaths จะเอาไว้ใช้กำหนดว่าไฟล์นี้จะ render เป็น HTML ออกมาเป็น URL อะไรบ้าง โดยจากตัวอย่าง เราจะ render ออกมาเป็น สองหน้า คือ some-content-title และ another-content-title จริง ๆ แล้วเราสามารถไปดึงข้อมูลมาจาก API อะไรก็ได้ที่เตรียมไว้ ว่าเรามี URL อะไรบ้าง

getStaticProps จะทำให้ Next.js เอา props ที่เราใส่เข้าไปในเว็บของเราด้วยตอนที่เรา build

export default ก็จะเป็น function สำหรับ Render React Component ที่เราต้องการ

ลองสั่ง npm run build && npm run export อีกครั้ง

จะเห็นว่าใน folder blog จะถูก build แยกออกมาเป็นแต่ละหน้าตามที่เราตั้งใจไว้ และลองดูใน folder out ก็จะมีไฟล์ HTML ทั้งหมดออกมาให้สามารถเปิดได้ทันที ลองเปิดไฟล์ blog/some-content-title.html ดู ก็จะได้หน้าเว็ปที่ถูกใส่ props เข้าไปเรียบร้อยแล้ว

เราสามารถเอา folder out ไป deploy ที่ไหนก็ได้โดยไม่จำเป็นต้องหา server ที่สามารถทำ Server Side Render ได้อีกต่อไป ทั้งเร็วกว่าและนำไปใช้ง่ายกว่า

จะเห็นว่าจริง ๆ แล้วการทำ Static Site Generator นั้น ไม่ได้ทำยากอย่างที่คิด ถ้าของเรา website ไม่ได้มีข้อมูลที่ dynamic เช่น ต้องมี Auth หรือ ดึงข้อมูลแบบ realtime ก็สามารถ build website ที่เขียนด้วย React ให้ออกมาเป็น HTML ธรรมดาได้ โดยไม่จำเป็นต้องทำ Server Side Render เสมอไป

framework สำหรับทำ Static Site Generator ยังมีอีกเยอะมาก ๆ สามารถลองดูได้ที่

StaticGen | Top Open Source Static Site Generators

สามารถอ่านเนื้อหาเพิ่มเติมเกี่ยวกับ Static Site ของ Next.js ได้ที่

Advanced Features: Static HTML Export | Next.js

ในครั้งต่อไปเราจะมาพูดถึง Next.js และ JAMstack กัน มาลงลึกกันไปอีกว่าการ Deploy Static Site และก็ใช้ CMS ในคุยปัจจุบันเค้าทำกันยังไง จะเจ๋งแค่ไหน
อย่าลืมกดติดตาม Code’s Dairy ทุกช่องทางเพื่อจะได้ไม่พลาด content ใหม่ ๆ ของเราด้วยน้า ☆

Code's Diary