Performance

Ship less client JavaScript and avoid waiting in series.

Written for a Next.js 15 App Router application. Guidance for Next.js 16 bundled docs or /_next/mcp does not apply to 15.5.27.

Next.js linking and navigating

What this describes

Charts

Rules

NX-PERF-001 recommended

Split a heavy client view

Use next/dynamic for a client chart that is not needed on first paint. Do not dynamic-import the whole layout.

NX-PERF-002 required

Do not embed a large document in the page

A large PDF opens from a link. The page does not iframe it at full size.

NX-PERF-003 recommended

Keep the font stack small

Use Aptos, Calibri, Roboto, and Open Sans. Do not add another display font.

NX-PERF-004 recommended

Let a slow region stream

A Suspense boundary around one panel is enough. Do not block the navigation on it.

Correct

const Chart = dynamic(() => import('./chart'), { loading: () => <p>Loading chart…</p> });

Incorrect

<iframe src="/guide.pdf" style={{ height: 4000 }} />

A large PDF inside the page delays the screen. Link to the file instead.

Checklist

A large file is a link.
A new client component is no larger than the interaction.
Fonts stay on the documented stack.

AI instructions

You are implementing this practice in the current project. Do not install a design-system package and do not import one.
TASK: Apply Performance.
Ship less client JavaScript and avoid waiting in series.
APPLIES TO: Written for a Next.js 15 App Router application. Guidance for Next.js 16 bundled docs or /_next/mcp does not apply to 15.5.27.
RULES:
- NX-PERF-001 [recommended] Split a heavy client view. Use next/dynamic for a client chart that is not needed on first paint. Do not dynamic-import the whole layout.
- NX-PERF-002 [required] Do not embed a large document in the page. A large PDF opens from a link. The page does not iframe it at full size.
- NX-PERF-003 [recommended] Keep the font stack small. Use Aptos, Calibri, Roboto, and Open Sans. Do not add another display font.
- NX-PERF-004 [recommended] Let a slow region stream. A Suspense boundary around one panel is enough. Do not block the navigation on it.
CORRECT:
const Chart = dynamic(() => import('./chart'), { loading: () => <p>Loading chart…</p> });
INCORRECT:
<iframe src="/guide.pdf" style={{ height: 4000 }} />
A large PDF inside the page delays the screen. Link to the file instead.
CHECK:
- [ ] A large file is a link.
- [ ] A new client component is no larger than the interaction.
- [ ] Fonts stay on the documented stack.
SOURCE: Next.js linking and navigating https://nextjs.org/docs/app/getting-started/linking-and-navigating
Build the interface with the project’s own markup. Match the documented colors and elements when a control is involved.
Do not upgrade Next.js to obtain bundled docs. Do not claim a WCAG audit. Do not add secrets.