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 (Build Time). 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).

Kelebihan SSR dan SSG

Berikut adalah kelebihan dari SSR dan SSG:

Dapat Meningkatkan Performa

Kelebihan pertama dari Server-Side Rendering (SSR) dan Static-Site Generation (SSG) adalah dapat meningkatkan performa suatu Website. Hal tersebut dapat terjadi 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 Next.js.

Persyaratan Pembelajaran

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 memiliki 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 folder pages.

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.