Membuat Blog Pribadi #Part 1

Tutorial membuat blog pribadi dengan Next js, Tailwindcss, dan Notion API

Published in

Codemi Blog

3 min readJan 5, 2022

Pada kesempatan kali ini, saya akan sharing tentang bagaimana cara membuat blog sederhana dengan menggunakan NextJS, TailwindCss, dan Notion API.

Sebelum melangkah lebih jauh, terdapat Prerequisite atau beberapa hal yang perlu anda pahami untuk mengikuti tutorial berikut yaitu Javascript, CSS, dan Request API. Atau kalian bisa baca dulu disini Javascript, CSS, dan Request API.

Hasil Akhir

Untuk hasil akhirnya, pada bagian main page akan seperti pada gambar 1 dan untuk detail pagenya seperti gambar 2 berikut.

Yang akan kita gunakan

Next JS — version 12.0.7
Tailwind — version 3.0.7
Notion API — version 0.4.11

Next JS

Ketika kita membuat web apps dari nol dengan react, terdapat banyak hal yang perlu kita perhatikan seperti :

Code harus di bundle dengan bundler seperti webpack dan kemudian dicompile menggunakan Babel (atau compiler lain).
Perlu membuat production optimizations seperti code splitting.
Kadang kita membutuhkan konten yang dapat pre-render secara statis untuk kebutuhan SEO. mungkin juga kita butuh side rendering atau client-side rendering.
Mungkin kita perlu server-side code untuk mengconnectkan react app dengan data store.

Masalah-masalah tersebut dapat kita atasi dengan Framework, salah satunya yaitu Next JS. Tulisan tentang Next JS dapat kalian baca di sini.

Tailwind CSS

Jika kalian belum pernah melihat Tailwind CSS, kurang lebih bentukannya kayak gini.

<div class="bg-gray-100 rounded-xl p-8">Hello World</div>

Jadi kalo kalian lihat pada bagian bg-gray-100 rounded-xl dan p-8 adalah salah satu contoh dari collection predefined CSSnya tailwind. Sederhananya, di dalam Tailwind ada banyak class kecil yang siap digunakan.

Memang tailwind dapat mempercepat proses development kita dengan menyediakan predefined cssnya. Namun ada kalanya beberapa library lain seperti chakra ui ataupun styled-component bisa lebih tepat untuk kita gunakan pada case development yang berbeda.

Oleh karena itu, kita juga akan menggunakan Chakra UI dan Styled-Component dengan case design dan skala project yang sama sebagai perbandingan. Untuk tulisan tentang Tailwind CSS yang lebih lengkap dapat kalian baca di sini.

Notion API

Di artikel sebelumnya saya sudah pernah menulis tentang notion. Namun kali ini kita akan lebih berfokus ke penggunaan fitur API dari notion sebagai tools untuk membuat dan menyediakan data blogging.

Jadi dengan menggunakan Notion API, kita akan melakukan integrasi antara Next JS kita dengan notion dan menampilkan tulisan notion kita dalam bentuk blog.

Tutorial lengkap untuk notion api dapat dibaca disini.