面试题：Next.js中如何在静态生成时实现图片优化

Question

在Next.js项目中，假设你要通过静态生成（SSG）方式构建页面，且页面中有多张图片需要优化展示，阐述实现静态生成与图片优化结合的具体步骤及相关配置。

Answer 1

1. 初始化 Next.js 项目

如果还没有项目，通过以下命令初始化一个新的 Next.js 项目：

npx create-next-app@latest

2. 安装图片优化相关依赖

Next.js 内置了对图片优化的支持，无需额外安装图片优化库。但确保项目依赖是最新的：

npm install

3. 静态生成页面（SSG）

• 页面组件：在 pages 目录下创建页面文件，例如 pages/about.js。在页面组件中，使用 getStaticProps 函数进行静态生成。

import React from 'react';

export async function getStaticProps() {
  // 可以在此处获取数据，如从 CMS 或 API
  const data = {
    title: 'About Us',
    images: [
      { url: '/images/about1.jpg', alt: 'About Image 1' },
      { url: '/images/about2.jpg', alt: 'About Image 2' }
    ]
  };
  return {
    props: {
      data
    },
    revalidate: 60 * 60 * 24 // 一天后重新验证（可选，用于增量静态再生）
  };
}

const AboutPage = ({ data }) => {
  return (
    <div>
      <h1>{data.title}</h1>
      {data.images.map((image, index) => (
        <Image
          key={index}
          src={image.url}
          alt={image.alt}
          width={300}
          height={200}
        />
      ))}
    </div>
  );
};

export default AboutPage;

• getStaticProps：此函数在构建时运行，获取的数据将作为 props 传递给页面组件。revalidate 选项用于增量静态再生，即页面构建后，在指定时间间隔后重新验证数据并更新页面。

4. 图片优化

• 使用 next/image 组件：在页面组件中，使用 next/image 组件来展示图片。next/image 会自动优化图片，包括调整大小、选择合适的图片格式（如 WebP）等。

import Image from 'next/image';

• 配置 next.config.js：如果需要，可以在 next.config.js 中配置图片优化相关参数。例如，设置图片的默认质量、自定义图片加载器等。

module.exports = {
  images: {
    quality: 75, // 设置图片质量
    deviceSizes: [640, 750, 828, 1080, 1200, 1920, 2048, 3840], // 生成不同尺寸图片
    loader: 'default' // 或自定义图片加载器
  }
};

5. 构建与部署

• 构建：运行以下命令进行构建：

npm run build

• 部署：将 .next 目录部署到支持静态站点的服务器上，如 Vercel（Next.js 官方推荐）、Netlify 或 AWS S3 等。

通过以上步骤，即可在 Next.js 项目中实现静态生成与图片优化的结合。