Next.js 中文网

主题

静态导出 ​

¥Static Exports

Next.js 可以作为静态站点或单页应用 (SPA) 启动，然后可以选择升级以使用需要服务器的功能。

¥Next.js enables starting as a static site or Single-Page Application (SPA), then later optionally upgrading to use features that require a server.

运行 next build 时，Next.js 为每个路由生成一个 HTML 文件。通过将严格的 SPA 分解为单独的 HTML 文件，Next.js 可以避免在客户端加载不必要的 JavaScript 代码，从而减少包大小并实现更快的页面加载。

¥When running next build, Next.js generates an HTML file per route. By breaking a strict SPA into individual HTML files, Next.js can avoid loading unnecessary JavaScript code on the client-side, reducing the bundle size and enabling faster page loads.

由于 Next.js 支持这种静态导出，因此它可以部署和托管在任何可以提供 HTML/CSS/JS 静态资源的 Web 服务器上。

¥Since Next.js supports this static export, it can be deployed and hosted on any web server that can serve HTML/CSS/JS static assets.

配置 ​

¥Configuration

要启用静态导出，请更改 next.config.js 内的输出模式：

¥To enable a static export, change the output mode inside next.config.js:

运行 next build 后，Next.js 将为你的应用创建一个包含 HTML/CSS/JS 资源的 out 文件夹。

¥After running next build, Next.js will create an out folder with the HTML/CSS/JS assets for your application.

你可以利用 getStaticProps 和 getStaticPaths 为 pages 目录中的每个页面生成一个 HTML 文件（对于 动态路由，可以生成更多页面）。

¥You can utilize getStaticProps and getStaticPaths to generate an HTML file for each page in your pages directory (or more for dynamic routes).

支持的功能 ​

¥Supported Features

构建静态站点所需的大多数 Next.js 核心功能均已支持，包括：

¥The majority of core Next.js features needed to build a static site are supported, including:

图片优化 ​

¥Image Optimization

通过在 next.config.js 中定义自定义图片加载器，可以将 图片优化 到 next/image 与静态导出一起使用。例如，你可以使用 Cloudinary 等服务优化图片：

¥Image Optimization through next/image can be used with a static export by defining a custom image loader in next.config.js. For example, you can optimize images with a service like Cloudinary:

此自定义加载程序将定义如何从远程源获取图片。例如，以下加载器将构造 Cloudinary 的 URL：

¥This custom loader will define how to fetch images from a remote source. For example, the following loader will construct the URL for Cloudinary:

ts
export default function cloudinaryLoader({
  src,
  width,
  quality,
}: {
  src: string
  width: number
  quality?: number
}) {
  const params = ['f_auto', 'c_limit', `w_${width}`, `q_${quality || 'auto'}`]
  return `https://res.cloudinary.com/demo/image/upload/${params.join(
    ','
  )}${src}`
}

然后，你可以在应用中使用 next/image，在 Cloudinary 中定义图片的相对路径：

¥You can then use next/image in your application, defining relative paths to the image in Cloudinary:

tsx
import Image from 'next/image'

export default function Page() {
  return <Image alt="turtles" src="/turtles.jpg" width={300} height={300} />
}

不支持的功能 ​

¥Unsupported Features

不支持需要 Node.js 服务器的功能，或在构建过程中无法计算的动态逻辑：

¥Features that require a Node.js server, or dynamic logic that cannot be computed during the build process, are not supported:

部署 ​

¥Deploying

通过静态导出，Next.js 可以部署并托管在任何可以提供 HTML/CSS/JS 静态资源的 Web 服务器上。

¥With a static export, Next.js can be deployed and hosted on any web server that can serve HTML/CSS/JS static assets.

运行 next build 时，Next.js 会生成静态导出到 out 文件夹中。例如，假设你有以下路由：

¥When running next build, Next.js generates the static export into the out folder. For example, let's say you have the following routes:

  • /

  • /blog/[id]

运行 next build 后，Next.js 会生成以下文件：

¥After running next build, Next.js will generate the following files:

  • /out/index.html

  • /out/404.html

  • /out/blog/post-1.html

  • /out/blog/post-2.html

如果你使用的是 Nginx 等静态主机，你可以配置将传入请求重写为正确的文件：

¥If you are using a static host like Nginx, you can configure rewrites from incoming requests to the correct files:

nginx
server {
  listen 80;
  server_name acme.com;

  root /var/www/out;

  location / {
      try_files $uri $uri.html $uri/ =404;
  }

  # This is necessary when `trailingSlash: false`.
  # You can omit this when `trailingSlash: true`.
  location /blog/ {
      rewrite ^/blog/(.*)$ /blog/$1.html break;
  }

  error_page 404 /404.html;
  location = /404.html {
      internal;
  }
}

版本历史 ​

¥Version History

版本更改
v14.0.0next export 已被删除，取而代之的是 "output": "export"
v13.4.0App Router（稳定版）添加了增强的静态导出支持，包括使用 React 服务器组件和路由处理程序。
v13.3.0next export 已弃用并替换为 "output": "export"