Sorry, your browser cannot access this site
This page requires browser support (enable) JavaScript
Learn more >

Next.js 系列教程（三）：性能优化与生产部署

Next.js 系列教程

发布于：Nov 28, 2025

目录

  1. 性能优化策略
  2. 图片优化
  3. 字体优化
  4. SEO 优化
  5. 代码分割和懒加载
  6. 缓存策略
  7. 生产环境部署
  8. 监控和分析

1. 性能优化策略

Next.js 提供了多种内置的性能优化功能，帮助你构建快速、高效的 Web 应用。

核心优化特性：

  • 自动代码分割: 按需加载页面和组件
  • 预渲染: 静态生成(SSG)和服务端渲染(SSR)
  • 图像优化: 自动优化图片大小和格式
  • 字体优化: 自动优化自定义字体加载
  • 快速刷新: 开发时的即时反馈
  • Tree Shaking: 移除未使用的代码

性能测量工具

Next.js 内置了 Web Vitals 测量工具：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
// src/app/layout.tsx
import { Analytics } from '@vercel/analytics/react';

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="zh-CN">
      <body>
        {children}
        <Analytics />
      </body>
    </html>
  );
}

2. 图片优化

Next.js 的 Image 组件提供了强大的图片优化功能。

基本用法

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
// src/components/OptimizedImage.tsx
'use client';

import Image from 'next/image';

export default function OptimizedImage() {
  return (
    <div>
      {/* 基本优化图片 */}
      <Image
        src="/images/profile.jpg"
        alt="个人资料图片"
        width={400}
        height={300}
        priority // 优先加载（用于首屏图片）
      />
      
      {/* 响应式图片 */}
      <Image
        src="/images/banner.jpg"
        alt="横幅图片"
        sizes="(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 33vw"
        style={{
          width: '100%',
          height: 'auto',
        }}
        width={1200}
        height={400}
      />
    </div>
  );
}

远程图片优化

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
// src/components/RemoteImage.tsx
'use client';

import Image from 'next/image';

export default function RemoteImage() {
  // 需要在 next.config.js 中配置允许的域名
  return (
    <Image
      src="https://example.com/image.jpg"
      alt="远程图片"
      width={500}
      height={300}
    />
  );
}

配置 next.config.js：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
// next.config.js
/** @type {import('next').NextConfig} */
const nextConfig = {
  images: {
    remotePatterns: [
      {
        protocol: 'https',
        hostname: 'example.com',
        port: '',
        pathname: '/images/**',
      },
    ],
  },
};

module.exports = nextConfig;

图片加载优化

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
// src/components/ImageWithFallback.tsx
'use client';

import Image from 'next/image';
import { useState } from 'react';

export default function ImageWithFallback() {
  const [isLoading, setLoading] = useState(true);
  
  return (
    <div className="image-container">
      <Image
        src="/images/photo.jpg"
        alt="照片"
        width={800}
        height={600}
        onLoadingComplete={() => setLoading(false)}
        className={isLoading ? 'loading' : 'loaded'}
      />
      
      <style jsx>{`
        .image-container {
          position: relative;
          overflow: hidden;
        }
        
        .loading {
          filter: blur(10px);
          transition: filter 0.3s ease;
        }
        
        .loaded {
          filter: blur(0);
          transition: filter 0.3s ease;
        }
      `}</style>
    </div>
  );
}

3. 字体优化

Next.js 提供了自动字体优化功能，确保字体快速加载且无布局偏移。

Google Fonts 优化

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
// src/app/layout.tsx
import { Inter } from 'next/font/google';

// 配置字体
const inter = Inter({
  subsets: ['latin'],
  display: 'swap',
  weight: ['400', '500', '600', '700'],
});

export const metadata = {
  title: '我的 Next.js 应用',
  description: '使用 Next.js 构建的现代 Web 应用',
};

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="zh-CN" className={inter.className}>
      <body>{children}</body>
    </html>
  );
}

本地字体优化

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
// src/app/layout.tsx
import localFont from 'next/font/local';

// 导入本地字体
const myFont = localFont({
  src: [
    {
      path: './fonts/my-font-regular.woff2',
      weight: '400',
      style: 'normal',
    },
    {
      path: './fonts/my-font-bold.woff2',
      weight: '700',
      style: 'normal',
    },
  ],
  display: 'swap',
});

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="zh-CN" className={myFont.className}>
      <body>{children}</body>
    </html>
  );
}

字体子集优化

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
// src/app/layout.tsx
import { Noto_Sans_SC } from 'next/font/google';

// 优化中文字体加载
const notoSansSC = Noto_Sans_SC({
  subsets: ['latin'],
  weight: ['300', '400', '500', '700'],
  display: 'swap',
  // 只加载需要的字符子集
  preload: true,
});

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="zh-CN" className={notoSansSC.className}>
      <body>{children}</body>
    </html>
  );
}

4. SEO 优化

Next.js 提供了强大的 SEO 优化功能。

元数据管理

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
// src/app/page.tsx
import type { Metadata } from 'next';

// 页面级元数据
export const metadata: Metadata = {
  title: '首页 - 我的网站',
  description: '这是我的网站首页，提供最新的资讯和服务',
  keywords: ['Next.js', 'React', 'Web开发'],
  authors: [{ name: '开发者', url: 'https://example.com' }],
  creator: '开发者',
  publisher: '我的公司',
  openGraph: {
    title: '首页 - 我的网站',
    description: '这是我的网站首页，提供最新的资讯和服务',
    url: 'https://example.com',
    siteName: '我的网站',
    images: [
      {
        url: 'https://example.com/images/og-image.jpg',
        width: 1200,
        height: 630,
        alt: '网站预览图',
      },
    ],
    locale: 'zh_CN',
    type: 'website',
  },
  twitter: {
    card: 'summary_large_image',
    title: '首页 - 我的网站',
    description: '这是我的网站首页，提供最新的资讯和服务',
    creator: '@mytwitter',
    images: ['https://example.com/images/twitter-image.jpg'],
  },
};

export default function HomePage() {
  return (
    <div>
      <h1>欢迎来到我的网站</h1>
      <p>这是首页内容</p>
    </div>
  );
}

动态元数据

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
// src/app/posts/[id]/page.tsx
import type { Metadata } from 'next';

// 动态生成元数据
export async function generateMetadata({
  params,
}: {
  params: { id: string };
}): Promise<Metadata> {
  // 获取文章数据
  const post = await getPost(params.id);
  
  return {
    title: `${post.title} - 我的博客`,
    description: post.excerpt,
    openGraph: {
      title: post.title,
      description: post.excerpt,
      images: [
        {
          url: post.coverImage,
          width: 1200,
          height: 630,
          alt: post.title,
        },
      ],
    },
  };
}

async function getPost(id: string) {
  // 模拟获取文章数据
  return {
    id,
    title: '文章标题',
    excerpt: '文章摘要',
    coverImage: 'https://example.com/images/post-cover.jpg',
  };
}

export default function PostPage({ params }: { params: { id: string } }) {
  return (
    <div>
      <h1>文章详情页</h1>
      <p>文章 ID: {params.id}</p>
    </div>
  );
}

结构化数据

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
// src/components/StructuredData.tsx
export default function StructuredData() {
  const jsonLd = {
    '@context': 'https://schema.org',
    '@type': 'Article',
    headline: '文章标题',
    author: {
      '@type': 'Person',
      name: '作者姓名',
    },
    datePublished: '2025-01-01',
    dateModified: '2025-01-01',
    description: '文章摘要',
    image: 'https://example.com/images/article.jpg',
  };

  return (
    <script
      type="application/ld+json"
      dangerouslySetInnerHTML={{ __html: JSON.stringify(jsonLd) }}
    />
  );
}

5. 代码分割和懒加载

Next.js 提供了多种代码分割和懒加载的机制。

动态导入组件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
// src/app/page.tsx
'use client';

import { useState, useEffect } from 'react';

// 动态导入重型组件
const HeavyComponent = dynamic(
  () => import('@/components/HeavyComponent'),
  {
    loading: () => <p>加载中...</p>,
    ssr: false, // 禁用服务端渲染
  }
);

// 动态导入多个组件
const [ComponentA, ComponentB] = await Promise.all([
  dynamic(() => import('@/components/ComponentA')),
  dynamic(() => import('@/components/ComponentB')),
]);

export default function HomePage() {
  const [showHeavyComponent, setShowHeavyComponent] = useState(false);
  
  return (
    <div>
      <h1>首页</h1>
      
      <button onClick={() => setShowHeavyComponent(true)}>
        显示重型组件
      </button>
      
      {showHeavyComponent && <HeavyComponent />}
    </div>
  );
}

路由级别的代码分割

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
// src/app/dashboard/page.tsx
'use client';

import { use } from 'react';
import dynamic from 'next/dynamic';

// 为整个路由动态导入组件
const DashboardContent = dynamic(
  () => import('@/components/DashboardContent'),
  {
    loading: () => <div>仪表板加载中...</div>,
    ssr: false,
  }
);

export default function DashboardPage() {
  return (
    <div>
      <h1>仪表板</h1>
      <DashboardContent />
    </div>
  );
}

条件加载组件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
// src/components/ConditionalComponent.tsx
'use client';

import { useState, useEffect } from 'react';
import dynamic from 'next/dynamic';

// 只在客户端加载的组件
const ClientOnlyComponent = dynamic(
  () => import('@/components/ClientOnlyComponent'),
  { ssr: false }
);

export default function ConditionalComponent() {
  const [isClient, setIsClient] = useState(false);
  
  useEffect(() => {
    setIsClient(true);
  }, []);
  
  if (!isClient) {
    return <div>服务端渲染内容</div>;
  }
  
  return <ClientOnlyComponent />;
}

6. 缓存策略

Next.js 提供了多种缓存机制来提升性能。

请求缓存

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
// src/lib/data-fetching.ts
export async function getCachedData() {
  // Next.js 自动缓存 fetch 请求（GET 方法）
  const res = await fetch('https://api.example.com/data', {
    next: { 
      revalidate: 3600 // 1小时后重新验证
    }
  });
  
  return res.json();
}

// 禁用缓存
export async function getFreshData() {
  const res = await fetch('https://api.example.com/data', {
    cache: 'no-store' // 不缓存
  });
  
  return res.json();
}

// 强制缓存
export async function getForceCachedData() {
  const res = await fetch('https://api.example.com/data', {
    cache: 'force-cache' // 强制缓存
  });
  
  return res.json();
}

路由段配置缓存

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
// src/app/products/page.tsx
import { fetchProducts } from '@/lib/products';

// 配置路由段缓存
export const dynamic = 'force-static'; // 强制静态生成
export const revalidate = 3600; // 1小时重新验证

export default async function ProductsPage() {
  const products = await fetchProducts();
  
  return (
    <div>
      <h1>产品列表</h1>
      <ul>
        {products.map(product => (
          <li key={product.id}>{product.name}</li>
        ))}
      </ul>
    </div>
  );
}

自定义缓存策略

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
// src/lib/cache.ts
import { cache } from 'react';

// 使用 React 缓存 API
export const getUser = cache(async (id: string) => {
  console.log('获取用户数据:', id);
  const res = await fetch(`https://api.example.com/users/${id}`);
  return res.json();
});

// 在组件中使用
async function UserProfile({ userId }: { userId: string }) {
  const user = await getUser(userId);
  const user2 = await getUser(userId); // 会使用缓存
  
  return <div>用户: {user.name}</div>;
}

7. 生产环境部署

Next.js 应用可以部署到多个平台。

构建和导出

1
2
3
4
5
6
7
8
# 构建生产版本
npm run build

# 启动生产服务器
npm start

# 导出静态文件（如果使用静态生成）
npm run build && npm run export

配置文件优化

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
// next.config.js
/** @type {import('next').NextConfig} */
const nextConfig = {
  // 启用 React Strict Mode
  reactStrictMode: true,
  
  // 启用压缩
  compress: true,
  
  // 图片优化
  images: {
    // 配置图片优化
  },
  
  // 环境变量
  env: {
    CUSTOM_KEY: process.env.CUSTOM_KEY,
  },
  
  // Webpack 配置
  webpack: (config, { isServer }) => {
    // 添加自定义 Webpack 配置
    if (!isServer) {
      config.resolve.fallback = {
        ...config.resolve.fallback,
        fs: false,
      };
    }
    
    return config;
  },
  
  // 实验性功能
  experimental: {
    appDir: true,
  },
};

module.exports = nextConfig;

Docker 部署

创建 Dockerfile：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
# Dockerfile
FROM node:18-alpine AS deps
RUN apk add --no-cache libc6-compat
WORKDIR /app

# 复制依赖文件
COPY package.json yarn.lock* package-lock.json* pnpm-lock.yaml* ./
RUN \
  if [ -f yarn.lock ]; then yarn --frozen-lockfile; \
  elif [ -f package-lock.json ]; then npm ci; \
  elif [ -f pnpm-lock.yaml ]; then yarn global add pnpm && pnpm i --frozen-lockfile; \
  else echo "Lockfile not found." && exit 1; \
  fi

FROM node:18-alpine AS builder
WORKDIR /app
COPY --from=deps /app/node_modules ./node_modules
COPY . .

# 构建应用
RUN npm run build

FROM node:18-alpine AS runner
WORKDIR /app

# 创建非 root 用户
RUN addgroup --system --gid 1001 nodejs
RUN adduser --system --uid 1001 nextjs

# 复制构建产物
COPY --from=builder /app/public ./public
COPY --from=builder /app/.next/standalone ./
COPY --from=builder /app/.next/static ./.next/static

# 更改文件所有者
USER nextjs

# 暴露端口
EXPOSE 3000

# 启动命令
CMD ["node", "server.js"]

环境变量配置

1
2
3
4
# .env.production
DATABASE_URL=your_production_database_url
NEXT_PUBLIC_API_URL=https://api.yourapp.com
JWT_SECRET=your_jwt_secret

8. 监控和分析

性能监控

1
2
3
4
5
6
7
8
9
10
11
12
13
14
// src/components/PerformanceMonitor.tsx
'use client';

import { useReportWebVitals } from 'next/web-vitals';

export function PerformanceMonitor() {
  useReportWebVitals((metric) => {
    console.log(metric);
    // 发送到分析服务
    // reportWebVitalsToAnalytics(metric);
  });
  
  return null;
}

错误监控

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
// src/app/layout.tsx
'use client';

import { useEffect } from 'react';

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  useEffect(() => {
    // 错误监控
    const handleerror = (error: ErrorEvent) => {
      // 发送错误到监控服务
      console.error('前端错误:', error);
    };
    
    window.addEventListener('error', handleerror);
    
    return () => {
      window.removeEventListener('error', handleerror);
    };
  }, []);
  
  return (
    <html lang="zh-CN">
      <body>{children}</body>
    </html>
  );
}

自定义分析

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
// src/lib/analytics.ts
export function trackEvent(
  name: string,
  params: Record<string, any>
) {
  if (typeof window !== 'undefined' && (window as any).gtag) {
    (window as any).gtag('event', name, params);
  }
}

// 使用示例
export function trackPageView(url: string) {
  trackEvent('page_view', { page_path: url });
}

export function trackButtonClick(buttonName: string) {
  trackEvent('click', { button_name: buttonName });
}

应用监控

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
// src/components/AppMonitor.tsx
'use client';

import { useEffect } from 'react';

export default function AppMonitor() {
  useEffect(() => {
    // 监控应用性能
    const observer = new PerformanceObserver((list) => {
      for (const entry of list.getEntries()) {
        console.log('性能条目:', entry);
        // 发送到监控服务
      }
    });
    
    observer.observe({ entryTypes: ['navigation', 'paint', 'largest-contentful-paint'] });
    
    return () => {
      observer.disconnect();
    };
  }, []);
  
  return null;
}

总结

通过本教程，你已经掌握了 Next.js 的高级优化和部署技巧：

  1. 性能优化策略: 利用 Next.js 内置的优化功能
  2. 图片优化: 使用 Image 组件优化图片加载
  3. 字体优化: 优化字体加载和渲染
  4. SEO 优化: 设置元数据和结构化数据
  5. 代码分割: 实现组件和路由级别的懒加载
  6. 缓存策略: 合理使用各种缓存机制
  7. 生产部署: 构建和部署 Next.js 应用
  8. 监控分析: 实施性能和错误监控

这些高级技巧将帮助你构建更快、更可靠的 Next.js 应用。记住，性能优化是一个持续的过程，需要根据实际使用情况进行调整和改进。

更新于：Nov 28, 2025

Next.js

性能优化

部署

SEO

评论