
Pada dasarnya, Next.js (biasa ditulis Next atau NextJS) adalah React Framework untuk membuat Website React yang Pre-Rendered entah itu Server-Side Rendering (SSR) atau Static-Site Generation (SSG).
Server-Side Rendering (SSR) adalah ketika komponen React terender kedalam halaman HTML pada Server setelah terdapat Request atau permintaan dari Browser. Sedangkan Static-Site Generation (SSG) adalah ketika komponen React terender kedalam halaman HTML pada saat Build. Jadi, kita hanya men-Deploy halaman Web dalam Bundle JavaScript.
Next.js dapat kita gunakan untuk melakukan kedua hal diatas (SSR dan SSG). Artinya, komponen React sudah terender kedalam halaman HTML tepat pada saat kita membuka Browser. Dalam hal ini, halaman HTML akan berperilaku seperti Single Page Application (SPA) dan semua Routing dapat ditangani melalui sisi Client (Client-Side).
Tanpa menggunakan Next.js, React akan merender komponen kedalam Browser dan itulah yang disebut dengan Client-Side Rendering (CSR).
Daftar Isi
Kelebihan SSR dan SSG
Berikut adalah kelebihan dari SSR dan SSG:
Meningkatkan Performa
Kelebihan pertama dari Server-Side Rendering (SSR) dan Static-Site Generation (SSG) adalah dapat meningkatkan performa dari suatu Website. Itu karena komponen telah di-render sebelumnya (Pre-Rendered).
SEO yang Lebih Baik
Kelebihan kedua yaitu lebih Search Engine Optimization (SEO) Friendly jika dibandingkan dengan Single Page Application (SPA) biasa karena respon Server telah te-render secara keseluruhan kedalam halaman HTML.
Hasil Akhir Pembelajaran
Disini, kita akan membuat sebuah Website/Blog sederhana dengan beberapa halaman berbeda.
Kita juga akan membahas semua hal mengenai dasar-dasar dari Next.js mulai dari Routing, Fetching Data, dll.
Dibagian akhir pembelajaran ini, kalian juga akan mempelajari beberapa hal yang lebih kompleks (Rumit) serta cara men-deploy halaman Web.
Persyaratan
Berikut adalah persyaratan yang diperlukan untuk mempelajari Next.js:
- Memahami dasar-dasar dari React;
- Node.js versi terbaru yang telah terinstal;
- Text Editor seperti Visual Studio Code (VSCode), Sublime Text, dll. Disini, penulis menggunakan VSCode.
Penulis juga telah meng-upload semua file Source Code dari pembelajaran ini pada Repository GitHub dan setiap bagian pembelajaran sudah terpisah pada Branch yang berbeda sehingga kalian tidak akan bingung dengan Source Code dari masing-masing bagian pembelajaran.
Kalian juga dapat men-download semua file Source-Code (.zip) atau Clone Repository GitHub yang telah penulis berikan diatas.
Membuat Aplikasi Next.js
Cara mudah untuk mulai menggunakan Next.js adalah dengan menggunakan perintah
create-next-app
yang hampir mirip dengan perintah
create-react-app
untuk membuat aplikasi React.
Pertama-tama, bukalah Terminal/Command Prompt (CMD). Pastikan kalian telah mengatur direktori saat ini untuk menyimpan file Project. Disini, penulis akan membuat Project pada direktori/folder Desktop. Jika kalian sudah mengaturnya, selanjutnya adalah menginstal Package dengan menjalankan perintah berikut kemudian tekan enter pada Keyboard:
npx create-next-app blog-elcreative
Catatan: blog-elcreative
adalah perintah untuk
membuat nama dari Project, kalian dapat mengubahnya sesuka hati.

Perintah diatas berfungsi untuk membuat Boilerplate aplikasi Next.js baru yang
bernama blog-elcreative
. Disini, kalian dapat menunggu sampai
prosesnya selesai.
Jika sudah selesai, masuklah kedalam direktori yang baru dibuat dengan memasukkan perintah berikut:
cd blog-elcreative
Kita akan membuka direktori serta file yang ada didalamnya dengan menggunakan Text Editor (VSCode). Jika kalian telah menginstal VSCode, kalian dapat memasukkan perintah berikut kedalam Command Prompt:
code .

Didalam Folder blog-elcreative
, kita dapat melihat beberapa file
Starter. Disini, penulis akan menjelaskan beberapa hal mengenai File dan
Folder tersebut.
Struktur Project
Disini, kita akan memiliki empat Folder yang bernama node_modules, pages, public dan styles serta empat File yaitu .gitignore, package-lock.json, package.json dan README.md.

Penjelasan Struktur Project
-
Folder
node_modules
adalah lokasi Dependency yang akan kita gunakan nantinya; -
Folder
pages
adalah lokasi semua komponen halaman yang dapat kita buat nantinya. Disini, setiap halaman dari Next.js memiliki komponennya sendiri. Didalam folder ini, kalian juga akan memiliki beberapa File berikut: -
File
index.js
- merupakan komponen Index dan file inilah yang akan menjadi halaman utama (Homepage); -
File
_app.js
- merupakan komponen Root dan semua komponen yang berbeda akan ter-render disini; - Folder
api
- merupakan lokasi End-Point dari API. -
Folder
public
adalah lokasi aset publik seperti gambar, video, dll; -
Folder
style
adalah lokasi file CSS yang juga dapat berisi modul CSS; -
File
.gitignore
merupakan file untuk Version Control System (VCS); -
File
package.json
- untuk melihat beberapa Dependency yang diperlukan. Didalam file ini kita juga dapat melihat baris kode berikut:"scripts": { "dev": "next dev", "build": "next build", "start": "next start" },
"dev": "next dev"
- untuk menjalankan Local Development Server agar kita dapat melihat hasil dari aplikasi yang sedang dikerjakan pada Browser. Contoh, bukalah Terminal VSCode dengan menekan tombol CTRL + SHIFT + ` pada Keyboard dan masukkanlah perintah berikut:npm run dev
Setelah menekan tombol ENTER, kalian akan mendapatkan URL Local Development Server http://localhost:3000 yang dapat dibuka melalui Browser.
Jika kalian telah membukanya pada Browser, maka kalian akan melihat halaman seperti berikut:
Semua komponen yang terlihat pada halaman Next.js diatas berada pada file
index.js
dalam folderpages
.
Sekarang, bukalah file
index.js
pada folder pages
. Hapus semua kode yang
ada didalamnya dan pastekan kode berikut kedalamnya:
export default function Home() {
return (
<main>
<h1>Selamat Datang di EL Creative Academy</h1>
</main>
)
}
Simpan file dan lihatlah perubahannya pada Browser. Hasilnya akan seperti berikut:

Perlu diingat, komponen tersebut telah ter-render sebelum Browser dibuka. Selama pengembangan (Development), hal ini dapat dilakukan melaui Server-Side Rendering (SSR). Jadi, Server akan merender komponen kemudian mengirimkan file HTML kedalam Browser.
Pada bagian selanjutnya, kita akan belajar membuat halaman yang dapat ter-render secara langsung untuk siap produksi - proses ini dinamakan dengan Static-Site Generation (SSG).
Jadi, itulah beberapa hal yang dapat kita pelajari kali ini. Selanjutnya kita akan belajar tentang bagaimana Next.js menangani Routing.
Kalian dapat melihat Source Code yang telah kita pelajari dari bagian ini pada Branch Bagian-1 Repository GitHub.
Jika artikel ini bermanfaat, silahkan bagikan kepada teman-teman atau saudara kalian. Jika kalian memiliki pertanyaan, silahkan tulis pada kolom komentar. Terimakasih telah berkunjung di EL Creative Academy.
Posting Komentar