Membuat Blog Pribadi #Part 2

Setup Next JS

Gambar 1 — Main Page Dark Mode

Di Part kali ini kita akan membuat kerangka projek awal dengan melakukan setup Next JS. Sebelumnya pastikan sudah install yarn, jika belum bisa lihat disini.

yarn create next-app personal-blog
cd personal-blog
yarn dev

Gambar 2 — structure project awal

Jika berhasil menjalankan command yarn dev, kemudian buka localhost:3000 pada browser kalian. hasilnya akan seperti pada gambar 4.

Gambar 3 — running yarn dev

Gambar 4— Next.js Starter Page

Buka code dan hapus folder api dan Home.module.css karena tidak akan kita gunakan dan untuk styling nantinya kita akan menggunakan tailwindcss dan akan kita setup di globals.css .

Gambar 5

Replace code pada index.js dengan code dibawah dan pastikan tidak ada error pada localhost:3000 setelah perubahan disimpan.

Code 1 — Home Page

Membuat folder components dan file jsconfig.json. config ini nantinya akan digunakan sebagai shortening ketika import components.

Gambar 6 — jsconfig.json

Ubah import styles yang ada di _app.js seperti code dibawah.

Code 2 — import styles

Setelah save akan terdapat error dan tinggal kita re-run yarn dev saja dengan cara ctr + c pada cmd dan kemudian yarn dev.

Gambar 7 — Error import

Kemudian buat folder blog dan file [id].js yang nantinya akan menjadi detail page dari blog yang hasil akhirnya kurang lebih seperti gambar 9. Untuk sementara kita akan membuat kerangkanya saja seperti gambar 8. dan bagian code pada [id].js dapat dilihat sebagai berikut :

code 3 — detail page

Gambar 8 — Detail page

Gambar 9 — Detail page Dark Mode

Selanjutnya kita install tailwindcss dengan menjalankan :

yarn add tailwindcss postcss autoprefixer

Jika proses installasi package selesai, buat file postcss.config.js yang berisikan code seperti gambar 10 dan buat file tailwind.config.js seperti contoh code 4.

Gambar 10 — postcss.config.js

Code 4 — tailwind.config.js

Terakhir kita akan setup global.css menjadi seperti code 5. disini kita akan menggunakan font Poppins, dengan thema default background berwarna sand dan background black ketika switch ke dark mode. class toggle-dot pada code css dibawah dibuat untuk membuat animasi pada button switcher thema yang akan kita setup setelah ini.

Gambar 11 — warning css validate

Jika ingin menghilangkan warning yang ada pada file css tersebut, untuk yang menggunakan IDE vscode bisa dengan cara buat folder .vscode dan file settings.json didalamnya seperti gambar berikut :

Gambar 12 — vscode settings.json

Kemudian kita akan menambahkan package next-themes sebagai theme provider. Jalankan code berikut untuk instalasi package :

yarn add next-themes

Setelah selesai instalasi ubah file _app.js menjadi seperti code berikut :

Pastikan tidak ada error setelah melakukan perubahan-perubahan diatas.

Mari kita test apakah tailwindcss sudah terkonfigurasi dengan membuat styling tag h1 seperti gambar dibawah :

Gambar 13 — testing tailwindcss

Tailwind sudah berhasil terkonfigurasi dan di part berikutnya kita akan membuat component serta layouting tampilan menjadi sesuai dengan design yang ada.

Seluruh hasil dari langkah dari part ini dapat dilihat di link github berikut setup-next-js (pastikan memilih branch setup-next-js)

Artikel ini adalah bagian dari Seri Tutorial Membuat Blog Pribadi :

1. Tutorial Membuat blog pribadi
2. Setup Next JS
3. Styling dan Membuat Basic Component
4. Connect dengan Notion API