NextJS 15.4.3部署至Amplify失败：模块与路径解析异常求助

问题1：无法解析@/xxx路径别名 #

本地构建正常但Amplify失败，核心原因是构建环境未正确识别tsconfig中的路径配置，或Next.js的standalone模式需要额外显式配置。解决步骤：

1. 完善tsconfig.json配置
   确保tsconfig.json包含include字段，让TypeScript能正确扫描所有源码文件：

   {
     "compilerOptions": {
       "target": "ES2017",
       "baseUrl": ".",
       "paths": {
         "@/*": ["./src/*"]
       }
     },
     "include": ["src/**/*", "next.config.ts", "postcss.config.js"],
     "exclude": ["node_modules"]
   }
   

2. 在next.config.ts中手动配置webpack别名
   显式告诉webpack解析@别名，避免Amplify环境下自动配置失效：

   import type { NextConfig } from "next";
   import path from "path";
   
   const nextConfig: NextConfig = {
     output: "standalone",
     webpack: (config) => {
       config.resolve.alias["@"] = path.resolve(__dirname, "src");
       return config;
     },
   };
   
   export default nextConfig;
   

问题2：无法找到模块@tailwindcss/postcss #

该问题是因为@tailwindcss/postcss被放在devDependencies中，而Amplify构建环境默认以production模式运行，npm ci会跳过安装开发依赖。解决方法二选一：

1. 将依赖移至dependencies
   修改package.json，把@tailwindcss/postcss和tailwindcss从devDependencies移到dependencies——Tailwind CSS v4的postcss插件是生产构建必需的：

   "dependencies": {
     // ... 其他原有依赖
     "@tailwindcss/postcss": "^4.1.11",
     "tailwindcss": "^4.1.11"
   },
   "devDependencies": {
     // 移除上述两个依赖
   }
   

2. 在Amplify构建时强制安装开发依赖
   修改amplify.yml的preBuild命令，添加--include=dev参数：

   preBuild:
     commands:
       - npm ci --cache .npm --prefer-offline --include=dev
   

额外检查：确保Node.js版本匹配 #

Next.js 15要求Node.js 20.x或更高版本，Amplify默认Node版本可能不满足，需在amplify.yml中指定：

frontend:
  phases:
    preBuild:
      commands:
        - nvm use 20
        - npm ci --cache .npm --prefer-offline

验证步骤 #

1. 推送所有配置修改到代码仓库
2. 触发Amplify重新构建
3. 查看构建日志，确认错误是否消失

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