Next.js项目Storybook无法解析next-i18next/serverSideTranslations问题

Next.js项目已集成next-i18next与Storybook，编写首页Story时触发以下错误：

Module not found: Error: Can't resolve 'next-i18next/serverSideTranslations' in "xxxx\xxx"

移除页面中的export const getStaticProps后，Storybook可正常运行。

问题核心是Storybook属于客户端运行环境，无法识别Next.js服务端专属的serverSideTranslations API，且当前webpack配置仅映射了next-i18next到react-i18next，未处理该具体路径。通过添加模拟实现即可解决：

1. 创建模拟文件
   在.storybook/mocks/目录下新建serverSideTranslations.js，内容如下：

export const serverSideTranslations = async () => ({})

2. 修改webpack配置
   更新.storybook/main.js中的webpackFinal配置，在config.resolve.alias中添加路径映射：

webpackFinal: async (config, {configType}) => {
  config.resolve.alias = {
    ...config.resolve.alias,
    "@": path.resolve(__dirname, "../src/"),
    'next-i18next': 'react-i18next',
    // 新增以下映射
    'next-i18next/serverSideTranslations': path.resolve(__dirname, './mocks/serverSideTranslations.js')
  };
  // ...其他配置
  return config;
}

此方案让Storybook加载我们的模拟函数（仅返回空props，不影响客户端翻译逻辑），同时保留页面中的getStaticProps不影响Next.js生产环境运行。

内容的提问来源于stack exchange，提问作者Xin Ning