Tutorial Next.js: Framework JS Yang Powerfull Pada Masanya. 🚀

Selamat datang di tutorial Next.js! Next.js adalah kerangka kerja (framework) React yang populer untuk membangun aplikasi web modern yang siap produksi. Panduan ini akan memandu Anda melalui dasar-dasar hingga fitur-fitur canggih yang membuat Next.js begitu kuat.

Pengenalan Next.js 🌐

Next.js adalah kerangka kerja React yang tidak hanya memungkinkan Anda membangun antarmuka pengguna (UI) yang interaktif, tetapi juga menyediakan fitur-fitur bawaan untuk rendering sisi server, pembuatan situs statis, dan banyak lagi. Ini menyederhanakan banyak aspek kompleks dari pengembangan web modern.

Mengapa Belajar Next.js?

• Rendering Fleksibel: Mendukung Server-Side Rendering (SSR) dan Static Site Generation (SSG), yang bagus untuk SEO dan performa.
• Routing Berbasis File: Membuat rute (halaman) semudah membuat file di dalam direktori pages. Tidak perlu konfigurasi routing yang rumit.
• API Routes: Anda dapat membangun backend atau endpoint API langsung di dalam proyek Next.js Anda.
• Optimisasi Otomatis: Fitur seperti optimisasi gambar dan code splitting sudah tersedia secara default.

Menyiapkan Proyek Next.js 🛠️

Memulai proyek Next.js sangatlah mudah. Anda hanya perlu menjalankan satu perintah di terminal Anda. Pastikan Anda sudah menginstal Node.js.

1. Buka Terminal: Buka terminal atau command prompt Anda.
2. Buat Aplikasi Baru: Jalankan perintah berikut untuk membuat aplikasi Next.js baru:

   npx create-next-app@latest nama-aplikasi-anda

3. Jalankan Server Pengembangan: Masuk ke direktori proyek dan jalankan server:

   cd nama-aplikasi-anda
   npm run dev

   Aplikasi Anda sekarang berjalan di http://localhost:3000.

Konsep Dasar Next.js 🧱

1. Routing Berbasis File

Di Next.js, setiap file di dalam direktori pages secara otomatis menjadi sebuah rute.

• pages/index.js akan menjadi rute / (halaman utama).
• pages/about.js akan menjadi rute /about.
• pages/posts/[id].js akan menjadi rute dinamis seperti /posts/1.

Contoh (pages/about.js):

function AboutPage() {
  return <h1>Tentang Kami</h1>;
}
 
export default AboutPage;

2. Komponen React

Anda dapat membuat dan menggunakan komponen React seperti biasa. Ini sangat bagus untuk membangun UI yang dapat digunakan kembali.

Contoh (components/Button.js):

function Button({ children }) {
  return <button>{children}</button>;
}
 
export default Button;

Pengambilan Data (Data Fetching) 📈

Next.js menawarkan metode yang kuat untuk mengambil data sebelum halaman di-render.

getStaticProps (Static Site Generation)

Gunakan getStaticProps jika data halaman dapat diambil saat build time. Ini sangat cepat karena halaman HTML statis dihasilkan sebelumnya.

export async function getStaticProps() {
  // Ambil data dari API atau database
  const res = await fetch('https://api.example.com/posts');
  const posts = await res.json();
 
  return {
    props: {
      posts,
    },
  };
}

getServerSideProps (Server-Side Rendering)

Gunakan getServerSideProps jika data halaman harus diambil pada setiap permintaan (request). Ini memastikan data selalu terbaru.

export async function getServerSideProps(context) {
  // Ambil data pada setiap request
  const res = await fetch('https://api.example.com/data');
  const data = await res.json();
 
  return {
    props: {
      data,
    },
  };
}

API Routes ⚙️

Anda dapat dengan mudah membuat endpoint API sebagai fungsi serverless di dalam direktori pages/api.

Contoh (pages/api/hello.js): File ini akan membuat endpoint di /api/hello.

export default function handler(req, res) {
  res.status(200).json({ text: 'Halo Dunia' });
}

Kesimpulan ✅

Next.js adalah kerangka kerja yang sangat kuat yang menyederhanakan pengembangan aplikasi React modern. Dengan fitur-fitur seperti SSR, SSG, routing berbasis file, dan API routes, Anda dapat membangun aplikasi web yang cepat, SEO-friendly, dan dapat diskalakan dengan lebih mudah.

Selamat ngoding!