Next.js adalah framework JavaScript yang dikembangkan oleh tim dari Vercel yang memungkinkan pengembangan aplikasi web server-side rendered (SSR) atau Single Page Applications (SPAs) dengan mudah. Salah satu fitur yang ditawarkan oleh Next.js adalah static generation.
Static generation adalah proses pembuatan halaman web yang dilakukan pada saat build time, bukan pada saat runtime. Hal ini berbeda dengan server-side rendering, di mana halaman web dibuat pada saat request datang ke server. Dengan static generation, halaman web sudah dibuat sebelum ada request yang datang, sehingga proses pembuatan halaman menjadi lebih cepat dan efisien.
Ada beberapa keuntungan dari menggunakan static generation di Next.js:
- Performa yang lebih baik: Halaman yang sudah dibuat sebelum ada request membuat proses pembuatan halaman menjadi lebih cepat, sehingga performa aplikasi menjadi lebih baik.
- SEO yang lebih baik: Mesin pencari seperti Google lebih mudah untuk mengindex halaman yang sudah dibuat secara statis daripada halaman yang dibuat secara dinamis pada saat runtime.
- Dukungan untuk deployment di CDN: Halaman yang sudah dibuat secara statis dapat dengan mudah di-deploy ke Content Delivery Network (CDN), sehingga akses ke halaman menjadi lebih cepat dan tersebar di seluruh dunia.
Untuk menggunakan static generation di Next.js, pertama-tama Anda perlu meng-install package next-export dan menambahkan script export pada package.json:
npm install --save next-export
"scripts": {
"export": "next export"
}
Kemudian, Anda dapat menjalankan perintah npm run export untuk mem-build aplikasi dan men-generate halaman statis. Setelah proses selesai, Anda akan mendapatkan folder out yang berisi halaman statis yang siap untuk di-deploy.
Data Fetching getStaticProps
Selain itu, Anda juga dapat menggunakan fitur getStaticProps pada Next.js untuk men-generate halaman statis secara dinamis. Fungsi ini akan dijalankan pada saat build time dan akan mengembalikan data yang akan ditampilkan pada halaman.
Contoh penggunaan getStaticProps:
export async function getStaticProps() {
const res = await fetch('https://api.example.com/data')
const data = await res.json()
Setelah data diperoleh, Anda dapat mengembalikan data tersebut dalam bentuk object yang akan tersedia pada komponen sebagai props.
export async function getStaticProps() {
const res = await fetch('https://api.example.com/data')
const data = await res.json()
return {
props: {
data: data
}
}
}
Dengan menggunakan getStaticProps, Anda dapat men-generate halaman statis secara dinamis dengan mengambil data dari API atau sumber data lainnya pada saat build time. Hal ini bisa sangat bermanfaat jika Anda ingin menampilkan data yang selalu up-to-date di halaman web Anda.
Static generation di Next.js bisa sangat bermanfaat untuk meningkatkan performa dan SEO aplikasi web Anda. Dengan menggunakan fitur-fitur seperti next-export dan getStaticProps, Anda dapat dengan mudah menerapkan static generation pada aplikasi web yang dikembangkan dengan Next.js.
