Next.js+TypeScript绝对路径失效及TSX转TS导出异常的修复

1. 完善tsconfig.json配置 #

Next.js要求必须设置baseUrl作为路径基准，同时确保include覆盖所有TS/TSX文件，避免类型解析遗漏：

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@layouts": ["./components/layouts/index.ts"],
      "@types/*": ["./types/*"],
      "@common/*": ["./components/common/*"]
    },
    // 保留原有的其他编译选项
  },
  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
  "exclude": ["node_modules"]
}

2. 配置next.config.js（核心步骤） #

Next.js不会自动读取tsconfig的paths配置，需要在webpack中手动添加别名映射：

const path = require('path');

module.exports = {
  webpack: (config) => {
    config.resolve.alias = {
      ...config.resolve.alias,
      '@layouts': path.resolve(__dirname, './components/layouts/index.ts'),
      '@types': path.resolve(__dirname, './types'),
      '@common': path.resolve(__dirname, './components/common')
    };
    return config;
  },
};

3. 修复TSX到TS的导出异常 #

如果index.ts无法正确导出TSX文件的内容，可替换为显式导入导出：

import { MainLayout } from './main-layout';
export { MainLayout };

4. 重启开发服务器 #

修改配置文件后必须重启Next.js开发服务，否则新配置不会生效。

5. 验证导入语句 #

在_app.tsx中确认导入路径正确：

import { MainLayout } from '@layouts';

内容的提问来源于stack exchange，提问作者Mạnh