Performance and Accessibility

Relax. We'll talk through this in plain words — no textbook voice.

What you'll walk away with

Think deliberately about keeping the client bundle small
Understand the impact on Core Web Vitals
Design with keyboard and screen reader users in mind

Being fast on your own laptop with great Wi-Fi isn't enough. A production app has to work for older phones, slow networks, and people who can't use a mouse.

The key idea

Defaulting to Server Components and only making the interactive leaves Client Components is the best starting point for cutting JavaScript. Use next/image, next/font, route code splitting, and streaming. Check semantic heading order, forms with labels, real buttons, visible focus, sufficient color contrast, and keyboard navigation. Don't rely on Lighthouse alone to measure performance — look at production field data and Core Web Vitals too.

Let's try it together

tsx

"use client";
import { useState } from "react";

export function SaveButton() {
  const [status, setStatus] = useState("idle");
  return (
    <div>
      <button type="button" onClick={() => setStatus("saved")}>
        မှတ်စုသိမ်းမယ်
      </button>
      <p aria-live="polite">
        {status === "saved" ? "သိမ်းပြီးပါပြီ" : ""}
      </p>
    </div>
  );
}

How the code works

Because the button is a real HTML button rather than a div with onClick, keyboard, focus, and screen reader behavior work by default. aria-live tells screen readers when the save status changes.

You should see

The app works with both mouse and keyboard, and assistive technology can announce save status.

5-Minute Try-It

Navigate your homepage using only the keyboard, then fix any spots where focus isn't visible, any input missing a label, and any broken heading order.

Next.js — Production Checklist — Next.js

Easy traps

Using a clickable div in place of a button
Assuming a Lighthouse score of 100 means the whole user experience is fine

Exercise

Navigate your homepage using only the keyboard, then fix any spots where focus isn't visible, any input missing a label, and any broken heading order.

You'll know it worked when: The app works with both mouse and keyboard, and assistive technology can announce save status.