Styling di Next.js | Dasar Next.js untuk Aplikasi Web Modern | Mahir.dev | Mahir.dev Academy

Styling di Next.js | Dasar Next.js untuk Aplikasi Web Modern | Mahir.dev | Mahir.dev Academy

tsx

// src/app/layout.tsx
import './globals.css'; // Impor CSS globalmu di sini!
// ... (kode layout lainnya) ...
 
export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="id">
      <body>
        {/* ... Header, Navbar ... */}
        {children}
        {/* ... Footer ... */}
      </body>
    </html>
  );
}

css

/* src/app/globals.css */
body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  line-height: 1.6;
  background-color: #f4f6f8;
  color: #333;
}
 
a {
  color: #0070f3;
  text-decoration: none;
}
 
a:hover {
  text-decoration: underline;
}
 
* {
  box-sizing: border-box;
}

css

/* Nama class .container dan .tombol ini cuma lokal buat modul ini */
.container {
  padding: 1rem;
  background-color: #e0e0e0;
}
 
.tombol {
  background-color: rebeccapurple;
  color: white;
  padding: 0.5em 1em;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}
 
.tombol:hover {
  background-color: darkorchid;
}

tsx

// src/app/components/TombolUnik.tsx
"use client"; // Jika tombol ini punya event handler
 
import React from 'react';
import styles from './TombolUnik.module.css'; // Impor CSS Module sebagai objek 'styles'
 
interface TombolUnikProps {
  children: React.ReactNode;
  onClick?: () => void;
}
 
export default function TombolUnik({ children, onClick }: TombolUnikProps) {
  return (
    <div className={styles.container}> {/* Pake styles.container */}
      <button className={styles.tombol} onClick={onClick}> {/* Pake styles.tombol */}
        {children}
      </button>
    </div>
  );
}

Cara Kerja:
1. Pastikan Tailwind udah ke-setup di proyekmu (file tailwind.config.ts atau .js, dan postcss.config.js udah ada, dan globals.css udah ngimpor layer Tailwind).
2. Kamu tinggal ngerangkai utility class Tailwind langsung di atribut className elemen JSX-mu.

Contoh (diambil dari Studi Kasus Toko Kue kita):

tsx

// src/app/components/kartu-kue.tsx
// ... (import) ...
export default function KartuKue({ kue }: KartuKueProps) {
  return (
    <Link href={`/kue/${kue.id}`} 
          className="block group border border-gray-200 rounded-lg shadow-sm 
                     hover:shadow-lg transition-shadow duration-300 bg-white overflow-hidden">
      <div className="relative w-full h-48">
        <Image
          src={kue.gambarUrl}
          alt={kue.nama}
          fill
          style={{ objectFit: 'cover' }}
          sizes="(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 33vw"
        />
      </div>
      <div className="p-4">
        <h3 className="text-lg font-semibold text-gray-800 group-hover:text-pink-600 transition-colors">
          {kue.nama}
        </h3>
        {/* ... sisa JSX dengan utility Tailwind ... */}
      </div>
    </Link>
  );
}

Kelebihan dan Kekurangan: Sama kayak yang udah kita bahas di panduan Tailwind. Intinya, development cepet, desain konsisten, tapi HTML bisa jadi "rame".

Cara Kerja (Konsep Umum): Library CSS-in-JS (kayak Styled Components atau Emotion) nyediain cara buat bikin komponen React yang udah "nempel" sama style-nya, seringkali pake template literal JavaScript.
Setup di Next.js App Router: Karena banyak library CSS-in-JS butuh akses ke "runtime" CSS di sisi klien, dan App Router defaultnya Server Components, penggunaannya butuh sedikit perhatian ekstra.
- Komponen yang pake CSS-in-JS harus jadi Client Component (ditandain "use client";).
- Kamu mungkin perlu ngesetup "Style Registry" biar style-nya bisa di-extract dan dikirim dengan bener pas Server-Side Rendering (SSR). Ini agak advance, jadi selalu cek dokumentasi resmi Next.js dan library CSS-in-JS pilihanmu buat cara setup yang bener di App Router.

Contoh Konseptual (pake Styled Components, asumsi setup udah bener):

tsx

// src/app/components/TombolStyled.tsx
"use client"; // Harus client component
 
import React from 'react';
import styled from 'styled-components';
 
interface TombolGayaProps {
  $primer?: boolean; // Pake $ buat nandain ini prop buat styling, bukan prop HTML asli
}
 
const StyledButton = styled.button<TombolGayaProps>`
  background-color: ${props => (props.$primer ? 'dodgerblue' : 'lightgray')};
  color: ${props => (props.$primer ? 'white' : 'black')};
  padding: 10px 20px;
  border-radius: 5px;
  border: none;
  cursor: pointer;
  font-weight: bold;
 
  &:hover {
    opacity: 0.8;
  }
`;
 
export default function TombolStyled({ primer, children }: TombolGayaProps & { children: React.ReactNode }) {
  return <StyledButton $primer={primer}>{children}</StyledButton>;
}
 
// Cara pake:
// <TombolStyled primer>Tombol Primer</TombolStyled>
// <TombolStyled>Tombol Biasa</TombolStyled>

Kelebihan: Style scoped otomatis, gampang bikin style dinamis berdasarkan props/state.
Kekurangan: Bisa nambahin runtime overhead, butuh library tambahan, setup di Next.js App Router mungkin perlu langkah ekstra.

Cara Kerja: Atribut style nerima objek JavaScript, bukan string CSS. Properti CSS-nya pake camelCase.

tsx

<div style={{ 
  backgroundColor: 'lightblue', 
  padding: '20px', 
  fontSize: '18px',
  borderBottomLeftRadius: '10px' // Contoh camelCase
}}>
  Konten dengan style inline.
</div>

Kapan Dipake?
- SANGAT JARANG buat styling utama.
- Mungkin buat style yang bener-bener dinamis banget dan nilainya diitung dari state atau props yang kompleks (misal, posisi absolut elemen yang diitung JavaScript).
- Atau buat override kecil yang sangat spesifik dan cuma berlaku di satu tempat itu aja.
Kekurangan: Sama kayak inline style di HTML biasa (susah maintain, gak reusable, spesifisitas tinggi, nyampur sama JSX). Hindari sebisa mungkin!