如何让Next.js生成纯HTML静态页面并解决导出时API路由问题

1. 用Next.js生成纯HTML是否可行？ #

完全可行。Next.js的**静态导出（Static Export）**模式专门用于生成无冗余框架代码的纯静态HTML文件，非常适合你这种仅需静态链接列表的场景。构建完成后，out目录下的index.html就是纯静态内容，没有Next.js相关的客户端运行时代码。

2. 导出时API路由无法工作的解决方案 #

静态导出模式下，API路由不会被打包或运行——因为API路由是服务端执行的逻辑，而静态导出只生成前端静态文件。

你的场景根本不需要API路由：直接在页面组件中读取本地JSON文件即可，这样数据会在构建阶段就被注入到HTML里，完全不需要服务端或客户端请求。

3. 将JSON数据静态渲染到index.html的具体步骤 #

假设你的JSON文件是data/links.json，内容如下：

[
  {"url": "https://example.com", "title": "示例网站"},
  {"url": "https://test.com", "title": "测试网站"}
]

基于Pages Router（Next.js 12及更早） #

1. 在pages/index.js中编写组件，通过getStaticProps读取JSON：

import fs from 'fs';
import path from 'path';

export default function Home({ links }) {
  return (
    <div>
      <h1>我的链接列表</h1>
      <ul>
        {links.map((link, index) => (
          <li key={index}>
            <a href={link.url}>{link.title}</a>
          </li>
        ))}
      </ul>
    </div>
  );
}

export async function getStaticProps() {
  // 读取JSON文件路径
  const filePath = path.join(process.cwd(), 'data/links.json');
  const jsonData = fs.readFileSync(filePath, 'utf8');
  const links = JSON.parse(jsonData);

  return {
    props: { links },
  };
}

基于App Router（Next.js 13+） #

直接在app/page.js中导入JSON文件即可（App Router默认静态渲染）：

import links from '@/data/links.json';

export default function Home() {
  return (
    <div>
      <h1>我的链接列表</h1>
      <ul>
        {links.map((link, index) => (
          <li key={index}>
            <a href={link.url}>{link.title}</a>
          </li>
        ))}
      </ul>
    </div>
  );
}

启用静态导出配置 #

在next.config.js中添加静态导出配置：

/** @type {import('next').NextConfig} */
const nextConfig = {
  output: 'export',
  // 如果不需要资产前缀，可省略下面一行
  assetPrefix: './',
};

module.exports = nextConfig;

构建并验证 #

运行npm run build，完成后查看out/index.html，里面就是渲染好的纯HTML链接列表，没有任何Next.js冗余代码。

内容的提问来源于stack exchange，提问作者Hassan Voyeau