Cara menampilkan data dari JSON dengan Next.js

Bagi yang belum menginstall Next.js, silahkan baca artikel saya di sini

Hallo semuanya balik lagi dengan materi menggunakan Next.js. Kali ini saya akan memberitahu bagaimana cara menampilkan data dari sebuah JSON. Teman-teman masih ada yang belum tahu apa itu JSON?

JSON — singkatan dari “JavaScript Object Notation“— adalah sebuah format untuk berbagi data. JSON menggunakan ekstensi .json. Karena sangat mudah dibaca dan ringan, JSON memberikan alternatif lebih baik dari XML dan membutuhkan formatting yang tidak banyak.

So langsung saja kita memulai cara menampilkan data dari JSON dengan Next.js.

1. Membuat data JSON

Pertama buat file dengan nama data.json pada folder components dan diisi dengan data di bawah ini :

[
  {
    "universitas": "Universitas Brawijaya",
    "info": {
      "website": "https://ub.ac.id/",
      "didirikan": "1963"
    }
  },
  {
    "universitas": "Universitas Indonesia",
    "info": {
      "website": "http://www.ui.ac.id/",
      "didirikan": "1849"
    }
  },
  {
    "universitas": "Universitas Gadjah Mada",
    "info": {
      "website": "https://ugm.ac.id/",
      "didirikan": "1949"
    }
  }
]

2. Menampilkan data JSON

Pertama kita import file json yang berada di folder components , karena Next.js sudah support ES6, maka cara memanggilnya seperti ini :

import data from '../components/data'

Karena data.json berbentuk array object, maka kita harus melakukan iterasi untuk menampilkannya, dengan cara :

data.map((data, index) => {}

Setelah dilakukan iterasi, maka selanjutnya adalah menampilkan value sebuah object dengan memanggil key object-nya, dengan cara :

{data.map((data, index) =>
  <div key={index}>
    Universitas: {data.universitas}
    Didirikan: {data.info.didirikan}
    Website: {data.info.website}
  </div>
)}

Apabila kita menggunakan map , maka kita harus menambahkan atribut key={index} pada tag html pertama kita di dalam map

Untuk lebih lengkapnya, teman-teman bisa lihat source code yang saya buat di bawah :

Lalu tinggal jalankan programnya dengan yarn dev dan buka http://localhost:3000/ di browser kalian.

Dan taraaaaa, apabila browser teman-teman bisa menampilkan data seperti di atas, maka teman-teman berhasil menampilkan JSON dengan Next.js. Congratsss !! 🎉

Jangan lupa follow dan terus update mengenai tulisan saya, saya akan terus sharing mengenai apapun dengan Next.js 😁

Untuk dapat melihat lebih lengkapnya, bisa lihat repository saya di https://github.com/maafaishal/menampilkan-json-di-nextjs