CSS, Images, and Fonts

Knowing how to write CSS isn't enough to make a UI look good. In production, you need to avoid things like a page slowing down because of an oversized image, or text jumping around when a font loads in. Next.js helps with these at the framework level.

The key idea

Import globals.css from the root layout, and keep site-wide styles like resets, color tokens, and typography there. Writing component-specific styles as *.module.css avoids class name collisions. next/image knows the image size ahead of time, so it prevents layout shift and can serve the right size and format. next/font optimizes font files at build time, cutting down on external requests.

Let's try it together

import Image from "next/image";
import styles from "./note-card.module.css";

export function NoteCard() {
  return (
    <article className={styles.card}>
      <Image
        src="/notebook.jpg"
        width={640}
        height={360}
        alt="စားပွဲပေါ်ရှိ မှတ်စုစာအုပ်"
        className={styles.cover}
      />
      <h2>ဒီနေ့လေ့လာခဲ့တာ</h2>
    </article>
  );
}

How the code works

Image includes width, height, and a meaningful alt. The CSS Module class is referenced as styles.cover, so it won't clash with a cover class in another component.

A note card appears with a stable size and an optimized image.

Next.js — Image Optimization — Next.js