Pernah nggak sih, kamu lagi ngoding di bagian frontend, terus tiba-tiba dapet “kiriman” dari backend yang bentuknya aneh banget? Tampilannya kayak gini:
{
"name": "Adit",
"umur": 23
}
Atau malah yang kayak gini:
[
{ "judul": "Naruto", "genre": "Action" },
{ "judul": "Your Name", "genre": "Romance" }
]
Waktu pertama kali lihat, jujur aja, aku sempat mikir: “Ini maksudnya apa? Kok ada kurung kurawal di mana-mana? Ini string? Ini array? Ini objek? Kenapa semua jadi satu?!”
Dan lucunya, waktu tanya ke temen yanng udah biasa backend-an, jawabannya malah: “Oh itu mah JSON, standar aja itu. Tinggal parse.”
Parse apaan… 😵💫
Sejak saat itu aku sadar, dunia backend itu kayak hutan belantara buat kita para anak frontend pemula. Tapi ya, mau nggak mau harus ngerti juga, karena data yang kita tampilkan ke user itu ya datangnya dari situ. Dan hampir semua datanya… pakai JSON.
Makanya, hari ini kita ngobrol santai yuk soal si JSON ini — mulai dari kenalan dasar, kenapa dia penting banget, sampai gimana cara makainya di proyek frontend kamu. Nggak pakai ribet. Biar kita sama-sama nggak bingung lagi pas ketemu si kurung kurawal ini di dunia nyata. 😄
Sejarah Singkat JSON
Jadi, sebelum kita terlalu jauh membahas JSON di dunia modern, yuk kita rewind sedikit ke masa lalu. Tahun 2000-an awal — saat koneksi internet masih lambat, dan kita masih main game di warnet pake Yahoo Messenger buat chat 😄 — web juga lagi berkembang pesat. Waktu itu, para developer mulai mencari cara yang lebih efisien buat mengirim data antara browser (frontend) dan server (backend).
Nah, muncullah satu format ringan yang gampang dibaca manusia dan juga bisa dipahami mesinn: JSON.
JSON itu singkatan dari JavaScript Object Notation. Sesuai namanya, dia terinspirasi dari cara JavaScript menulis objek. Tapi jangan salah, meskipun namanya ada “JavaScript”-nya, JSON bisa dipakai di hampir semua bahasa pemrograman — Python, PHP, Go, Kotlin, kamu sebut aja deh. Universal banget!
Orang yang berjasa ngenalin dan “merapikan” format ini adalah Douglas Crockford — salah satu tokoh penting di dunia JavaScript. Dia sadar, daripada semua orang kirim data pakai format aneh-aneh, mendingan kita sepakat pakai satu format yang simpel dan konsisten. Dan voila, jadilah JSON!
Sejak saat itu, JSON pelan-pelan mulai dipakai di mana-mana. Bahkan sekarang, dia udah jadi semacam bahasa universal untuk ngobrol antar aplikasi, apalagi lewat API.
Jadi bisa dibilang, kalau dunia web itu punya bahasa untuk saling ngerti antar sistem, JSON adalah bahasa pergaulannya. Simpel, fleksibel, dan mudah dimengerti — makanya kita para frontend developer harus banget kenal baik sama dia.
Kenapa Frontend Developer Harus Peduli?
Bayangin kamu kerja di restoran. Tugas kamu adalah nganterin makanan ke pelanggan. Tapi sebelum itu, kamu harus tahu dulu dong — siapa yang mesen, pesennya apa, dan jumlahnya berapa. Nah, data-data itu biasanya ada di… menu pesanan.
Dalam dunia web development, JSON itu ibarat menu pesanan tadi. Dia yang ngasih tahu frontend:
“Eh, user ini pengen lihat daftar produk.”
“Eh, ada komentar baru yang harus ditampilkan.”
“Eh, hasil pencarian film udah siap nih!”
Sebagai frontend developer, kamu nggak akan bisa lepas dari JSON.
Data dari backend? JSON.
Data dari public API? JSON.
Data yang disimpen di local storage? Yup, biasanya juga dalam bentuk JSON.
Misalnya kamu bikin halaman katalog produk. Dari backend kamu bakal dapet data JSON kayak gini:
[
{
"nama": "Sepatu Lari",
"harga": 350000,
"stok": 12
},
{
"nama": "Kaos Oversize",
"harga": 120000,
"stok": 0
}
]
Nah, tugas kamu di frontend adalah:
- Nangkep data ini (biasanya lewat fetch API atau axios)
- Mapping datanya jadi komponen-komponen UI (seperti Card Produk)
- Nampilin ke user dengan gaya yang menarik dan responsif
Kalau kamu nggak ngerti struktur JSON, ya bakal pusing sendiri pas mau akses nama atau harga. Kadang malah bingung, “ini array atau object sih?” 😅
Belum lagi kalau kamu mainan state management (kayak Redux, Zustand, atau Context), data JSON akan jadi bagian penting dalam proses update UI berdasarkan response dari server.
Intinya, JSON itu jembatan utama antara logic dan tampilan. Kalau kamu pengen jadi frontend developer yang nggak cuma jago styling, tapi juga paham data flow — kamu harus akrab sama si JSON ini.
Oke, JSON Itu Apa Sih? & Apa Itu API?
Waktu pertama kali dengar kata JSON dan API, jujur aja, otakku sempat nge-lag.
“JSON? API? Ini ngoding atau kirim paket ekspedisi?” 😅
Tapi ternyata, setelah dipahami, konsepnya nggak seseram itu. Bahkan bisa dijelaskan pakai analogi sehari-hari.
🌉 API Itu Apa? Bayangin Sebuah Jembatan
Kita mulai dari API dulu ya.
API itu singkatan dari Application Programming Interface.
Kedengeran teknis banget ya? Tapi sebenarnya, dia bisa kita ibaratkan sebagai jembatan penghubung antara dua aplikasi.
Contoh gampang:
- Kamu bikin aplikasi frontend yang tampil di browser.
- Temanmu bikin backend yang menyimpan data produk di database.
Nah, gimana caranya si frontend bisa minta data produk ke backend?
Jawabannya: lewat API.
Jadi API itu kayak jalur komunikasi antara dua sisi.
Frontend ngomong:
“Halo backend, tolong kirimin saya daftar produk ya.”
Backend menjawab lewat API juga:
“Oke, ini datanya. Aku kirim dalam format JSON ya.”
📦 JSON Itu Apa? Isi Paketnya!
Nah sekarang masuk ke JSON.
Kalau API tadi adalah jembatannya, maka JSON itu isi dari paket yang dikirim lewat jembatan tersebut.
JSON adalah singkatan dari JavaScript Object Notation.
Dia adalah format data yang ringan dan mudah dibaca manusia.
Isinya biasanya berupa pasangan key-value, contohnya kayak gini:
{
"nama": "Budi",
"umur": 25,
"hobi": ["ngoding", "nonton", "ngopi"]
}
Artinya:
namaadalah "Budi"umuradalah 25hobiadalah array (daftar) dari 3 hal
Kalau kamu pakai JavaScript, kamu bisa akses data ini kayak gini:
data.nama // "Budi"
data.hobi[1] // "nonton"
Simpel, kan?
🧠 Jadi Siapa Ngapain?
Yuk rangkum analoginya biar makin masuk:
| Peran | Analogi | Kenyataannya |
|---|---|---|
| Frontend | Orang yang minta paket | Kode di browser yang butuh data |
| API | Jembatan atau kurir | Jalur untuk komunikasi antar sistem |
| Backend | Gudang penyimpanan paket | Server tempat data disimpan |
| JSON | Isi dari paket atau dokumen info | Format data yang dikirim ke frontend |
Jadi, setiap kali kamu buka aplikasi web yang ngambil data dari luar (misalnya, daftar film dari TMDB, user profile dari Instagram, atau data produk dari e-commerce), pasti ada proses seperti ini:
- Frontend kirim request lewat API
- Backend kirim balik data dalam bentuk JSON
- Frontend baca isi JSON dan tampilkan ke user
💬 Contoh Nyata: Fetch Data dari API Publik
Kamu bisa coba mainan sendiri:
fetch("<https://jsonplaceholder.typicode.com/users>")
.then((res) => res.json())
.then((data) => console.log(data));
Hasilnya? Kamu bakal dapet array berisi data user dalam bentuk JSON.
Tugasmu di frontend adalah: baca JSON-nya, terus tampilkan dengan rapi.
🧩 Jadi Kenapa Harus Paham Ini?
Karena:
- Hampir semua API di dunia modern pakai JSON.
- Kalau kamu nggak paham JSON, kamu bakal kesulitan ambil dan tampilkan data.
- Paham JSON = bisa bangun UI yang dinamis, bukan cuma hardcode.
Kesimpulan:
API itu jalan tol data, dan JSON itu isi truk yang melintas. Kalau kamu supirnya (alias frontend dev), kamu harus ngerti isi truk itu biar bisa bongkar muatan dengan benar!
JSON Object vs JSON Array, Bedanya Apa?
“Waktu aku pertama belajar, ini bagian paling bikin kening berkerut.”
Jujur aja, waktu awal-awal belajar JSON, aku suka bingung:
“Lho, ini kurung kurawal {} maksudnya apa? Terus kenapa kadang pakai kurung siku []? Bedanya apa sih?”
Tenang, kamu nggak sendiri. Ini hal yang wajar banget bikin mikir keras di awal. Tapi begitu ngerti analoginya, semuanya langsung lebih masuk akal.
🪪 JSON Object = Satu Orang, Satu Kartu Identitas
{
"nama": "Rina",
"umur": 21,
"hobi": "membaca"
}
Ini disebut JSON Object.
Tanda khasnya: dia dibungkus pakai kurung kurawal {}.
Isinya adalah data satu entitas — dalam hal ini, satu orang bernama Rina.
Setiap properti punya nama (key) dan nilai (value):
nama→ "Rina"umur→ 21hobi→ "membaca"
Analogi:
JSON Object itu kayak kartu identitas satu orang. Semua info tentang orang itu dikumpulin dalam satu paket.
📋 JSON Array = Daftar Banyak Orang
[
{
"nama": "Rina",
"umur": 21
},
{
"nama": "Budi",
"umur": 25
}
]
Nah, ini adalah JSON Array.
Tanda khasnya: dibungkus pakai kurung siku [].
Isinya? Kumpulan beberapa object. Jadi dalam contoh ini, kita punya dua orang: Rina dan Budi. Masing-masing tetap dalam format JSON Object, tapi sekarang jadi satu dalam sebuah list.
Analogi:
JSON Array itu kayak daftar tamu undangan. Setiap tamu punya kartu identitas sendiri, tapi semua dikumpulkan jadi satu daftar.
🎯 Kapan Pakai JSON Object vs JSON Array?
| Situasi | Format yang Cocok |
|---|---|
| Data tentang satu item | JSON Object ({}) |
| Data tentang banyak item dalam satu list | JSON Array ([]) |
Contoh nyata:
- Kamu minta detail 1 user → backend kirim
JSON Object - Kamu minta list semua user → backend kirim
JSON ArrayofObject
🔍 Contoh di Next.js
Kalau datanya object:
const user = {
nama: "Rina",
umur: 21
};
console.log(user.nama); // "Rina"
Kalau datanya array of object:
const users = [
{ nama: "Rina", umur: 21 },
{ nama: "Budi", umur: 25 }
];
console.log(users[0].nama); // "Rina"
console.log(users[1].umur); // 25
🧠 Tips Biar Gak Bingung Lagi
- Lihat tanda pembuka:
{→ Object,[→ Array - Object = satu item, langsung akses propertinya
- Array = kumpulan item, harus
map()atau pakai index ([0],[1], dst.)
“Begitu ngerti bedanya, rasanya kayak bisa bedain antara satu orang dan daftar tamu. Simpel tapi penting banget di dunia frontend.”
Studi Kasus Sederhana: Nampilin Daftar Film
✅ Tujuan
Kita akan membangun halaman yang:
- Menampilkan daftar film Studio Ghibli
- Menampilkan judul dan tahun rilis
- Data diambil dari API (simulasi dummy & real API)
- Struktur kode dipisah antara UI dan data-fetching
Step 1: Setup Proyek Next.js 15
Jalankan perintah berikut:
npx create-next-app@latest bwa-json
# atau dengan Bun
bun create-next-app@latest bwa-json
Pilih opsi:
- TypeScript: Yes ✅
- App Router: Yes ✅
- TailwindCSS: Yes ✅
- ESLint: Yes (opsional)
src/directory: No (biar simple)
Masuk ke folder proyek:
cd bwa-json
Jalankan server:
npm run dev
Step 2: Struktur Folder
Agar rapi dan mudah dipelihara, kita pisahkan antara:
app/page.tsx→ UI utama halaman homelib/dummy.ts→ Contoh data dummylib/ghibli.ts→ Business logic: ambil data APIcomponents/FilmList.tsx→ Komponen UI untuk daftar filmtypes/film.ts→ Tipe data untuk film
Step 3: Buat Tipe Data (types/film.ts)
// types/film.ts
export type Film = {
id: string;
title: string;
description: string;
release_date: string;
image: string;
};
File ini mendefinisikan tipe data bernama Film menggunakan TypeScript. Tujuannya adalah untuk membantu editor dan developer:
- Menjamin struktur data film yang konsisten di seluruh aplikasi.
- Menyediakan auto-complete dan validasi saat coding.
- Mengurangi typo dan kesalahan saat memanggil properti film.
Step 4: Business Logic (lib/dummy.ts dan lib/ghibli.ts)
Versi 1: Dummy data
// lib/dummy.ts
import { Film } from "@/types/film";
export async function getDummyFilms(): Promise<Film[]> {
return [
{
id: "1",
title: "Spirited Away",
description:
"Spirited Away is an Oscar winning Japanese animated film about a ten year old girl who wanders away from her parents along a path that leads to a world ruled by strange and unusual monster-like animals. Her parents have been changed into pigs along with others inside a bathhouse full of these creatures. Will she ever see the world how it once was?",
release_date: "2001",
image:
"<https://image.tmdb.org/t/p/w600_and_h900_bestv2/39wmItIWsg5sZMyRUHLkWBcuVCM.jpg>",
},
{
id: "2",
title: "Your Name",
description:
"High schoolers Mitsuha and Taki are complete strangers living separate lives. But one night, they suddenly switch places. Mitsuha wakes up in Taki’s body, and he in hers. This bizarre occurrence continues to happen randomly, and the two must adjust their lives around each other.",
release_date: "2016",
image:
"<https://www.themoviedb.org/t/p/w600_and_h900_bestv2/q719jXXEzOoYaps6babgKnONONX.jpg>",
},
];
}
File ini berisi data dummy (data tiruan sementara) dan digunakan untuk simulasi data sebelum kamu menghubungkan aplikasi ke API beneran.
Versi 2: Ambil dari real public API
// lib/ghibli.ts
import { Film } from "@/types/film";
export async function getRealFilms(): Promise<Film[]> {
const res = await fetch("<https://ghibliapi.vercel.app/films>", {
// Cegah caching saat dev
cache: "no-store",
});
if (!res.ok) throw new Error("Gagal mengambil data film");
const data = await res.json();
// Ambil hanya properti yang kita butuhkan
return data.map((film: Film) => ({
id: film.id,
title: film.title,
description: film.description,
release_date: film.release_date,
image: film.image,
}));
}
File ini bertugas untuk mengambil data asli dari public API Studio Ghibli:
🌐 https://ghibliapi.vercel.app/films
Fungsi di dalam file ini disebut getRealFilms().
Penjelasan:
- Ini adalah fungsi async, artinya dia bekerja secara asynchronous (karena ambil data dari internet butuh waktu).
- Dia mengembalikan
Promise<Film[]>, alias daftar film yang strukturnya mengikuti tipeFilm.
Step 5: Komponen UI (components/FilmList.tsx)
// components/FilmList.tsx
import Image from "next/image";
import { Film } from "@/types/film";
type FilmListProps = {
films: Film[];
};
export function FilmList({ films }: FilmListProps) {
return (
<ul className="space-y-4">
{films.map((film) => (
<li
key={film.id}
className="flex flex-col sm:flex-row items-start gap-4 p-4 border rounded-lg shadow-sm bg-white dark:bg-zinc-900"
>
<div className="relative w-full sm:w-24 h-64 sm:h-36 shrink-0">
<Image
src={film.image}
alt={`Poster ${film.title}`}
fill
className="object-cover rounded-md"
sizes="(max-width: 768px) 100vw, 120px"
priority={false}
/>
</div>
<div className="flex-1">
<h2 className="text-lg font-semibold">{film.title}</h2>
<p className="text-sm text-gray-600 dark:text-gray-400 mb-1">
Tahun Rilis: {film.release_date}
</p>
<p className="text-sm text-gray-800 dark:text-gray-300 line-clamp-3">
{film.description}
</p>
</div>
</li>
))}
</ul>
);
}
Komponen ini adalah komponen React yang digunakan untuk menampilkan daftar film dalam bentuk list yang rapi, lengkap dengan gambar, judul, tahun rilis, dan deskripsi.
- Komponen ini menerima satu props bernama
films, yang merupakan array dari tipeFilm. - Tipe
Filmsendiri didefinisikan ditypes/film.tsdan berisi properti sepertiid,title,description,release_date, danimage.
Step 6: Halaman Utama (app/page.tsx)
// app/page.tsx
import { getRealFilms } from "@/lib/ghibli"; // atau getDummyFilms
import { FilmList } from "@/components/FilmList";
import { getDummyFilms } from "@/lib/dummy";
export default async function HomePage() {
const films = await getRealFilms(); // ganti ke getDummyFilms() jika ingin dummy
const dummyFilm = await getDummyFilms();
return (
<main className="max-w-xl mx-auto p-6 space-y-4">
<h2 className="text-2xl font-bold mb-4">🎬 Daftar Film Dummy</h2>
<FilmList films={dummyFilm} />
<h2 className="text-2xl font-bold mb-4">🎬 Daftar Film Studio Ghibli</h2>
<FilmList films={films} />
</main>
);
}
File ini merupakan halaman utama (landing page) dari aplikasi Next.js-mu. Di sini, kita:
- Mengambil data film.
- Menampilkannya dalam dua bagian:
- Data dummy.
- Data nyata dari Studio Ghibli API.
Loading State (optional)
// app/loading.tsx
export default function Loading() {
return (
<div className="p-6 flex justify-center">
<p className="font-semibold text-lg">⏳ Sedang mengambil data film...</p>
</div>
);
}
File ini adalah special file (built-in convention) di Next.js App Router yang digunakan untuk menampilkan loading UI secara otomatis saat halaman sedang melakukan data fetching (pengambilan data secara asynchronous).
🎉 Hasil Akhir
List film dari API tampil rapi, dengan struktur kode yang dipisah antara logika dan UI.
Kesalahan Umum Pemula soal JSON
“Nih, beberapa jebakan yang dulu sering aku alami (dan mungkin kamu juga bakal ngalamin 😅):”
🔸 Gagal Parse JSON
Pernah ngalamin error Unexpected token o in JSON at position 1? Itu artinya kamu coba JSON.parse() padahal datanya udah berupa objek JavaScript. Dulu aku juga sering ngotot parse tanpa ngecek dulu datanya. Akhirnya malah crash, panik sendiri 🤯.
🔸 Salah Akses Data
Bayangin kamu ambil data dari API dan langsung tulis data.title, padahal bentuknya array (data[0].title). Hasilnya? undefined. Dulu aku sering bingung, “Lah, datanya ada kok, kenapa gak keluar?” Ternyata salah struktur 😅.
🔸 Bingung Nested JSON
JSON bisa bersarang—dan kadang dalem banget. Misalnya data.user.profile.avatar.url. Dulu aku frustrasi tiap ngakses undefined, padahal ternyata user-nya belum ke-load. Di sinilah pentingnya ngecek step-by-step dan pake optional chaining (?.) kalau perlu.
🔸 Langsung console.log(data) dan Pusing Sendiri
Pas awal-awal, aku sering console.log(data) terus lihat isinya: panjang, dalam, dan gelap 😵💫. Habis itu… bingung sendiri mau ambil yang mana. Sekarang, aku lebih sering console.log(Object.keys(data)) atau langsung buka di Network tab > Preview.
Penutup: Belajar JSON Itu Investasi
“Makin kamu ngerti JSON, makin enak perjalananmu sebagai frontend developer.”
JSON itu bukan sekadar format data — ini bahasa universal antara frontend dan backend. Mau ngobrol sama API buatan tim backend? JSON. Mau ambil data dari Firebase, Supabase, atau bahkan OpenAI? JSON juga.
Semakin kamu paham struktur, cara parsing, dan cara navigasi di dalam JSON, semakin lancar kerja kamu — lebih cepat debug, lebih mudah ambil data, dan lebih percaya diri ngoding.
“Ini ibarat bahasa yang bikin kamu nyambung ke mana aja: backend, third-party services, bahkan AI API sekalipun.”
🚀 Yuk terus explore!
Dunia frontend itu bukan cuma soal tampilan yang cantik. Tapi juga tentang gimana kamu bisa ngerti isi dalamnya — dan JSON adalah salah satu kunci utamanya.
Dengan memahami dan menghindari kesalahan-kesalahan umum saat bekerja dengan data JSON di Next.js, kamu bisa membangun aplikasi yang lebih efisien, scalable, dan mudah di-maintain.
Kalau kamu ingin meningkatkan kemampuan coding lebih lanjut dan belajar secara mendalam, kamu bisa belajar bersama mentor expert di BuildWithAngga.
Selain mendapatkan akses materi selamanya, kamu juga bisa:
✅ Membangun portfolio berkualitas
✅ Konsultasi langsung dengan mentor
✅ Mendapatkan berbagai benefit menarik lainnya
Semua ini akan membantumu jadi frontend developer profesional yang siap bersaing di industri.
Mari bergabung dan raih kesuksesan bersama BuildWithAngga!
