Belajar Next.js dari Nol – Part 4: Integrasi API Eksternal & Pengelolaan Data Dinamis

Setelah mempelajari form, validasi, dan state management pada Part 3, kini saatnya memahami salah satu kekuatan Next.js: mengambil dan mengelola data dari API eksternal secara efisien.

Pada bagian ini, kamu akan belajar:

• Apa itu API eksternal dan use case-nya
• Mengambil data secara server-side dan client-side
• Menampilkan data dinamis dalam komponen
• Menangani loading, error, dan revalidasi data

---

🔎 Apa Itu API Eksternal?

API eksternal adalah antarmuka yang memungkinkan aplikasi kamu mengambil data dari sumber lain, misalnya:

• REST API: JSONPlaceholder, OpenWeather, NewsAPI
• GraphQL API: GitHub API, Shopify API
• API internal milik perusahaan (ERP, POS, CRM, dll)

Contoh kasus penggunaan:

• Menampilkan berita terkini dari NewsAPI
• Mengambil daftar produk dari e-commerce
• Mengakses data cuaca real-time dari OpenWeatherMap

---

⚙️ 1. Server-Side Data Fetching (recommended)

Server-side fetching dilakukan dengan async function di file page, menggunakan fetch() sebelum halaman dirender di browser.

Contoh: Menampilkan Post dari JSONPlaceholder

app/posts/page.jsx

async function getPosts() {
  const res = await fetch('https://jsonplaceholder.typicode.com/posts', {
    cache: 'no-store',
  });
  return res.json();
}

export default async function PostsPage() {
  const posts = await getPosts();

  return (
    <div className="space-y-4">
      <h1 className="text-3xl font-bold">Daftar Postingan</h1>
      {posts.slice(0, 5).map(post => (
        <div key={post.id} className="p-4 border rounded">
          <h2 className="font-semibold">{post.title}</h2>
          <p>{post.body}</p>
        </div>
      ))}
    </div>
  );
}

Kelebihan:

• SEO-friendly (karena data sudah dirender di server)
• Bisa cache, ISR, atau revalidate secara fleksibel

---

🔄 2. Client-Side Fetching (menggunakan useEffect)

Jika datanya bergantung pada interaksi user (filter, pencarian), gunakan pendekatan client-side.

app/products/page.jsx

'use client';

import { useEffect, useState } from 'react';

export default function ProductPage() {
  const [products, setProducts] = useState([]);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    fetch('https://fakestoreapi.com/products')
      .then(res => res.json())
      .then(data => {
        setProducts(data);
        setLoading(false);
      });
  }, []);

  if (loading) return <p>Memuat produk...</p>;

  return (
    <div className="grid grid-cols-2 gap-4">
      {products.map(p => (
        <div key={p.id} className="border p-4 rounded">
          <img src={p.image} className="h-32 object-contain mx-auto" />
          <h3 className="text-lg font-bold">{p.title}</h3>
          <p className="text-sm text-gray-600">${p.price}</p>
        </div>
      ))}
    </div>
  );
}

---

📡 3. Menggunakan Revalidate & ISR (Incremental Static Regeneration)

Next.js memungkinkan revalidasi data setelah deploy tanpa rebuild penuh.

Contoh:

export const revalidate = 60; // revalidate setiap 60 detik

Atau fetch data dengan opsi revalidate:

await fetch(url, { next: { revalidate: 60 } });

Manfaatnya:

• Performa optimal (karena pre-rendered)
• Data tetap segar tanpa rebuild manual

---

🚫 4. Menangani Error dan Loading State

Selalu tangani:

• Error jaringan
• Status kosong
• Loading state

Contoh handling server error:

if (!res.ok) {
  throw new Error('Gagal memuat data');
}

Contoh di client:

if (error) return <p>Gagal memuat data</p>;
if (loading) return <p>Memuat...</p>;

---

🧠 Best Practice

Strategi	Kapan digunakan
Server-side fetch	Untuk SEO, konten publik
Client-side fetch	Untuk data interaktif, after load
ISR + Revalidate	Untuk data berubah secara periodik
useSWR (next step)	Untuk fetch dengan cache dan revalidate otomatis

---

📣 Studi Kasus Bisnis

Contoh penggunaan nyata:

• Menampilkan data stok barang dari sistem inventori
• Menyambungkan form ke API WhatsApp Gateway
• Menarik laporan transaksi harian dari server pusat

Dengan pendekatan modular dan async, Next.js sangat cocok untuk aplikasi bisnis dinamis di era modern.

---

🔧 Elektra Network Vision – Solusi Integrasi API

Kami membantu tim bisnis dan developer untuk:

• Integrasi API eksternal ke aplikasi Next.js
• Koneksi ke API internal perusahaan (ERP, e-commerce, SIMRS)
• Membuat backend gateway yang scalable dan aman

🌐 Kunjungi elektranetworkvision.com untuk konsultasi teknis gratis.