Halo teman-teman semuanya, pada artikel sebelumnya kita telah belajar bagaimana cara melakukan installasi CSS Bootstrap di Next.js dan kita juga belajar membuat layout sebagai induk dari template. Sekarang kita akan belajar menampilkan data melalui Rest API yang dibuat di Laravel.
Langkah 1 - Install Axios
Pertama, kita akan melakukan installasi library yang bernama Axios. Library ini akan kita gunakan untuk melakukan HTTP request ke server / backend dengan lebih mudah.
Silahkan jalankan perintah berikut ini di dalam terminal/CMD dan pastikan sudah berada di dalam project Next.js-nya.
npm install axios@0.26.0
Silahkan tunggu proses installasinya sampai selesai.
Langkah 2 - Konfigurasi Env untuk Endpoint
Sekarang kita akan membuat file env yang nantinya kita gunakan untuk menyimpan base url / endpoint dari Rest API. Sehingga kita cukup melakukan konfigurasi pada 1 file aja. Dan ketika ada perubahan endpoint, kita tidak perlu repot-repot mengubah semua-nya satu-satu.
Silahkan buat file baru di dalam project Next.js dengan nama .env.local, kemudian di dalamnya isikan kode berikut ini.
NEXT_PUBLIC_API_BACKEND = 'http://localhost:8000'
Di atas, domain http://localhost:8000 merupakan alamat endpoint API dari Laravel.
INFORMASI : setelah menambahkan file env silahkan restart project Next.js
Langkah 3 - Menampilkan Data di Next.js
Sekarang kita akan lanjutkan belajar bagaiamana cara menampilkan data di dalam Next.js yang mana datanya diambil langsung melalui Rest API.
Silahkan buat folder baru dengan nama posts di dalam folder pages. Dan di dalam folder posts silahkan buat file baru dengan nama index.js, kemudian masukkan kode berikut ini di dalamnya.
//layout
import Layout from "../../components/layout";
//import Link
import Link from 'next/link';
//import axios
import axios from "axios";
//fetch with "getServerSideProps"
export async function getServerSideProps() {
//http request
const req = await axios.get(`${process.env.NEXT_PUBLIC_API_BACKEND}/api/posts`)
const res = await req.data.data.data
return {
props: {
posts: res // <-- assign response
},
}
}
function PostIndex(props) {
//destruct
const { posts } = props;
return(
<Layout>
<div className="container" style={{ marginTop: '80px' }}>
<div className="row">
<div className="col-md-12">
<div className="card border-0 shadow-sm rounded-3">
<div className="card-body">
<Link href="/posts/create">
<button className="btn btn-primary border-0 shadow-sm mb-3">TAMBAH</button>
</Link>
<table className="table table-bordered mb-0">
<thead>
<tr>
<th scope="col">IMAGE</th>
<th scope="col">JUDUL</th>
<th scope="col">CONTENT</th>
<th scope="col">AKSI</th>
</tr>
</thead>
<tbody>
{ posts.map((post) => (
<tr key={ post.id }>
<td className="text-center">
<img src={`${process.env.NEXT_PUBLIC_API_BACKEND}/storage/posts/${post.image}`} width="150" className="rounded-3"/>
</td>
<td>{ post.title }</td>
<td>{ post.content }</td>
<td className="text-center">
<button className="btn btn-sm btn-primary border-0 shadow-sm mb-3 me-3">EDIT</button>
<button className="btn btn-sm btn-danger border-0 shadow-sm mb-3">DELETE</button>
</td>
</tr>
)) }
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</Layout>
)
}
export default PostIndex
Dari penambahan kode di atas, pertama kita import layout yang sudah pernah kita buat sebelumnya.
//layout
import Layout from "../../components/layout";
Kemudian kita import Link dari Next.js, ini akan kita gunakan untuk melakukan navigasi ke halaman lain secara SPA atau single page application.
//import Link
import Link from 'next/link';
Dan karena akan melakukan HTTP request, maka kita juga import Axios.
//import axios
import axios from "axios";
Kemudian kita buat sebuah function asynchronus dengan nama getServerSideProps. Function tersebut merupakan bawaan dari Next.js yang mana akan dirender disisi server dan disini kita akan manfaatkan untuk melakukan HTTP request ke dalam Rest API.
//fetch with "getServerSideProps"
export async function getServerSideProps() {
//...
}
Di dalamnya kita melakukan HTTP request ke API menggunakan Axios dengan method GET.
const req = await axios.get(`${process.env.NEXT_PUBLIC_API_BACKEND}/api/posts`)
Dan dari hasil request di atas, kita akan assign response data-nya ke dalam variable res.
const res = await req.data.data.data
Dan agar data yang di dapatkan dari getServerSideProps bisa diakses diluar function, maka kita perlu melakukan return dengan jenis props.
return {
props: {
posts: res // <-- assign response
},
}
Selanjutanya, kita membuat function component yang bernama PostIndex yang di dalamnya kita berikan parameter props. Tujuannya agar kita bisa menggunakan data props di dalam function tersebut.
function PostIndex(props) {
//...
}
Di dalam function PostIndex, pertama kita akan destructuring variable posts yang ada di dalam props.
const { posts } = props;
Setelah berhasil melakukan destructuring, sekarang kita tingngal menampilkan datanya yang diambil dari varibale posts tersebut dan kita akan menggunakan map function.
{ posts.map((post) => (
//...
))}
Langkah 4 - Uji Coba Menampilkan Data
INFORMASI : pastikan project Laravel sudah dijalankan terlebih dahulu.
Sekarang silahkan akses URL http://localhost:3000/posts dan jika berhasil, maka kita akan mendapatkan hasil seperti berikut ini.
Jika teman-teman belum menampilkan data apapun, bisa jadi di dalam database memang belum ada data-nya.
Sampai disini pembahasan bagaimana cara menampilkan data di dalam Next.js secara Server Side Rendering menggunakan getServerSideProps. Di artikel selanjutnya kita akan belajar melakukan insert data ke dalam database beserta melakukan upload gambar ke dalam server.
Terima Kasih