Next.js Performance
Expert guidance for optimizing Next.js applications.
Quick Reference
| Concern |
Solution |
Impact |
| Images |
next/image with sizing |
CLS prevention, auto-optimization |
| Fonts |
next/font |
No layout shift, self-hosted |
| Heavy components |
next/dynamic |
Reduced initial bundle |
| Data caching |
fetch options (revalidate) |
Reduced server load |
| Client navigation |
Link component |
Instant transitions |
| Bundle size |
Tree shaking, no unused deps |
Faster JS loading |
What Do You Need?
- Image optimization - next/image usage, sizing, formats
- Font loading - next/font, preloading
- Code splitting - Dynamic imports, route splitting
- Caching - ISR, revalidation, cache strategies
- Navigation - Link usage, prefetching
Specify a number or describe your performance concern.
Routing
| Response |
Reference to Read |
| 1, "image", "img", "optimization", "cls" |
images.md |
| 2, "font", "layout shift", "typography" |
fonts.md |
| 3, "dynamic", "import", "lazy", "split" |
code-splitting.md |
| 4, "cache", "revalidate", "isr", "fetch" |
caching.md |
| 5, "navigation", "link", "prefetch" |
navigation.md |
Essential Principles
Optimize images: Use next/image with width/height for all images. Prevents CLS and enables automatic optimization.
Self-host fonts: Use next/font to eliminate requests to external font services and prevent layout shift.
Dynamic import heavy code: Use next/dynamic for components that are heavy or not immediately visible.
Client-side navigation: Use Link component for all internal links. Enables instant page transitions.
Cache strategically: Use appropriate fetch caching (force-cache, no-store, revalidate) based on data freshness needs.
Common Performance Issues
| Issue |
Severity |
Impact |
Fix |
Using <img> instead of next/image |
High |
CLS, no optimization |
Use next/image |
| External fonts |
Medium |
Layout shift, extra request |
Use next/font |
| Large initial bundle |
High |
Slow initial load |
Dynamic imports |
| No caching on static data |
Medium |
Unnecessary server load |
Add revalidate |
Using <a> instead of Link |
High |
Full page reload |
Use Link |
| No priority hints |
Low |
Delayed LCP |
Use priority prop |
Code Patterns
Images
// Good: next/image with sizing
import Image from 'next/image'
<Image
src="/avatar.jpg"
width={100}
height={100}
alt="Avatar"
priority // For above-fold images
/>
Fonts
// Good: next/font
import { Inter } from 'next/font/google'
const inter = Inter({ subsets: ['latin'] })
export default function RootLayout({ children }: { children: ReactNode }) {
return <html className={inter.className}>{children}</html>
}
Dynamic Imports
// Good: Dynamic import for heavy component
import dynamic from 'next/dynamic'
const HeavyChart = dynamic(() => import('./HeavyChart'), {
loading: () => <div>Loading...</div>,
ssr: false, // If client-only
})
Caching
// Good: Appropriate caching
export const revalidate = 3600 // Revalidate every hour
async function getData() {
const res = await fetch('https://api.example.com/data', {
next: { revalidate: 3600 } // or { revalidate: 0 } for no cache
})
return res.json()
}
Reference Index
| File |
Topics |
| images.md |
next/image, sizing, priority, formats |
| fonts.md |
next/font, Google fonts, local fonts |
| code-splitting.md |
Dynamic imports, route splitting |
| caching.md |
fetch options, ISR, revalidatePath |
| navigation.md |
Link component, prefetching, scroll |
Success Criteria
Performance is good when:
- All images use next/image with proper sizing
- Fonts loaded with next/font (no layout shift)
- Heavy components dynamically imported
- Static data cached appropriately (revalidate set)
- All internal links use Link component
- LCP < 2.5s, FID < 100ms, CLS < 0.1
Converted and distributed by TomeVault — claim your Tome and manage your conversions.
1---2name: nextjs-performance3description: Next.js performance optimizations including next/image, next/font, dynamic imports, caching strategies, and bundle optimization. Use when optimizing Next.js apps for speed or Core Web Vitals. Use when this capability is needed.4---56# Next.js Performance78Expert guidance for optimizing Next.js applications.910## Quick Reference1112| Concern | Solution | Impact |13|---------|----------|--------|14| Images | next/image with sizing | CLS prevention, auto-optimization |15| Fonts | next/font | No layout shift, self-hosted |16| Heavy components | next/dynamic | Reduced initial bundle |17| Data caching | fetch options (revalidate) | Reduced server load |18| Client navigation | Link component | Instant transitions |19| Bundle size | Tree shaking, no unused deps | Faster JS loading |2021## What Do You Need?22231. **Image optimization** - next/image usage, sizing, formats242. **Font loading** - next/font, preloading253. **Code splitting** - Dynamic imports, route splitting264. **Caching** - ISR, revalidation, cache strategies275. **Navigation** - Link usage, prefetching2829Specify a number or describe your performance concern.3031## Routing3233| Response | Reference to Read |34|----------|-------------------|35| 1, "image", "img", "optimization", "cls" | [images.md](./references/images.md) |36| 2, "font", "layout shift", "typography" | [fonts.md](./references/fonts.md) |37| 3, "dynamic", "import", "lazy", "split" | [code-splitting.md](./references/code-splitting.md) |38| 4, "cache", "revalidate", "isr", "fetch" | [caching.md](./references/caching.md) |39| 5, "navigation", "link", "prefetch" | [navigation.md](./references/navigation.md) |4041## Essential Principles4243**Optimize images**: Use next/image with width/height for all images. Prevents CLS and enables automatic optimization.4445**Self-host fonts**: Use next/font to eliminate requests to external font services and prevent layout shift.4647**Dynamic import heavy code**: Use next/dynamic for components that are heavy or not immediately visible.4849**Client-side navigation**: Use Link component for all internal links. Enables instant page transitions.5051**Cache strategically**: Use appropriate fetch caching (force-cache, no-store, revalidate) based on data freshness needs.5253## Common Performance Issues5455| Issue | Severity | Impact | Fix |56|-------|----------|--------|-----|57| Using `<img>` instead of next/image | High | CLS, no optimization | Use next/image |58| External fonts | Medium | Layout shift, extra request | Use next/font |59| Large initial bundle | High | Slow initial load | Dynamic imports |60| No caching on static data | Medium | Unnecessary server load | Add revalidate |61| Using `<a>` instead of Link | High | Full page reload | Use Link |62| No priority hints | Low | Delayed LCP | Use priority prop |6364## Code Patterns6566### Images67```typescript68// Good: next/image with sizing69import Image from 'next/image'7071<Image72 src="/avatar.jpg"73 width={100}74 height={100}75 alt="Avatar"76 priority // For above-fold images77/>78```7980### Fonts81```typescript82// Good: next/font83import { Inter } from 'next/font/google'8485const inter = Inter({ subsets: ['latin'] })8687export default function RootLayout({ children }: { children: ReactNode }) {88 return <html className={inter.className}>{children}</html>89}90```9192### Dynamic Imports93```typescript94// Good: Dynamic import for heavy component95import dynamic from 'next/dynamic'9697const HeavyChart = dynamic(() => import('./HeavyChart'), {98 loading: () => <div>Loading...</div>,99 ssr: false, // If client-only100})101```102103### Caching104```typescript105// Good: Appropriate caching106export const revalidate = 3600 // Revalidate every hour107108async function getData() {109 const res = await fetch('https://api.example.com/data', {110 next: { revalidate: 3600 } // or { revalidate: 0 } for no cache111 })112 return res.json()113}114```115116## Reference Index117118| File | Topics |119|------|--------|120| [images.md](./references/images.md) | next/image, sizing, priority, formats |121| [fonts.md](./references/fonts.md) | next/font, Google fonts, local fonts |122| [code-splitting.md](./references/code-splitting.md) | Dynamic imports, route splitting |123| [caching.md](./references/caching.md) | fetch options, ISR, revalidatePath |124| [navigation.md](./references/navigation.md) | Link component, prefetching, scroll |125126## Success Criteria127128Performance is good when:129- All images use next/image with proper sizing130- Fonts loaded with next/font (no layout shift)131- Heavy components dynamically imported132- Static data cached appropriately (revalidate set)133- All internal links use Link component134- LCP < 2.5s, FID < 100ms, CLS < 0.1135136---137> Converted and distributed by [TomeVault](https://tomevault.io/claim/jovermier) — claim your Tome and manage your conversions.138<!-- tomevault:4.0:skill_md:2026-04-13 -->
tomevault-io