getInitialProps เป็น method ที่สามารถเพิ่มลงใน component page ใน Next.js เพื่อดึงข้อมูลก่อนที่เพจจะแสดงผลบน client

getInitialProps จะรันในฝั่ง server-side ก่อนที่จะถูก render ในฝั่ง client ส่วนมากเราจะใช้มันในการ fetch data จาก api, database หรือ resource ต่าง ๆ

ตัวอย่างโค้ด

import axios from 'axios'

function Page({ data }) {
  return <div>{data.message}</div>
}

Page.getInitialProps = async () => {
  const res = await axios.get('https://example.com/api')
  const data = res.data
  return { data }
}

export default Page

getInitialProps จะรันในฝั่ง server เมื่อ page load ครั้งแรก