Next.js: Panduan Lengkap untuk Halaman, Rute Statis, Dinamis, dan Bersarang

Next.js telah menjadi kerangka kerja pilihan untuk membangun aplikasi web React berkinerja tinggi. Salah satu fitur intinya adalah sistem perutean berbasis halaman yang kuat dan fleksibel. Dalam panduan komprehensif ini, kita akan menjelajahi seluk-beluk perutean Next.js, mulai dari halaman statis sederhana hingga rute dinamis dan bersarang yang kompleks.

Daftar Isi

1. Pengantar Next.js dan Perutean Berbasis Halaman
   1. Apa itu Next.js?
   2. Keunggulan Menggunakan Next.js untuk Pengembangan Web
   3. Konsep Dasar Perutean Berbasis Halaman
2. Halaman Statis di Next.js
   1. Membuat Halaman Statis Dasar
   2. Memahami Struktur Direktori pages
   3. Menggunakan Komponen React dalam Halaman Statis
   4. Menambahkan CSS dan Styling ke Halaman Statis
   5. Pra-rendering Halaman Statis untuk Kinerja Optimal
3. Rute Dinamis di Next.js
   1. Kapan Menggunakan Rute Dinamis?
   2. Membuat Rute Dinamis dengan Kurung Siku ([])
   3. Mengakses Parameter Rute dengan useRouter
   4. Menggunakan getStaticPaths untuk Pra-render Rute Dinamis
   5. Menggunakan getStaticProps untuk Mengambil Data
   6. Strategi Fallback: fallback: false, fallback: true, dan fallback: 'blocking'
   7. Memecahkan Masalah Umum dengan Rute Dinamis
4. Rute Bersarang di Next.js
   1. Memahami Struktur Direktori untuk Rute Bersarang
   2. Membuat Rute Bersarang Sederhana
   3. Mengakses Parameter di Rute Bersarang
   4. Menggabungkan Rute Statis dan Dinamis dalam Rute Bersarang
   5. Best Practices untuk Mengelola Kompleksitas Rute Bersarang
5. Fitur Lanjutan Perutean Next.js
   1. Perutean Klien dengan next/link
   2. Menggunakan useRouter untuk Navigasi Terprogram
   3. Middleware di Next.js: Autentikasi, Otorisasi, dan Lainnya
   4. Menangani Kesalahan dan Halaman 404
   5. Internationalization (i18n) dengan Next.js
6. Optimasi SEO dengan Perutean Next.js
   1. Judul Halaman dan Meta Deskripsi
   2. Membuat Sitemap yang Optimal
   3. Menggunakan Data Terstruktur
   4. Best Practices untuk SEO dengan Rute Dinamis
7. Kesimpulan: Menguasai Perutean Next.js untuk Aplikasi Web yang Sukses

1. Pengantar Next.js dan Perutean Berbasis Halaman

1.1 Apa itu Next.js?

Next.js adalah kerangka kerja React yang memungkinkan Anda untuk membangun aplikasi web cepat dan ramah SEO dengan mudah. Ini menyediakan fitur-fitur seperti pra-rendering, perutean berbasis halaman, pengoptimalan gambar, dan masih banyak lagi.

1.2 Keunggulan Menggunakan Next.js untuk Pengembangan Web

• Kinerja yang ditingkatkan: Next.js menawarkan pra-rendering statis dan rendering sisi server, sehingga meningkatkan kecepatan pemuatan halaman dan pengalaman pengguna.
• SEO yang lebih baik: Pra-rendering membantu mesin pencari mengindeks konten Anda dengan lebih efektif.
• Pengembangan yang lebih mudah: Next.js menyediakan struktur yang terorganisir dan alat yang ampuh untuk pengembangan yang efisien.
• Fitur bawaan: Next.js dilengkapi dengan fitur-fitur seperti perutean, pengoptimalan gambar, dan API Routes.
• Skalabilitas: Next.js mudah di-deploy dan diskalakan untuk menangani peningkatan lalu lintas.

1.3 Konsep Dasar Perutean Berbasis Halaman

Perutean berbasis halaman adalah cara untuk mendefinisikan rute aplikasi Anda berdasarkan struktur direktori. Dalam Next.js, setiap file di direktori pages secara otomatis menjadi rute. Misalnya, pages/about.js akan menjadi rute /about.

2. Halaman Statis di Next.js

2.1 Membuat Halaman Statis Dasar

Untuk membuat halaman statis, cukup buat file JavaScript atau TypeScript di dalam direktori pages. File ini harus mengekspor komponen React default.

Contoh: pages/index.js

  function HomePage() {
    return (
      

        
Selamat Datang di Beranda!
        
Ini adalah halaman statis.
      
    );
  }

  export default HomePage;
  

2.2 Memahami Struktur Direktori pages

Direktori pages adalah jantung dari sistem perutean Next.js. Setiap file di direktori ini (kecuali yang diawali dengan garis bawah _ atau titik .) akan menjadi rute. Anda dapat membuat subdirektori untuk mengelompokkan halaman dan membuat rute yang lebih terstruktur.

Contoh:

• pages/index.js -> / (beranda)
• pages/about.js -> /about
• pages/blog/index.js -> /blog
• pages/blog/first-post.js -> /blog/first-post

2.3 Menggunakan Komponen React dalam Halaman Statis

Halaman Next.js adalah komponen React. Anda dapat menggunakan semua fitur React seperti state, props, hooks, dan lifecycle methods di halaman Anda.

Contoh: Menggunakan State

  import { useState } from 'react';

  function CounterPage() {
    const [count, setCount] = useState(0);

    return (
      

        
Counter
        
Count: {count}
         setCount(count + 1)}>Increment
      
    );
  }

  export default CounterPage;
  

2.4 Menambahkan CSS dan Styling ke Halaman Statis

Ada beberapa cara untuk menambahkan CSS dan styling ke halaman Next.js:

• Global Styles: Impor file CSS global di pages/_app.js.
• CSS Modules: Gunakan CSS Modules untuk mengisolasi gaya ke komponen tertentu.
• Styled Components: Gunakan Styled Components untuk menulis CSS-in-JS.
• Tailwind CSS: Gunakan Tailwind CSS, kerangka kerja CSS utilitas-first.

Contoh: Menggunakan CSS Modules

components/Button.module.css

  .button {
    background-color: blue;
    color: white;
    padding: 10px 20px;
    border: none;
    cursor: pointer;
  }
  

components/Button.js

  import styles from './Button.module.css';

  function Button({ children }) {
    return {children};
  }

  export default Button;
  

2.5 Pra-rendering Halaman Statis untuk Kinerja Optimal

Next.js secara otomatis melakukan pra-rendering halaman statis pada waktu build. Ini berarti bahwa HTML halaman dihasilkan sebelum dikirim ke browser, sehingga meningkatkan kecepatan pemuatan dan SEO. Secara default, Next.js menggunakan **Static Site Generation (SSG)** untuk semua halaman di direktori `pages` yang tidak menggunakan fitur-fitur seperti `getServerSideProps`. SSG menghasilkan HTML untuk setiap halaman pada waktu build, yang kemudian di-cache oleh CDN. Ini adalah pendekatan yang paling cepat dan efisien untuk halaman statis.

3. Rute Dinamis di Next.js

3.1 Kapan Menggunakan Rute Dinamis?

Rute dinamis digunakan ketika Anda perlu membuat rute berdasarkan data dinamis, seperti ID produk, slug posting blog, atau nama pengguna. Ini memungkinkan Anda untuk membuat satu file yang dapat menangani banyak rute yang berbeda berdasarkan parameter yang diteruskan.

3.2 Membuat Rute Dinamis dengan Kurung Siku ([])

Untuk membuat rute dinamis, gunakan kurung siku ([]) dalam nama file atau direktori di dalam direktori pages. Misalnya, pages/posts/[id].js akan menangani rute seperti /posts/1, /posts/2, dan seterusnya.

3.3 Mengakses Parameter Rute dengan useRouter

Anda dapat mengakses parameter rute dinamis menggunakan hook useRouter dari next/router.

Contoh: pages/posts/[id].js

  import { useRouter } from 'next/router';

  function PostPage() {
    const router = useRouter();
    const { id } = router.query;

    return (
      

        
Post ID: {id}
      
    );
  }

  export default PostPage;
  

3.4 Menggunakan getStaticPaths untuk Pra-render Rute Dinamis

Jika Anda ingin melakukan pra-rendering rute dinamis pada waktu build, Anda harus menggunakan fungsi getStaticPaths. Fungsi ini harus mengekspor array dari semua nilai yang mungkin untuk parameter rute dinamis. getStaticPaths memungkinkan Next.js untuk menghasilkan HTML untuk setiap rute yang ditentukan pada waktu build, sehingga meningkatkan kinerja dan SEO.

Contoh:

  export async function getStaticPaths() {
    return {
      paths: [
        { params: { id: '1' } },
        { params: { id: '2' } },
        { params: { id: '3' } },
      ],
      fallback: false,
    };
  }
  

3.5 Menggunakan getStaticProps untuk Mengambil Data

Anda dapat menggunakan fungsi getStaticProps untuk mengambil data yang diperlukan untuk halaman Anda pada waktu build. Fungsi ini dapat digunakan bersamaan dengan getStaticPaths untuk mengambil data untuk setiap rute dinamis yang di pra-render.

Contoh:

  export async function getStaticProps({ params }) {
    const id = params.id;
    const post = await fetch(`https://.../posts/${id}`).then(res => res.json());

    return {
      props: {
        post,
      },
    };
  }
  

3.6 Strategi Fallback: fallback: false, fallback: true, dan fallback: 'blocking'

Opsi fallback di getStaticPaths menentukan apa yang terjadi jika pengguna mencoba mengakses rute dinamis yang *tidak* di pra-render pada waktu build. Ada tiga opsi:

• fallback: false: Jika pengguna mencoba mengakses rute yang tidak di pra-render, mereka akan melihat halaman 404.
• fallback: true: Next.js akan melayani versi “fallback” dari halaman saat pengguna pertama kali mengunjungi rute yang tidak di pra-render. Secara bersamaan, Next.js akan menghasilkan halaman secara statis di latar belakang. Kunjungan berikutnya ke rute tersebut akan mendapatkan halaman yang sudah di-generate secara statis. Anda perlu menampilkan indikator loading atau konten placeholder saat halaman sedang di-generate di latar belakang.
• fallback: 'blocking': Mirip dengan fallback: true, tetapi Next.js akan memblokir browser sampai halaman di-generate secara statis. Ini memastikan bahwa pengguna selalu melihat HTML yang lengkap dan di-render, tetapi dapat mengakibatkan penundaan awal.

3.7 Memecahkan Masalah Umum dengan Rute Dinamis

• 404 Error: Pastikan Anda telah menyediakan semua nilai yang mungkin untuk parameter rute dinamis di getStaticPaths jika fallback: false.
• Data Tidak Tersedia: Pastikan Anda mengambil data dengan benar di getStaticProps dan menangani kasus di mana data mungkin tidak tersedia.
• Kinerja Lambat: Pertimbangkan untuk menggunakan fallback: true atau fallback: 'blocking' jika menghasilkan semua rute dinamis pada waktu build tidak mungkin.

4. Rute Bersarang di Next.js

4.1 Memahami Struktur Direktori untuk Rute Bersarang

Rute bersarang dibuat dengan menggunakan direktori di dalam direktori pages. Struktur direktori mencerminkan struktur URL.

Contoh:

• pages/blog/index.js -> /blog
• pages/blog/posts/[id].js -> /blog/posts/[id] (misalnya, /blog/posts/123)

4.2 Membuat Rute Bersarang Sederhana

Untuk membuat rute bersarang sederhana, cukup buat direktori dan file yang sesuai di dalam direktori pages.

Contoh: Membuat halaman untuk menampilkan daftar posting blog dan detail setiap posting.

• pages/blog/index.js: Menampilkan daftar posting blog.
• pages/blog/[slug].js: Menampilkan detail posting blog berdasarkan slug.

4.3 Mengakses Parameter di Rute Bersarang

Anda dapat mengakses parameter di rute bersarang dengan cara yang sama seperti rute dinamis, menggunakan hook useRouter.

Contoh: pages/blog/[slug].js

  import { useRouter } from 'next/router';

  function BlogPostPage() {
    const router = useRouter();
    const { slug } = router.query;

    return (
      

        
Blog Post: {slug}
      
    );
  }

  export default BlogPostPage;
  

4.4 Menggabungkan Rute Statis dan Dinamis dalam Rute Bersarang

Anda dapat menggabungkan rute statis dan dinamis dalam rute bersarang. Misalnya, Anda dapat memiliki rute statis /blog/about dan rute dinamis /blog/posts/[id].

4.5 Best Practices untuk Mengelola Kompleksitas Rute Bersarang

• Rencanakan Struktur Rute Anda: Sebelum mulai coding, rencanakan struktur rute Anda dengan cermat untuk memastikan organisasi dan kemudahan pemeliharaan.
• Gunakan Nama File dan Direktori yang Deskriptif: Gunakan nama file dan direktori yang jelas dan deskriptif untuk memudahkan pemahaman struktur rute.
• Pisahkan Logika Komponen: Pisahkan logika komponen dari logika perutean untuk meningkatkan modularitas dan kemudahan pengujian.
• Gunakan Hook dan Komponen yang Dapat Digunakan Kembali: Buat hook dan komponen yang dapat digunakan kembali untuk menghindari duplikasi kode dan menyederhanakan pengembangan.

5. Fitur Lanjutan Perutean Next.js

5.1 Perutean Klien dengan next/link

Komponen <Link> dari next/link digunakan untuk navigasi sisi klien. Ini memungkinkan navigasi yang cepat dan mulus antara halaman di aplikasi Anda.

Contoh:

  import Link from 'next/link';

  function HomePage() {
    return (
      

        
Selamat Datang di Beranda!
        
          Tentang Kami
        
      
    );
  }

  export default HomePage;
  

5.2 Menggunakan useRouter untuk Navigasi Terprogram

Anda dapat menggunakan hook useRouter untuk melakukan navigasi terprogram, seperti mengarahkan pengguna ke halaman tertentu setelah login atau mengirimkan formulir.

Contoh:

  import { useRouter } from 'next/router';

  function LoginPage() {
    const router = useRouter();

    const handleLogin = () => {
      // Logika login
      router.push('/dashboard');
    };

    return (
      

        
Login
        Login
      
    );
  }

  export default LoginPage;
  

5.3 Middleware di Next.js: Autentikasi, Otorisasi, dan Lainnya

Middleware memungkinkan Anda menjalankan kode sebelum permintaan diselesaikan. Ini berguna untuk tugas-tugas seperti autentikasi, otorisasi, dan pengalihan. Middleware Next.js berada di direktori `middleware.ts` atau `middleware.js` di root proyek Anda.

5.4 Menangani Kesalahan dan Halaman 404

Next.js menyediakan cara mudah untuk menangani kesalahan dan menampilkan halaman 404 khusus.

• Halaman 404: Buat file pages/404.js untuk menampilkan halaman 404 khusus.
• Penanganan Kesalahan: Gunakan Error Boundary atau tangkap kesalahan di getServerSideProps atau getStaticProps untuk menampilkan pesan kesalahan yang ramah pengguna.

5.5 Internationalization (i18n) dengan Next.js

Next.js mendukung internationalization (i18n) dengan mudah. Anda dapat menggunakan konfigurasi i18n di next.config.js untuk menentukan locale yang didukung dan locale default.

6. Optimasi SEO dengan Perutean Next.js

6.1 Judul Halaman dan Meta Deskripsi

Optimalkan judul halaman dan meta deskripsi untuk meningkatkan peringkat SEO. Gunakan komponen <Head> dari next/head untuk menambahkan atau memperbarui tag <title> dan <meta>.

Contoh:

  import Head from 'next/head';

  function HomePage() {
    return (
      

        
          
          
        
        
Selamat Datang di Beranda!
      
    );
  }

  export default HomePage;
  

6.2 Membuat Sitemap yang Optimal

Sitemap membantu mesin pencari mengindeks situs web Anda dengan lebih efisien. Buat sitemap dinamis yang menyertakan semua rute di situs web Anda.

6.3 Menggunakan Data Terstruktur

Gunakan data terstruktur untuk memberikan informasi tambahan tentang konten Anda kepada mesin pencari. Ini dapat membantu meningkatkan visibilitas situs web Anda di hasil pencarian.

6.4 Best Practices untuk SEO dengan Rute Dinamis

• Gunakan URL yang Bersih dan Deskriptif: Gunakan URL yang mudah dibaca dan dipahami oleh pengguna dan mesin pencari.
• Optimalkan Judul Halaman dan Meta Deskripsi untuk Setiap Rute Dinamis: Sesuaikan judul halaman dan meta deskripsi dengan konten halaman.
• Gunakan getStaticPaths untuk Pra-render Rute Penting: Pra-rendering meningkatkan kinerja dan SEO.

7. Kesimpulan: Menguasai Perutean Next.js untuk Aplikasi Web yang Sukses

Perutean Next.js adalah alat yang ampuh untuk membangun aplikasi web yang terstruktur, berkinerja tinggi, dan ramah SEO. Dengan memahami konsep dasar halaman statis, rute dinamis, rute bersarang, dan fitur lanjutan seperti perutean klien, middleware, dan internasionalisasi, Anda dapat membangun aplikasi web yang luar biasa dengan Next.js. Jangan lupa untuk selalu mempertimbangkan optimasi SEO untuk meningkatkan visibilitas situs web Anda di mesin pencari.