Static Assets & CSS Modules — CompileDaily Study

Penjelasan

File statis (gambar, font, favicon) disimpan di folder public/ di root project, diakses lewat path dari root (mis. public/logo.png diakses sebagai /logo.png, TANPA menulis /public/). Untuk styling per komponen tanpa bentrok nama class antar file, Next.js mendukung CSS Modules — file bernama *.module.css yang class-nya otomatis di-scope unik saat di-import.

Contoh Konsep

/* KartuProduk.module.css */
.kartu {
    border: 1px solid #ddd;
    border-radius: 8px;
}

// KartuProduk.js
import styles from './KartuProduk.module.css';
import Image from 'next/image';

export default function KartuProduk() {
    return (
        <div className={styles.kartu}>
            <Image src="/produk/kaos.jpg" alt="Kaos" width={200} height={200} />
        </div>
    );
}

Praktikum

Buat Panel.module.css dengan class .panel (padding dan border). Buat komponen Panel.js yang meng-import styles dari file itu, memakai className={styles.panel} pada elemen pembungkusnya.

Editor Latihan

Ketik/edit bebas di sini untuk latihan — kode ini tidak dijalankan.

Tips

Nama class hasil CSS Modules OTOMATIS diubah jadi unik saat di-build (mis. .kartu jadi KartuProduk_kartu__a1b2c) — inilah yang mencegah bentrok nama class antar file CSS berbeda, kamu tidak perlu memikirkan penamaan class yang unik secara manual di seluruh project.