Styling (CSS, Tailwind)

A Next.js natívan támogatja a CSS Modules-t – lokális scope-ú stílusok, névütközés nélkül:

10. Styling (CSS, Tailwind)

CSS Modules

A Next.js natívan támogatja a CSS Modules-t – lokális scope-ú stílusok, névütközés nélkül:

/* components/Button.module.css */
.button {
  background: #0070f3;
  color: white;
  padding: 0.5rem 1rem;
  border-radius: 0.25rem;
}

.button:hover {
  background: #0051a8;
}

// components/Button.tsx
import styles from './Button.module.css'

export function Button({ children }: { children: React.ReactNode }) {
  return <button className={styles.button}>{children}</button>
}

Tailwind CSS (ajánlott)

A create-next-app alapból konfigurálja a Tailwindet. Nincs szükség külön beállításra:

// Tailwind osztályok direktbe
export default function Card({ title, description }: CardProps) {
  return (
    <div className="rounded-lg border border-gray-200 p-6 shadow-sm hover:shadow-md transition-shadow">
      <h2 className="text-xl font-semibold text-gray-900 mb-2">{title}</h2>
      <p className="text-gray-600 text-sm leading-relaxed">{description}</p>
    </div>
  )
}

Globális stílusok

/* app/globals.css */
@tailwind base;
@tailwind components;
@tailwind utilities;

/* Egyedi globális stílusok */
:root {
  --color-primary: #0070f3;
  --color-background: #ffffff;
}

body {
  background: var(--color-background);
}

CSS-in-JS

Ha CSS-in-JS könyvtárat (pl. styled-components, Emotion) használsz, konfigurálni kell a szerver oldali rendereléshez. Tailwind általában jobb választás Next.js-ben.

next/font – font optimalizáció

// app/layout.tsx
import { Inter, Roboto_Mono } from 'next/font/google'

const inter = Inter({
  subsets: ['latin'],
  variable: '--font-inter',
})

const robotoMono = Roboto_Mono({
  subsets: ['latin'],
  variable: '--font-roboto-mono',
})

export default function RootLayout({ children }) {
  return (
    <html lang="hu" className={`${inter.variable} ${robotoMono.variable}`}>
      <body>{children}</body>
    </html>
  )
}

A next/font automatikusan:

Self-hostolja a Google Fontokat (nincs külső kérés)
Optimalizálja a betöltést (font-display: swap)
Elkerüli a layout shift-et (CLS)

📝 Összefoglaló – 10. fejezet

CSS Modules: lokális scope, névütközés-mentes
Tailwind CSS: ajánlott, create-next-app alapból konfigurálja
next/font: self-hosted fontok, CLS-mentes betöltés