Bikin Web SSR dengan Next.JS & Strapi (Part 2)

5 min readNov 24, 2018

Post sebelumnya udah bahas overview tentang SSR sama framework yang mau kita pakai untuk bikin server side rendering blog. Maka post kali ini bakal kita mulai aja tutorialnya.

Setup Database buat Strapi

Strapi butuh database untuk menyimpan data, untuk itu kita setup dulu database, bisa pakai MySQL atau MongoDB. Dalam contoh ini saya pakai MySQL.

Cukup masuk ke mysql (isi username):

mysql -u[username] -p -h [host] -P [port]

Pas udah masuk ke interface mysql, create database pakai:

create database blogapi;

Setup Strapi

Install strapi:

npm install -g strapi@alpha

Baru bisa create project strapi, caranya:

strapi new blog-api

Buat windows user dan gagal saat create project Strapi, bisa pakai command:

strapi new --dbclient=mysql --dbhost=172.0.0.1 --dbport=3306 --dbname=[blogapi] --dbusername=[username] --dbpassword=[password] --dev

Waktu create new project strapi, pilih database MySQL (atau kalo mau pakai yang lain silahkan). Nanti tinggal isi database name sama username password databasenya.

Strapi tampak sudah selesai generate project

Masuk ke directory

cd blog-api

Lalu run blog-api:

strapi start

Akan muncul di browser tampilan berikut

Bikin User Baru

Kalau di-submit maka akan redirect ke admin panel Strapi.

Bikin Content Type

Buka menu Content Type Builder di bagian kiri. Lalu klik Add Content Type.

Kalau sudah di save maka muncul seperti ini:

Blog di atas merupakan content type, seperti kalau kita mau bikin API dari product atau user. Di database nanti akan ter-create table baru yaitu table blog.

Blog Fields

Fields adalh atribut-atribut dari content type. Kalau dibayangkan misal bikin tabel di database kan pasti ada atribut misal ID, name, email, seperti itu. Dalam kasus ini kita bakal bikin 4 fields, yaitu: slug, title, content, dan cover.

Jangan lupa buka tab Advanced Settings untuk fields slug, karena kita butuh field yang required dan unique.

Jangan lupa buka Advanced Settings untuk field content, karena kita akan menampilkan WYSIWYG untuk field tersebut.

Kalau untuk field cover, kita pakai type Media.

Jangan lupa klik tombol Save di kanan atas.

Mengisi Content

Jika sudah tersimpan, maka akan muncul Content Type Blog di menu. Klik menu tersebut.

Nah kita bisa nambahin post di sini dengan klik Add New Blog.

Lalu simpan.

Untuk mengakses API, cukup dengan cara mengakses url http://localhost:1337/blogs. Coba kita lihat API-nya:

Forbidden karena secara default, user public tidak punya akses ke api kita. Untuk itu kita perlu set permission.

Set Roles & Permission

Buka menu Roles & Permission. Lalu Klik pada role Public.

Pada bagian Permisson, kita bisa set untuk Content Type Blog, user public bisa mengakses get, find, findOne.

Dan saat kita simpan, mari kita refresh API http://localhost:1337/blogs, maka akan tampil data nya.

Blog entries di http://localhost:1337/blogs

Blog detail / Post detail di http://localhost:1337/blogs/1

Sedikit Tweaks

Kalau dilihat di bagian blog detail, maka bisa dicermati bahwa yang diambil disitu adalah ID dari blog [ blog/{:id} ]. Ini kurang menguntungkan jika kita pengen mengambil data blog detail dengan menggunakan parameter slug. Maka kita ubah sedikit code di Strapi.

Mari buka code api/blog/config/routes.json

{
  "method": "GET",
  "path": "/blogs/:id", // <-- kita ganti :id jadi :slug
  "handler": "Blog.findOne",
  "config": {
    "policies": []
  }
}

jadinya:

{
  "method": "GET",
  "path": "/blogs/:slug",
  "handler": "Blog.findOne",
  "config": {
    "policies": []
  }
}

Lalu pada file api/blog/services/Blog.js juga kita ubah pada bagian ini:

fetch: (params) => {
  // Select field to populate.
  const populate = Blog.associations
    .filter(ast => ast.autoPopulate !== false)
    .map(ast => ast.alias);return Blog.forge(_.pick(params, 'id')).fetch({ // <-- ubah 'id'
    withRelated: populate
  });
},

Ubah id jadi slug :

fetch: (params) => {
  // Select field to populate.
  const populate = Blog.associations
    .filter(ast => ast.autoPopulate !== false)
    .map(ast => ast.alias);return Blog.forge(_.pick(params, 'slug')).fetch({
    withRelated: populate
  });
},