Basic: Membangun Website dengan Wordpress + NextJS

Kita semua mungkin sudah mengenal CMS (sistem manajemen konten) yang paling banyak digunakan didunia, kurang lebih sekitar 30% lebih website dibuat dengan CMS yang satu ini. Dan persentasenya akan terus meningkat seiring dengan beriring-iringannya orang ke TPS (Apa coba?, maklum di negara gue bentar lagi mau Pemilu biar gue kebagian SEOnya. ahaha *licik). Sudah tau kan CMS apa yang dimaksud? jawabannya kan udah ada dijudulnya ble’e.. Ya, Wordpress merupakan salah satu (bukan berarti bener sembilan yah) CMS yang paling banyak digunakan dan mungkin kita sudah mengenalnya dari SMP, SMA/SMK, Kuliah sampe Kuli-ah (kerja). Dan didunia kerja pun, terutama di Digital Agency masih sering menggunakan CMS ini. Wordpress disini gue hanya akan menggunakannya sebagai CMSnya aja dengan kata lain gue menggunakan Headless Wordpress yang nantinya untuk frontendnya gue akan menggunakan NextJs. Nah NextJS sendiri itu merupakan framework dari library ReactJS. Untuk para pejuang ReactJS yang ingin membuat website, tapi merasa masih ada yang kurang? gimana caranya website React kamu ramah SEO (mesin pencari)? ya, NextJS salah satu jawabannya. Tanpa banyak cingcong lagi, langsung aja cekibrot.

Disini gue harap kalian sudah tau dan ngerti gimana caranya install Wordpress, kalau belum tau banyak kok tutorialnya.

Setelah melakukan instalasi Wordpress, selanjutnya kita perlu mendaftarkan beberapa fungsi ke pengaturan WordPress kita. Salah satunya mengarahkan setiap permintaan ke REST API endpoint. WordPress memiliki API khusus untuk mengatur rute REST API. Untuk mempelajari lebih lanjut tentang REST API ini, lihat panduan berikut.

Sekarang, coba buka salah satu REST API endpoint. sebagai contoh, REST API endpoint untuk posts. http://localhost/wp-json/wp/v2/posts:

Selanjutnya adalah kita akan parse API kita ke frontend dengan menggunakan NextJS. Untuk tahap awal disisi frontend adalah dengan melakukan instalasi NextJS terlebih dahulu tentunya.

npm install --save next react react-dom

dan tambahkan skrip ke package.json Anda seperti ini:

{
  "scripts": {
    "dev": "next",
    "build": "next build",
    "start": "next start"
  }
}

untuk melakukan data fetch kita tambahkan dependencies berikut:

npm install --save-dev isomorphic-unfetch

buat file index.js dalam folder pages, sehingga struktur folder terlihat seperti berikut:

Struktur Folder

copykan kode berikut kedalam file index.js

kemudian jalankan aplikasi:

npm run dev
# or
yarn dev

buka browser dengan mengetikan url berikut: localhost:3000, maka akan tampil halaman berikut:

contoh tampilan website

Selanjutnya kalian bisa berkreasi untuk tampilan website masing-masing dengan menggunakan style sendiri. untuk css sendiri, kalian bisa menggunakan css dasar, sass, scss, styled-component atau css yang kalian sukai.

Dan sebenarnya (Just Opinion), Teknologi JavaScript reaktif tidak pernah dimaksudkan digunakan untuk membangun website dan hanya diharapkan untuk digunakan sebagai aplikasi.