Cara Membuat Routing Pada Next.js App Router

Hallo teman-teman! Dalam artikel ini, kita akan membahas langkah-langkah yang perlu kamu ketahui untuk membuat routing dengan mudah menggunakan Next JS App Router.

Routing adalah konsep penting dalam dunia pengembangan web yang memungkinkan kamu mengarahkan pengguna dari satu halaman ke halaman lainnya dengan lancar dan teratur.

Yap, langsung saja kita eksekusi🚀

Menentukan Route

Untuk membuat atau menentukan routing pada Next JS App Router itu sangat mudah sekali. Dalam contoh kali ini, kita akan membuat routing yang isinya berupa halaman detail product atau kelas. Ikuti langkah-langkah berikut:

Langkah Pertama: Membuat Folder

Saat kita ingin membuat routing kita harus membuat folder terlebih dahulu di dalam folder app. Ketika kamu membuat folder, maka folder tersebut akan mendefinisikan nama routing yang akan kamu gunakan.

Dalam contoh kali ini, kita akan membuat folder bernama detail:

Namun, jika hanya membuat folder saja itu belum cukup untuk membuat sebuah routing. Mari kita lanjut langkah selanjutnya🚀

Langkah Kedua: Membuat File page.tsx

Setelah kita membuat folder, selanjutnya adalah kita harus membuat file bernama page.tsx di dalam folder detail.

Perlu diingat bahwa ketika ingin mendefinisikan routing atau pages baru, kita harus beri nama file page.tsx pada folder. Jika kita memberi nama file selain page.tsx maka file tersebut hanya akan menjadi komponen biasa dan tidak akan menjadi sebuah routing atau pages.

Langkah Ketiga: Membuat Konten

Setelah kita selesai membuat routing, Sekarang mari kita mencoba membuat konten dari routing tersebut. Kamu bisa langsung copy kode di bawah ini:

import React from 'react'

const DetailPages = () => {
  return (
    <section className="h-screen w-full flex flex-col justify-center items-center">
      <div className='bg-gray-50 w-[1000px] flex px-8 py-12 space-x-4'>
        <div className='w-[500px] flex justify-center'>
          <img src="<https://buildwithangga.com/storage/assets/thumbnails/thumbnail%20kelas%20web%20development%20microservice%20buildwith%20angga.png>" className='w-[300px] h-[200px]' alt="img" />
        </div>
        <div className='w-[500px]'>
          <h3 className='font-semibold text-3xl'>Kelas Online
            Web Development Microservice: Website Kelas Online</h3>
          <p className='text-slate-400 mt-2'>Learn how to build a real project from scratch</p>
          <div className='mt-6 flex items-center space-x-3'>
            <button className='bg-[#335EF7] px-6 py-2 rounded-full text-white font-semibold'>Beli Kelas</button>
            <button className='bg-[#E5E9F2] px-6 py-2 rounded-full text-gray-700 font-semibold'>Lihat Benefit</button>
          </div>
        </div>
      </div>
    </section>
  )
}

export default DetailPages

Sesuaikan isi kontenmu sesuai kebutuhan ya. Setelah kita membuat konten, sekarang kamu bisa akses routing atau pages baru kamu di http://localhost:3000/detail.

Berikut adalah gambar review dari kode di atas:

Gimana, mudah bukan membuat routing pada Next JS App Router? Kamu sekarang dapat membuat routing sesuai kebutuhan kamu.

Kesimpulan

Next JS App Router menawarkan kinerja yang tinggi dengan pendekatan yang optimal dalam mengelola routing. Dengan kemampuan ini, aplikasi web kamu dapat berjalan lebih cepat dan responsif. Dukungan yang diberikan untuk prerendering secara alami membantu aplikasi web memuat halaman-halaman dengan cepat, meningkatkan pengalaman pengguna dan optimasi mesin pencari.

Membuat routing dalam aplikasi web menggunakan Next JS App Router sebenarnya tidak sesulit yang dibayangkan, kan? Dalam artikel ini, kamu telah belajar langkah-langkah dasar untuk membuat routing yang lancar dan teratur.

Buat kamu yang ingin mempelajari fitur-fitur selanjutnya, kamu bisa ikut kelas di BuildWithAngga. Salah satunya yaitu, Kelas Online Gratis NextJS Basic ataupun yang berupa project base yaitu, Kelas Online Web Development Microservice: Website Kelas Online.

So, ayo kita menjadi expert bersama BuildWithAngga🚀

See you guys!