升级Next.js 12至13及React 17至18后Github构建报错求助

问题描述 #

将Next.js从12升级到13、React从17升级到18后，本地执行npm run build可正常完成，但在GitHub Actions中执行npx serverless@2.72.2部署时构建失败，next build命令退出码为1，报错提示next.config.js根目录存在不允许的target属性，但实际提供的配置文件中并没有该属性。

报错详情 #

warn - Invalid next.config.js options detected:

• The root value has an unexpected property, target, which is not in the list of allowed properties (amp, analyticsId, assetPrefix, basePath, cleanDistDir, compiler, compress, crossOrigin, devIndicators, distDir, env, eslint, excludeDefaultMomentLocales, experimental, exportPathMap, generateBuildId, generateEtags, headers, httpAgentOptions, i18n, images, modularizeImports, onDemandEntries, optimizeFonts, output, outputFileTracing, pageExtensions, poweredByHeader, productionBrowserSourceMaps, publicRuntimeConfig, reactStrictMode, redirects, rewrites, sassOptions, serverRuntimeConfig, skipMiddlewareUrlNormalize, skipTrailingSlashRedirect, staticPageGenerationTimeout, swcMinify, trailingSlash, transpilePackages, typescript, useFileSystemPublicRoutes, webpack).

提供的next.config.js代码 #

/** @type {import('next').NextConfig} */
const headers = async () => {
    return [
        {
            source: '/:path*',
            headers: [
                {
                    key: 'X-Content-Type-Options',
                    value: 'nosniff'
                },
                {
                    key: 'X-Frame-Options',
                    value: 'SAMEORIGIN'
                },

            ]
        }
    ]
}
const nextConfig = {
reactStrictMode: true,
output: 'standalone',
transpilePackages: ['@ionic/react', '@ionic/core', '@stencil/core', 'ionicons'],
async redirects() {
return [
 {
    source: '/',
    destination: '/language',
    permanent: true
 }
]
},
headers,
  images: {
    domains: ['media.graphcms.com', 'res.cloudinary.com', 
   'images.unsplash.com', 'media.graphassets.com'],
  unoptimized: true,
}
};
module.exports = nextConfig;

解决建议 #

• 升级Serverless版本：当前使用的serverless@2.72.2版本过于陈旧，Next.js 13已移除target配置项，旧版Serverless可能会自动注入该属性导致冲突。将部署命令改为npx serverless@latest，使用最新稳定版测试。
• 检查Serverless插件配置：如果使用了serverless-nextjs-component这类插件，确认插件版本是否兼容Next.js 13，旧版插件可能会强制添加target属性，需同步升级插件到兼容版本。
• 清理CI环境缓存：GitHub Actions的缓存可能残留旧依赖或配置文件，在部署步骤中添加清理命令：rm -rf node_modules .next package-lock.json，然后重新安装依赖。
• 排查动态配置修改：检查部署流程中是否有脚本、钩子或第三方工具在构建前动态修改next.config.js，比如自动注入target属性的逻辑，需移除相关代码。
• 统一Node.js版本：确保本地和GitHub CI环境使用相同的Node.js版本（建议v18及以上），版本差异可能导致依赖解析或配置处理不一致。

内容的提问来源于stack exchange，提问作者Oliver Westbury