Apa itu Component di Next.js?

Di Next.js, component adalah blok bangunan utama dari antarmuka pengguna (UI). Bisa dibilang, setiap tampilan yang teman-teman lihat di halaman web—seperti header, tombol, form, atau daftar artikel—dibuat dari component.

Component membantu kita:

• Membagi UI menjadi bagian kecil yang mudah dikelola
• Membuat kode lebih reusable, jadi tidak menulis ulang kode yang sama berulang kali
• Meningkatkan readability, sehingga kode lebih mudah dibaca dan dipelihara

Di Next.js, component biasanya ditulis menggunakan React, karena Next.js dibangun di atas React.

Jenis Component di Next.js

Ada beberapa cara membuat component di Next.js (React):

a. Functional Component

Ini cara paling umum dan modern. Kita menggunakan fungsi JavaScript biasa yang mengembalikan JSX.

Contoh:

// components/Button.js
export default function Button({ label, onClick }) {
  return (
    <button onClick={onClick} className="bg-blue-500 text-white px-4 py-2 rounded">
      {label}
    </button>
  );
}

• label dan onClick adalah props (data yang dikirim ke component)
• JSX adalah sintaks mirip HTML yang akan dirender di browser

b. Class Component

Ini cara lama (pre-Hooks). Sekarang jarang digunakan, tapi masih bisa.

import React, { Component } from 'react';

class Button extends Component {
  render() {
    const { label, onClick } = this.props;
    return (
      <button onClick={onClick} className="bg-blue-500 text-white px-4 py-2 rounded">
        {label}
      </button>
    );
  }
}

export default Button;

Kelemahan: lebih verbose dan tidak sefleksibel functional component modern dengan hooks.

Component dengan Props

Props adalah cara kita mengirim data dari parent component ke child component.

Contoh penggunaan:

// components/Card.js
export default function Card({ title, description }) {
  return (
    <div className="border p-4 rounded shadow">
      <h3 className="font-bold text-lg">{title}</h3>
      <p>{description}</p>
    </div>
  );
}

// pages/index.js
import Card from '../components/Card';

export default function Home() {
  return (
    <div className="p-8">
      <Card title="Hello World" description="Ini contoh card di Next.js" />
      <Card title="Next.js Component" description="Reusable component itu powerful!" />
    </div>
  );
}

Hasilnya, kita bisa menggunakan satu component berulang-ulang dengan data berbeda, tanpa menulis ulang kode HTML.

Component dengan State

Kadang, component perlu menyimpan data sementara (misalnya tombol like, input form). Di functional component, kita pakai React useState hook.

import { useState } from 'react';

export default function Counter() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Tambah</button>
    </div>
  );
}

• useState(0) → 0 adalah nilai awal
• count → nilai saat ini
• setCount → fungsi untuk update state

Nested Component

Component bisa dipakai di dalam component lain. Ini sangat powerful untuk membuat UI kompleks.

function Header() {
  return <h1>My Website</h1>;
}

function Footer() {
  return <footer>© 2025 Kurnia Andi</footer>;
}

export default function Layout({ children }) {
  return (
    <div>
      <Header />
      <main>{children}</main>
      <Footer />
    </div>
  );
}

// pages/index.js
import Layout from '../components/Layout';

export default function Home() {
  return (
    <Layout>
      <p>Selamat datang di halaman utama!</p>
    </Layout>
  );
}

Dengan ini, kita bisa membuat template halaman yang reusable, tinggal ganti children saja.

Styling Component

Di Next.js, ada beberapa cara styling component:

1. CSS Modules → file Button.module.css
2. Tailwind CSS → pakai class utility langsung di JSX
3. Styled-components → CSS in JS

Contoh dengan CSS Modules:

/* Button.module.css */
.btn {
  background-color: blue;
  color: white;
  padding: 10px 20px;
  border-radius: 5px;
}
import styles from './Button.module.css';

export default function Button({ label }) {
  return <button className={styles.btn}>{label}</button>;
}

Kesimpulan

• Component adalah blok bangunan UI di Next.js
• Bisa dibuat functional (modern) atau class (lama)
• Bisa menerima props dan menyimpan state
• Bisa di-nesting untuk membuat layout kompleks
• Styling bisa menggunakan CSS Modules, Tailwind, atau styled-components

Dengan memahami component, kita bisa membangun aplikasi Next.js yang terstruktur, reusable, dan mudah dipelihara.