Next.js 13项目构建报错，需在请求中获取语言参数

问题原因 #

构建失败是因为页面预渲染阶段，getLang函数尝试请求本地API（http://127.0.0.1:3000/langs/...），但构建过程中本地API服务并未启动，导致fetch请求失败，进而页面预渲染出错。

解决方案 #

方案1：直接读取本地语言文件（推荐） #

无需通过API请求，直接从本地文件系统读取语言配置，彻底避免依赖外部服务：

修改getLang函数如下：

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

const getLang = async (lang: string) => {
  const slcLang = lang === "en" ? "en" : "pt";
  // 假设语言文件放在public/langs目录下，如en.json、pt.json
  const filePath = path.join(process.cwd(), 'public', 'langs', `${slcLang}.json`);
  const langsData = fs.readFileSync(filePath, 'utf8');
  const langs: LangsTypes = JSON.parse(langsData);
  return {
    langs,
    slcLang
  };
}

方案2：使用Next.js Route Handler替代外部API #

将语言API改为Next.js内置的Route Handler，构建时可内部处理请求，无需启动外部服务：

1. 创建app/langs/[lang]/route.ts：

import { NextResponse } from 'next/server';
import fs from 'fs';
import path from 'path';

export async function GET(_: Request, { params }: { params: { lang: string } }) {
  const validLang = params.lang === 'en' ? 'en' : 'pt';
  const filePath = path.join(process.cwd(), 'public', 'langs', `${validLang}.json`);
  const langsData = fs.readFileSync(filePath, 'utf8');
  return NextResponse.json(JSON.parse(langsData));
}

2. 修改getLang中的fetch路径为相对路径：

const getLang = async (lang: string) => {
  const slcLang = lang === "en" ? "en" : "pt";
  const langsData = await fetch(`/langs/${slcLang}`, { next: { revalidate: 10 } });
  const langs: LangsTypes = await langsData.json();
  return {
    langs,
    slcLang
  };
}

方案3：强制页面动态渲染 #

如果需要保留外部API请求，可强制页面动态渲染，跳过构建时的预渲染步骤：

在页面组件顶部添加：

export const dynamic = 'force-dynamic';

注意：此方案会失去静态导出的优势，页面需在服务器运行时动态生成，静态导出模式下可能无法正常工作。

内容的提问来源于stack exchange，提问作者Tomás