Evan
426e9e0210
style: 调整UI组件样式和布局 docs: 更新README和添加文档内容 chore: 添加依赖项和配置文件 fix: 修复一些小问题和优化代码 perf: 优化性能相关代码 refactor: 重构部分组件结构 test: 添加测试相关文件 build: 更新构建配置 ci: 添加CI配置文件
56 lines
1.3 KiB
Plaintext
56 lines
1.3 KiB
Plaintext
---
|
|
title: "10 Next.js Performance Tips for Production Apps"
|
|
publishedAt: "2024-12-05"
|
|
updatedAt: "2024-12-05"
|
|
author: "John Doe"
|
|
summary: "Practical optimization techniques to make your Next.js applications blazing fast in production."
|
|
image: "https://images.unsplash.com/photo-1460925895917-afdab827c52f?w=800&h=192&fit=crop"
|
|
---
|
|
|
|
Performance isn't optional—it's a feature. Here are battle-tested tips for optimizing Next.js apps.
|
|
|
|
# 2. Optimize Images
|
|
|
|
Always use `next/image`
|
|
|
|
```tsx
|
|
import Image from 'next/image';
|
|
|
|
export function Hero() {
|
|
return (
|
|
<Image
|
|
src="/hero.jpg"
|
|
alt="Hero image"
|
|
width={1200}
|
|
height={600}
|
|
priority // Load immediately for LCP
|
|
placeholder="blur"
|
|
blurDataURL="data:image/jpeg;base64,..."
|
|
/>
|
|
);
|
|
}
|
|
```
|
|
|
|
|
|
## 4. Implement Proper Caching
|
|
|
|
| Strategy | Use Case | TTL |
|
|
|----------|----------|-----|
|
|
| `force-cache` | Static data | Forever |
|
|
| `revalidate: 3600` | Semi-static | 1 hour |
|
|
| `revalidate: 60` | Frequently updated | 1 minute |
|
|
| `no-store` | Real-time data | Never cache |
|
|
|
|
## 5. Minimize Client Components
|
|
|
|
Every `'use client'` directive adds to your JavaScript bundle. Keep client components small and focused:
|
|
|
|
## 6. Bundle Analysis
|
|
|
|
```bash title="terminal"
|
|
# Install analyzer
|
|
npm install @next/bundle-analyzer
|
|
|
|
# Run analysis
|
|
ANALYZE=true npm run build
|
|
``` |