Dynamic Routes memungkinkan Anda membuat rute dinamis di Next.js yang dapat menangani URL dengan berbagai nilai parameter. Ini sangat berguna untuk membuat halaman yang dinamis berdasarkan data yang berasal dari server atau sumber eksternal. Dalam artikel ini, kita akan membahas cara membuat Dynamic Routes di Next.js menggunakan TypeScript.

Langkah 1: Membuat Folder dan File

Mulailah dengan membuat folder dan file sesuai dengan struktur proyek Next.js Anda. Misalnya, kita akan membuat halaman dinamis untuk menampilkan informasi produk.

1. Buat folder dengan nama pages di dalam direktori proyek Anda jika belum ada.
2. Di dalam folder pages, buat subfolder dengan nama products.
3. Di dalam subfolder products, buat file dengan nama [id].tsx. Nama file ini harus dimulai dengan kurung siku [] untuk menunjukkan bahwa ini adalah dynamic route.

Langkah 2: Coding Halaman Dinamis

Dalam file [id].tsx, Anda dapat menambahkan kode TypeScript untuk menampilkan informasi produk berdasarkan ID yang diterima dari URL. Berikut adalah contoh kode:

// pages/products/[id].tsx

import { useRouter } from 'next/router';
import { GetServerSideProps, GetServerSidePropsContext } from 'next';

interface Product {
  id: string;
  name: string;
  description: string;
}

interface ProductPageProps {
  product: Product;
}

const ProductPage = ({ product }: ProductPageProps) => {
  const router = useRouter();

  if (router.isFallback) {
    return <div>Loading...</div>;
  }

  return (
    <div>
      <h1>Product Details</h1>
      <p>ID: {product.id}</p>
      <p>Name: {product.name}</p>
      <p>Description: {product.description}</p>
    </div>
  );
};

export default ProductPage;

export const getServerSideProps: GetServerSideProps = async (
  context: GetServerSidePropsContext
) => {
  // Mengambil ID produk dari URL
  const { id } = context.query;

  // Simulasi pengambilan data produk dari database atau API
  const fakeProductData: Product[] = [
    { id: '1', name: 'Product 1', description: 'Description 1' },
    { id: '2', name: 'Product 2', description: 'Description 2' },
    { id: '3', name: 'Product 3', description: 'Description 3' },
  ];

  // Temukan produk yang sesuai berdasarkan ID
  const product = fakeProductData.find((p) => p.id === id);

  return {
    props: {
      product,
    },
  };
};

Langkah 4: Menjalankan Aplikasi

Simpan perubahan dan jalankan aplikasi Next.js Anda dengan perintah npm run dev.

Anda sekarang dapat mengakses halaman produk dinamis dengan membuka URL seperti /products/1, /products/2, dll., di mana angka setelah /products/ akan menjadi ID produk yang dipasskan ke halaman [id].tsx.

Dengan langkah-langkah di atas, Kita telah membuat dynamic route di Next.js menggunakan TypeScript.

Halaman ini dapat menampilkan informasi produk yang sesuai dengan ID yang diberikan melalui URL.