在 Next.js 项目中，@/lib/db 这类路径别名无法解析，通常是因为 TypeScript 的 tsconfig.json 中未正确配置 paths 映射；只需添加 "@/*": ["./src/*"] 并确保配置生效，即可支持 @/ 开头的绝对导入。
在 next.js 项目中，`@/lib/db` 这类路径别名无法解析，通常是因为 typescript 的 `tsconfig.json` 中未正确配置 `paths` 映射；只需添加 `"@/*": ["./src/*"]` 并确保配置生效，即可支持 `@/` 开头的绝对导入。
Next.js（尤其是 App Router 项目）默认不自动启用路径别名（如 @/），即使你将文件放在 src/lib/db.js 下，直接写 import { connectionStr } from "@/lib/db" 仍会触发 Module not found: Can't resolve '@/lib/db' 错误——这是因为模块解析器并不知道 @ 指向何处。
✅ 正确做法是：在项目根目录的 tsconfig.json（或 jsconfig.json，若使用 JavaScript）中显式声明路径映射：
{
"compilerOptions": {
"baseUrl": ".",
"paths": {
"@/*": ["./src/*"]
}
},
"include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
"exclude": ["node_modules"]
}⚠️ 注意事项：
-
baseUrl必须设置为"."（当前目录），否则paths映射可能失效； - 若使用
jsconfig.json（纯 JS 项目），结构类似，但无需compilerOptions.target等 TS 特有字段； - 修改配置后务必重启开发服务器（
ctrl + c→npm run dev），否则变更不会生效； - Next.js 13.4+ 推荐使用
moduleResolution: "bundler"（如上答案所示），它更契合现代打包行为，但对别名支持而言，paths+baseUrl是核心前提； - 路径必须严格匹配：
"@/*"对应"./src/*"，因此@/lib/db→src/lib/db.js，不可多级跳转或遗漏src。
? 小技巧：可在 src/app/layout.tsx 中快速验证别名是否生效：
// src/app/layout.tsx
import { connectionStr } from "@/lib/db"; // ✅ 应无报错
export default function RootLayout({ children }: { children: React.ReactNode }) {
console.log("DB config loaded:", connectionStr);
return <html>{children}</html>;
}总结：路径别名不是 Next.js 的开箱功能，而是由 TypeScript/JavaScript 解析器（通过 tsconfig.json/jsconfig.json）驱动的开发时特性。只要配对 baseUrl 和 paths，并重启服务，@/ 就能像 src/ 下的相对路径一样简洁、可维护地使用——这是大型 Next.js 项目提升代码可读性与可重构性的关键实践之一。
