Performance, Testing and Deployment

Performance built in

import Image from "next/image";
<Image src="/hero.webp" alt="Dashboard preview" width={1200} height={700} priority />

next/image resizes, lazy-loads and serves modern formats. next/font self-hosts fonts without layout shift.

Other wins:

• Keep client components small; heavy libraries in client components ship to every visitor.
• Use loading.jsx files for instant loading states and Suspense to stream slow parts.
• Dynamic import rarely used heavy components: const Chart = dynamic(() => import("./Chart")).

Error handling

error.jsx in a route segment catches rendering errors and shows a friendly message with a retry button; not-found.jsx customises 404s.

Testing

• Unit/component tests with Vitest (or Jest) and React Testing Library:

import { render, screen, fireEvent } from "@testing-library/react";
test("counter increments", () => {
  render(<Counter />);
  fireEvent.click(screen.getByRole("button"));
  expect(screen.getByRole("button")).toHaveTextContent("Clicked 1 times");
});

• End-to-end tests with Playwright for key journeys (see Software Testing & QA).

Test behaviour the user sees (roles, labels, text), not implementation details.

Deploying

Vercel (from the creators of Next.js) deploys a GitHub repository automatically, with preview URLs per pull request. See the Deploy to Vercel track. Next.js also runs on Render, Railway, Fly.io or any Node server via next build && next start, or as a Docker container.

Environment variables: values needed only on the server stay unprefixed; anything prefixed NEXT_PUBLIC_ is bundled into the browser code and is public. Never prefix secrets.

Final project

Build a portfolio and lead-generation site in Next.js: server-rendered project pages from an API with metadata for SEO, a filterable project list (client component), a contact form using a server action with Zod validation and rate limiting, optimised images, loading and error states, component tests and one Playwright journey, deployed with preview environments.

Check yourself

• Why keep client components small?
• What does the NEXT_PUBLIC_ prefix mean for a variable?
• What should component tests target?