面试题：Next.js 静态文件处理与构建优化

Next.js 构建配置策略

Image Optimization：
- Next.js 内置了图片优化功能。在 next.config.js 中，可以配置图片加载器等选项。例如，使用默认的图片优化，Next.js 会自动根据设备屏幕分辨率和图片格式支持情况，提供合适的图片尺寸和格式。
```
module.exports = {
  images: {
    domains: ['example.com'], // 如果图片来自外部域名，需指定
  },
};
```
Static Asset Loading：
- 对于静态文件，将它们放在 public 目录下。Next.js 会在构建时将 public 目录下的所有文件复制到输出目录，并且可以通过相对路径直接访问。例如，图片放在 public/images 目录，在组件中可以这样引用：
```
import React from'react';

const MyComponent = () => {
  return <img src="/images/my - image.jpg" alt="My Image" />;
};

export default MyComponent;
```

Font Loading：

对于字体文件，可以将它们放在 public 目录，然后通过 CSS 引入。例如：

@font - face {
  font - family: 'MyFont';
  src: url('/fonts/my - font.woff2') format('woff2'),
       url('/fonts/my - font.woff') format('woff');
  font - weight: normal;
  font - style: normal;
}

也可以使用 next - font 库，它能自动优化字体加载。首先安装 next - font：npm install next - font。然后在 pages/_app.js 中导入字体：

import { Inter } from 'next/font/google';

const inter = Inter({ subsets: ['latin'] });

function MyApp({ Component, pageProps }) {
  return (
    <div className={inter.className}>
      <Component {...pageProps} />
    </div>
  );
}

export default MyApp;

Code Splitting：

Next.js 自动进行代码分割，确保页面只加载所需的 JavaScript 代码。对于包含静态文件的组件，可以进一步优化，比如将不常用的组件进行动态导入。例如：

const MyBigComponent = React.lazy(() => import('./MyBigComponent'));

const MyPage = () => {
  return (
    <React.Suspense fallback={<div>Loading...</div>}>
      <MyBigComponent />
    </React.Suspense>
  );
};

export default MyPage;

部署策略

CDN Usage：
- 在部署时，利用 CDN（内容分发网络）。许多云提供商都提供 CDN 服务，如 AWS CloudFront、Google Cloud CDN 等。将静态文件上传到 CDN 后，CDN 会根据用户的地理位置缓存和分发文件，大大提高加载速度。
- 配置 Next.js 项目使用 CDN，在 next.config.js 中设置 assetPrefix：
```
module.exports = {
  assetPrefix: 'https://your - cdn - url.com',
};
```
Server - side Rendering (SSR) vs Static Site Generation (SSG):
- Static Site Generation (SSG):
  - 如果项目中的页面内容变化不大，可以使用 SSG。在 getStaticProps 函数中预渲染页面，Next.js 会在构建时生成 HTML 文件。这对于包含大量静态文件的页面特别有效，因为页面的 HTML 和静态文件可以一起被缓存和分发。
  - 例如：
```
export async function getStaticProps() {
  // 获取数据
  const data = await fetch('https://example.com/api/data');
  const json = await data.json();

  return {
    props: {
      data: json,
    },
    revalidate: 60 * 60, // 每小时重新验证一次（如果使用增量静态再生）
  };
}

const MyPage = ({ data }) => {
  return (
    <div>
      {/* 使用数据 */}
    </div>
  );
};

export default MyPage;
```
- Server - side Rendering (SSR):
  - 对于需要实时数据的页面，使用 SSR。虽然 SSR 可能不会直接优化静态文件加载，但它可以确保页面在服务器端渲染后返回给客户端，减少首次加载时间。在 pages/_app.js 中设置 getInitialProps 等函数进行 SSR 相关操作。例如：
```
function MyApp({ Component, pageProps }) {
  return <Component {...pageProps} />;
}

MyApp.getInitialProps = async (appContext) => {
  const appProps = await App.getInitialProps(appContext);
  return {
   ...appProps,
  };
};

export default MyApp;
```
Incremental Static Regeneration：
- 结合 SSG 使用增量静态再生。在 getStaticProps 中设置 revalidate 选项，Next.js 会在指定的时间间隔后重新生成页面。这对于数据偶尔更新但又希望利用 SSG 优势的情况很有用，同时也能保证静态文件的加载性能不受影响。如上述 getStaticProps 示例中的 revalidate 设置。

面试题：Next.js 静态文件处理与构建优化

知识考点

面试题答案

Next.js 构建配置策略

部署策略