CSS၊ Images နှင့် Fonts

UI လှဖို့ CSS ရေးတတ်ရုံနဲ့ မပြီးပါဘူး။ ပုံအကြီးကြီးတင်လိုက်လို့ page နှေးသွားတာ၊ font ဝင်လာမှ စာတွေခုန်သွားတာမျိုးကို production မှာ ရှောင်ရပါတယ်။ Next.js က ဒီအလုပ်တွေကို framework level မှာ ကူညီပေးထားပါတယ်။

နားလည်ထားရမယ့် အချက်

globals.css ကို root layout မှ import လုပ်ပြီး reset၊ color token နဲ့ typography လို site-wide style ထားပါ။ Component-specific style ကို *.module.css နဲ့ရေးရင် class name တိုက်မိခြင်းမရှိပါဘူး။ next/image က image size သိထားလို့ layout shift ကိုကာကွယ်ပြီး သင့်တော်တဲ့ size နဲ့ format ပို့ပေးနိုင်ပါတယ်။ next/font က font file ကို build အတွင်း optimize လုပ်ပြီး external request နည်းစေပါတယ်။

အတူတူ စမ်းရေးကြည့်မယ်

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>
  );
}

Code က ဘယ်လိုအလုပ်လုပ်သလဲ

Image မှာ width၊ height နဲ့ အဓိပ္ပာယ်ရှိတဲ့ alt ပါပါတယ်။ CSS Module class ကို styles.cover နဲ့ယူထားလို့ တခြား component ရဲ့ cover class နဲ့ မတိုက်ပါဘူး။

အရွယ်အစားတည်ငြိမ်ပြီး optimized image ပါသော note card ပေါ်လာမည်။

Next.js — Image Optimization — Next.js