Next.js应用添加服务端翻译后部署至Vercel报错，本地运行正常的技术求助

看起来你遇到了两个典型的部署问题，我来逐个帮你分析解决：

1. TypeError: Cannot read properties of undefined (reading 'NEXT_DATA') #

问题原因 #

你在_document.js里直接从props读取__NEXT_DATA__，但在Vercel的部署环境中（尤其是静态生成或某些服务端渲染场景下），这个属性可能不会被直接传递给Document组件的props，导致读取时出现undefined错误。

解决方案 #

修改_document.js，通过getInitialProps方法安全获取locale信息——这是Next.js官方推荐的在_document中获取服务端数据的方式：

import Document, { Html, Head, Main, NextScript } from 'next/document';

export default class MyDocument extends Document {
  static async getInitialProps(ctx) {
    // 获取默认的初始props
    const initialProps = await Document.getInitialProps(ctx);
    
    // 从请求上下文或__NEXT_DATA__中安全获取locale，兜底设为'en'
    const locale = ctx.req?.locale || initialProps.__NEXT_DATA__?.locale || 'en';
    
    // 将locale传递给组件props
    return { ...initialProps, locale };
  }

  render() {
    const { locale } = this.props;
    const dir = locale === "ar" ? "rtl" : "ltr";
    
    return ( 
      <Html dir={dir} lang={locale}> 
        <Head /> 
        <body className={locale === "ar" ? "rtl" : null}> 
          <Main /> 
          <NextScript /> 
        </body> 
      </Html> 
    ); 
  }
}

这样就能避免直接依赖props.__NEXT_DATA__存在的情况，同时兼容本地和Vercel的运行环境。

2. Error: ENOENT: no such file or directory, scandir '/var/task/public/locales/en' #

问题原因 #

这个错误说明Vercel服务器上找不到public/locales/en目录，大概率是以下几种情况：

• 本地的public/locales/en目录不存在或路径拼写错误（注意Linux环境区分大小写，比如En和en会被视为不同路径）
• 该目录被.gitignore文件排除，导致Vercel拉取代码时没有同步这些文件
• Next.js构建时没有正确将public目录下的文件复制到部署包中

解决方案 #

• 检查路径和文件存在性：确认本地项目中public/locales/en确实存在，所有翻译文件都在对应目录，路径大小写和代码中的引用完全一致
• 检查.gitignore配置：打开项目根目录的.gitignore文件，确保没有包含public/locales或其子目录的规则，如果有就删除对应的行
• 验证构建配置：如果你使用next-i18next等翻译库，确保next.config.js中的i18n配置正确指向了locales目录，比如：

  const { i18n } = require('./next-i18next.config');
  
  module.exports = {
    i18n,
    // 其他Next.js配置
  };
  

• 手动同步文件（可选）：如果构建时文件没有自动复制，可以在package.json的build脚本中添加复制命令：

  "scripts": {
    "build": "next build && cp -r public/locales .next/public/locales"
  }
  

按照这些步骤调整后，重新部署到Vercel应该就能解决这两个问题了。

内容的提问来源于stack exchange，提问作者Ahmed Elhoseny