Catatan Kuliah Next.js

Pembukaan

• Selamat datang di channel Vip Code Studio bersama Aweb Saipulo.
• Memperkenalkan seri baru tentang Next.js setelah permintaan banyak dari pemirsa setelah video React.

Apa itu Next.js?

• Next.js: Framework yang dibangun di atas React.
• Rekomendasi untuk membangun aplikasi web.

Masalah dalam Membangun Aplikasi

• Pentingnya membangun aplikasi dengan cara yang baik.
• Hal yang perlu diperhatikan:
  • User Interface (UI): Titik awal interaksi pengguna.
  • Routing: Navigasi antarahalaman dalam aplikasi.
  • Data Fetching: Mendapatkan data dari sumber.
  • Rendering: Cara konten ditampilkan (statis/dinamis).
  • Integration: Koneksi dengan layanan pihak ketiga.
  • Infrastructure: Tempat mendeploy aplikasi.
  • Performance: Kinerja aplikasi.
  • Scalability: Kemudahan pengembangan aplikasi di masa depan.
  • Developer Experience: Pengalaman developer saat membangun dan memaintain aplikasi.

Pendekatan dalam Membangun Aplikasi

• Bisa dilakukan dengan:
  • Native: Membangun dari nol menggunakan JavaScript.
  • Libraries/Frameworks: Memanfaatkan tools yang sudah ada.

Fitur Utama Next.js

• Menyediakan:
  • UI dengan React.
  • Client Side Rendering dan Server Side Rendering.
  • Sistem Routing.
  • Data Fetching.

Cara Kerja Next.js

• Terdapat beberapa environment:
  • Development: Fase pengembangan di server lokal.
  • Production: Aplikasi siap digunakan oleh pengguna.
• Fitur yang disediakan di mode development:
  • TypeScript, ESLint, Fast Refresh.
• Di mode production:
  • Optimisasi untuk end user.

SWC (Speedy Web Compiler)

• Mengoptimalkan proses:
  • Compiling: Transformasi kode ke dalam bahasa yang dimengerti browser.
  • Minifying: Menghapus format dan komentar untuk meningkatkan kinerja.
  • Bundling: Menggabungkan file untuk mengurangi permintaan file.
  • Code Splitting: Memisahkan kode berdasarkan kebutuhan halaman.

Kecantikan Next.js

• Build Time vs Runtime:
  • Build Time: Proses saat aplikasi dibangun.
  • Runtime: Saat aplikasi sudah selesai dibangun dan diakses oleh pengguna.
• Metode Rendering:
  • Client-Side Rendering: Fetch data di sisi client.
  • Pre-Rendering (termasuk Server-Side Rendering dan Static Site Generation): Fetch data di sisi server sebelum mengirim ke client.

Perbedaan antara Server-Side dan Static-Site Generation

• Server-Side Rendering: Di-render saat runtime.
• Static Site Generation: Di-render saat build time.

Penutup

• Banyak website besar menggunakan Next.js, contohnya:
  • Netflix Jobs, TikTok, Twitch, Hulu, Notion, Target, Nike, HBO, dan Nvidia.
• Next.js sebagai solusi untuk meningkatkan pengalaman developer dan performa aplikasi.
• Ajak penonton untuk bersiap coding menggunakan Next.js di video berikutnya.