Di situ akan memiliki kerangka pengembangan yang solid. Framework seperti Next.js dapat membantu Sampeyan membangun custom front-end yang lebih bagus dan berkinerja tinggi untuk konten WordPress, bahkan untuk Sampeyan yang nggak memiliki pengalaman pengembangan web sebelumnya.
Dalam artikel ini, saya akan memperkenalkan tentang Headless WordPress, dan kemudian menjelaskan apa itu framework Next.js berikut dan manfaatnya. Saya juga akan menunjukkan kepada Sampeyan cara menggunakan Next.js menjalankan WordPress sebagai CMS Headless dalam tiga langkah paling simpel!
Daftar isi:
WordPress Headless
Content Management System (CMS) memiliki front end dan back end. Namun, sangat dimungkinkan untuk menjalankan CMS sebagai 'Headless'.Dengan WordPress Headless, Sampeyan akan "membuang" head (front-end) dari body (back-end). Ini berarti juga Sampeyan dapat terus menggunakan panel admin WordPress dan semua content managementnya.
Namun, tidak seperti CMS tradisional lainnya, WordPress Headless tidak menyediakan cara untuk menampilkan konten Sampeyan. Nah sebagai gantinya, Headless CMS menawarkan konten Sampeyan sebagai data menggunakan RESTful API (Application Programming Interface).
Untuk dapat mengakses konten, maka Sampeyan dapat mengirim network request pada API endpoint. WordPress sendiri memiliki REST API built in (bawaan) - yang merupakan salah satu alasan yang cukup populer di kalangan pengguna Headless CMS.
Mengakses data Anda melalui API endpoint akan membuat Sampeyan bebas untuk merancang dan membangun front-end Sampeyan sendiri independen dari kendala WordPress yang biasa dan sering terjadi. Sampeyan bahkan dapat menggunakan wordPress back end dalam konteks baru, seperti Single Page Application (SPA) atau mobile app.
Mengonfigurasi front-end Sampeyan sendiri dapat menjadi proses yang memakan waktu dan lumayan rumit, terutama jika Sampeyan memiliki pengembangan web atau pengalaman desain yang terbatas. Oleh karena itu, banyak pemilik CMS Headless memilih untuk meminta bantuan kerangka kerja seperti Frontity, Gatsby, atau Next.js.
Introduction Nextjs
Next.js adalah framework React minimalis yang lebih memprioritaskan kinerja.Sebuah studi menunjukkan bahwa 40 persen pengguna internet gak mau menunggu berlama-lama agar sebuah situs kelar loading. Jika Sampeyan respek pada pengunjung yang gak sabaran maka frameworks yang berfokus pada kinerja seperti Next.js bisa menjadi alternatif terbaik.
Framework Next.js menggunakan pemisahan kode otomatis hanya untuk memuat JavaScript dan CSS yang diperlukan untuk halaman yang pada saat itu butuh di-loading-kan. Membuang kebutuhan browser traffic untuk men-downloading script yang tidak perlu di loading akan dapat secara signifikan meningkatkan waktu pemuatan sebuah halaman.
Next.js juga dapat meningkatkan waktu pemuatan sebuah halaman yang dirasakan dengan awalnya merender komponen yang menghadap penggunanya di sisi server. Setelah HTML dikirim ke browser, pengunjung dapat segera mengakses konten tersebut, dimana hal ini sangat bagus untuk User Experience (UX).
Konfigurasi WordPress sebagai Headless CMS Menggunakan Framework NextJs
Untuk membangun front-end headless WordPress CMS, Sampeyan tetep butuh instalasi WordPress. Sampeyan dapat meng-host-kan online langsung di server atau meng-hostnya secara lokal untuk development offline.Karena Next.js menggunakan GraphQL, saya sarankan menginstal plugin WPGraphQL. Tool gratis ini membantu Sampeyan meminta data WordPress dengan GraphQL lebih cepat daripada jika menggunakan WordPress REST API saja.
Setelah memiliki back-end, maka Sampeyan udah bisa mulai membangun front-end.
Step 1: Prepare
Untuk membantu memulai dan menjalankan Next.js lebih cepet dan simpel, kita akan menggunakan project starter Create Next App, yang juga dikenal sebagai 'create-next-app'. Langkah ini akan menghasilkan aplikasi bootstrapped Next.js dimana file project dan konfigurasi yang diperlukan yang sudah ada terintegrasi didalamnya. Jadi kagak repot lagi 🥰Sampeyan bisa juga menginstal create-next-app menggunakan npx, yang dibundel dengan Node Package Manager (npm). Cara termudah untuk mengunduh komponen-komponen ini adalah dengan menggunakan Homebrew package manager.
Untuk menginstal Homebrew, buka aplikasi Terminal atau Command Prompt, selanjutnya, jalankan perintah berikut:
/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"
Maka Sampeyan sekarang dapat menginstal Homebrew dengan mengikuti instruksi pada Terminal. Setelah Homebrew aktif dan berjalan, Sampeyan dapat menginstal Node.js dan Node Package Manager (npm) menggunakan command:
brew install node
Bergantung pada bagaimana server/komputer Sampeyan dikonfigurasi, mungkin perlu mengedit chmode file. Maka, cek ulang bagian ini.
Step 2: Create Next.js Project
Sekarang, kita dapat mengatur Next.js menggunakan create-next-app. Untuk memulai, buka Terminal atau Command Prompt dan jalankan perintah berikut:
npx create-next-app headless-wp-demo
Ini akan membuat wp-demo project pada direktori users lokal. Setelah proses ini selesai, Terminal akan meminta untuk memasukkan perintah berikut untuk membangun, menjalankan, dan memulai aplikasi Next.js:
cd headless-wp-demo
npm run dev
Selanjutnya, Sampeyan dapat memverifikasi bahwa proses setup udah berhasil dengan memasukkan perintah berikut:
cd headless-wp-demo
yarn dev
Jika Anda melihat pesan "compiled successfully", Next.js sekarang udah beroperasi di mesin lokal Sampeyan! Untuk bisa melihat project maka Sampeyan dapat membuka tab baru di browser dan masuk ke http://localhost:3000.
Anda akan melihat tampilan dasar Next.js Berikutnya:
Step 3: Connect Next.js to WordPress CMS
Kecuali Sampeyan menentukan sebaliknya, npx membuat headless-wp-demo project pada direktori users. Lanjutkan dan navigasi ke folder ini. Sampeyan dapat menemukan file /pages/index.js project, yang merupakan titik masuk utama ke aplikasi Next.js:
Dalam file ini, cari <main> dan hapus semua yang ada di dalamnya kemudian edit dengan yang berikut:
<h1 className={styles.title}>Welcome to the Next.js demo app!</h1>
<p>
Check out our{' '}
<Link href='YOUR-BLOG-URL/'>
<a>latest posts</a>
</Link>
</p>
Pastikan Sampeyan udah mengganti <link href> dengan URL ke back end WordPress Anda. Di bagian atas file ini, tambahkan dengan:
import Link from 'next/link';
Di browser Sampeyan, refresh http://localhost:3000/. Sekarang seharusnya udah menampilkan halaman basic yang dibuat sebelumnya.
Sampeyan mungkin juga mempertimbangkan untuk menggunakan plugin Advanced Custom Fields (ACF). Meskipun bukan persyaratan, tapi plugins ini akan membantu Sampeyan untuk menambahkan bidang tambahan ke halaman dan posting Sampeyan dan memperluas kemampuan fitur tersebut.
References:
Will Morris of WordCandy
Kathleen Juell of Digital Ocean.
