Tutorial Next.js(2021)

Panduan lengkap menggunakan Next.JS untuk pemula

Apa itu Next.js?

Next.js adalah sebuah React framework yang dibuat untuk mengatasi masalah client-side rendering yang dimiliki React.

Sebuah halaman website yang dibuat menggunakan React ‘terasa ringan’ karena tampilan website sangat interaktif.

Selain itu, saat data berubah, React dengan efisien akan mengupdate bagian dari halaman website yang memang perlu diupdate tanpa perlu reload satu halaman penuh.

Untuk mendapatkan itu semua, client harus load semua file JavaScript sebelum konten halaman ditampilkan. Jika file JS cukup besar maka waktu yang dibutuhkan untuk load pertama kali juga menjadi lebih lama.

Masalah lain dari client-side rendering adalah SEO, ada kemungkinan web crawler berusaha mengindex halaman yang belum selesai dirender sepenuhnya (karena waktu load yang lama). Dan menganggap web tersebut blank.

Kedua masalah diatas dapat diselesaikan dengan teknik pre-rendering. Yaitu halaman HTML dan file JavaScript di generate sebelum dikirim ke client.

Ada 2 bentuk pre-rendering yaitu Server Side Rendering (SSR) dan Static Site Generator (SSG).

Server Side Rendering(SSR)

Sesuai namanya proses render terjadi di server dan bukan di client, setiap request ke server akan direspon dengan sebuah halaman HTML.

Static Site Generator (SSG)

Setiap request ke server akan direspon dengan halaman HTML yang sudah selesai digenerate pada saat proses build. Teknik cache menggunakan CDN dapat diterapkan untuk mempersingkat waktu akses.

Next.js dapat melakukan keduanya.

Features

Selain pre-rendering, Next.js juga memiliki beberapa fitur untuk memudahkan kita dalam membuat aplikasi React:

• Page-based routing system, alamat dari halaman adalah nama file dari halaman tersebut
• Code splitting, code JavaScript dipecah menjadi chunk agar waktu loading halaman menjadi lebih singkat
• Client-side routing, routing juga bisa dilakukan di sisi client
• Fast refresh support, mirip dengan hot reloading
• Built-In CSS, support CSS Module, SAAS dan CSS-in-JS
• Automatic Image Optimization, tersedia pada Next.js versi 10 keatas
• API Routes, membuat API tanpa library tambahan

Pada tutorial ini kita akan bahas konsep-konsep yang ada di Next.js dengan cara membuat sebuah blog.

Persiapan

Pastikan tool berikut ini sudah terinstall:

• Visual Studio Code
• Terminal
• Nodejs + NPM/yarn

Install Next JS

Untuk membuat sebuah aplikasi Next.js kita bisa gunakan package create-next-app, mirip dengan create-react-app.

Jalankan perintah berikut ini di terminal:

$ npx create-next-app my-blog

Kemudian pindah folder dan jalankan aplikasi

$ cd my-blog
$ yarn dev

Akses localhost:3000, jika tidak ada masalah kita akan dapatkan tampilan seperti ini:

Navigation

Setelah install ,yang akan kita lakukan adalah membuat halaman baru dan navigasi antar halaman.

Sistem routing pada Next.js adalah page-based, artinya setiap halaman memiliki alamat url (slug) sesuai dengan nama file dari halaman tersebut.

Contoh:

• Halaman pages/about.js dapat diakses dengan alamat url /about
• Halaman pages/posts/my-post.js dapat diakses dengan alamat url /posts/my-post

Hal ini berbeda dengan aplikasi React dimana untuk membuat sistem routing kita harus gunakan package tambahan seperti react-router-dom.

Membuat halaman baru

Buat sebuah folder dengan nama posts kemudian buat sebuah file baru dengan nama first-post.js.

Susunan Folder:

Salin code berikut ini di dalam file first-post.js.

Link antar halaman

Untuk membuat link antar halaman kita bisa gunakan component Link yang sudah disediakan oleh Next.js. Jadi kita tidak gunakan tag link <a/> .

Component Link ini juga akan mengaktifkan client-side navigation, dimana proses peralihan dari satu halaman ke halaman lain dilakukan oleh JavaScript dan bukan browser.

Update code halaman pages/index.js menjadi seperti ini:

Hasilnya:

Layout Components

Kita bisa membuat sebuah shared component yang bisa digunakan pada semua halaman lain dengan menggunakan Layout.

Caranya adalah dengan membuat sebuah folder dengan nama components kemudian buat sebuah file baru layout.js dengan code berikut ini:

Kemudian import component ke dalam file first-post.js.

Untuk mengetahui kegunaan dari Layout component ini kita perlu buat satu halaman baru lagi.

Buat sebuah file dengan nama second-post.js di dalam folder posts dengan code sebagai berikut:

Dengan layout component, setiap code yang ditambahkan ke file layout.js akan muncul di kedua halaman post.

Styles

Salah satu penggunaan layout component adalah menambahkan style CSS ke banyak halaman tanpa harus menambahkannya satu per-satu.

Kita akan tambahkan CSS ke semua halaman post…

Buat sebuah file dengan nama layout.module.css di dalam folder components.

Tambahkan code berikut ini:

Kemudian update layout.js:

Hasilnya:

Global Styles

Sedangkan jika ingin menerapkan sebuah style ke semua halaman, gunakan Global Styles.

Untuk melakukannya kita update file styles/global.css.

Ubah ukuran default dari font dan line-height.

Semua ukuran font pada blog sekarang berukuran 18px dengan jarak antar baris adalah 1.6.

Asset

Untuk menghandle asset seperti file gambar kita bisa simpan di dalam folder public.

Kita bisa akses file gambar cukup dengan menggunakan nama file tanpa path (relative path).

<img src="/my-image.png" alt="My Image" className="logo" />

Hasil akhir:

Pre-rendering

Next.js dapat melakukan dua bentuk pre-rendering yaitu SSR & SSG.

Teknik pre-rendering membuat load halaman menjadi lebih cepat dibanding dengan teknik tanpa pre-rendering.

Perbandingan

Sumber

Sumber

Perbandingan SSG vs SSR

SSG

Halaman HTML digenerate pada saat proses build sebelum dikirim ke client/client mengirimkan request.

Sumber

SSR

Halaman HTML di generate untuk setiap request dari client.

Sumber

Data Fetching

Next.js menggunakan function yang berbeda untuk proses data fetching pada setiap teknik pre-rendering:

Untuk SSG kita gunakan function getStaticProps.

Untuk SSR kita gunakan function getServerSideProps.

Pada bagian ini kita akan buat demo fetch data dari sebuah API menggunakan pre-rendering SSG.

Membuat API

Kita bisa gunakan package json-server untuk membuat API.

Install json-server

$ yarn global add json-server

Atau

$ npm install -g json-server 

Buat sebuah file di dalam komputer/laptop dengan nama db.json.

Kemudian jalankan perintah berikut ini untuk start server

$ json-server --watch db.json --port 3001

Pastikan jalankan perintah ini dari dalam folder dimana db.json berada. Dan kita gunakan port 3001 karena port 3000 sudah digunakan oleh Next.js.

Implementasi getStaticProps

Tambah code berikut ini di bagian bawah component Home atau file index.js

Props externalPostData dapat diakses di dalam component Home.

Kemudian data kita render sebagai daftar post:

Final Code dari index.js:

Hasilnya:

Data First Post dan Second Post berasal dari halaman internal atau file yang ada di dalam folder pages.

Sedangkan data Third Post dan Last Post berasal dari API/json-server.

Jika kita klik Third Post, Next.js akan mengarahkan ke alamat /posts/third-post, tetapi kita akan mendapatkan error seperti ini:

Hal ini dikarenakan halaman untuk menampilkan data tersebut belum dibuat.

Agar halaman dapat dibuat secara dinamis berdasarkan data yang didapat dari API kita bisa gunakan Dynamic Routes/URL.

Dynamic Routes/ URLs

Dengan dynamic routes kita bisa buat halaman berdasarkan external data seperti dari API.

Kita akan gunakan function bernama getStaticPaths untuk generate path yang dibutuhkan.

Buat sebuah file dengan nama [id].js di dalam folder pages/posts.

Kemudian tambahkan code berikut ini:

Di file yang sama buat function untuk mendapatkan data semua id dari setiap post:

Yang perlu diperhatikan disini adalah bentuk data yang dihasilkan oleh function harus memiliki format seperti ini:

[
   {
      "params":{
         "id":"third-post"
      }
   },
   {
      "params":{
         "id":"last-post"
      }
   }
]

Harus memiliki params dan id untuk setiap objectnya.

Tanpa menggunakan format ini getStaticPaths akan gagal dieksekusi.

Tambahkan function getStaticPaths:

Kemudian tambahkan function untuk mendapatkan data tunggal dari post dengan parameter alias:

Function diatas akan digunakan didalam function getStaticProps:

Jika kita menggunakan json-server, data dikirimkan dalam bentuk array, oleh karena itu untuk membaca data kita harus akses index array ke-0.

postData: postData[0]

Terakhir update component Post untuk menampilkan data dari getStaticProps:

Final Code:

Hasilnya:

Deployment

Ada beberapa tempat hosting yang bisa kita gunakan untuk deploy aplikasi next.js secara gratis. Dan yang paling mudah adalah menggunakan platform Vercel.

Team Vercel adalah creator Next.js.

Proses Deploy:

1. Buat akun di Vercel
2. Push repository ke github
3. Import repository menggunakan menu New Project

Vercel akan mendeteksi semua konfigurasi secara otomatis untuk selanjutnya di deploy.

Setelah proses deploy berhasil, kita akan mendapatkan url untuk mengakses aplikasi Next.js

Lainnya

Masih ada beberapa fitur dasar Next.js yang tidak dicover di dalam tutorial ini, seperti:

• API Routes
• Image optimization
• Environment Variable
• TypeScript Support

Untuk lebih lengkapnya kamu bisa akses halaman offical Next.js.

Kesimpulan

Next.js adalah React Framework yang memiliki banyak fitur untuk memudahkan kita dalam membuat sebuah aplikasi React.

Konten tutorial ini sebagian besar diambil dari halaman official Next.js dengan beberapa perubahan.

Tujuan pembuatan tutorial ini adalah untuk mengenalkan framework Next.js dengan penjelasan yang lebih singkat tanpa menghilangkan poin-poin penting yang memang harus dijelaskan.

Selain itu tutorial ini juga dijadikan materi pendahuluan untuk materi Build Scalable App yang ada di halaman devsaurus.

Untuk dokumentasi lengkap silahkan lihat di halaman official Next.js.

Semoga tutorial ini bermanfaat. Terima Kasih.

Download full chapter eBook Full Stack Gate, kumpulan materi pendahuluan untuk memulai karir sebagai Full Stack Web Developer disini.