Next.js（v14.1.3）项目如何简化重复导入路径？

方式一：在目标目录添加package.json #

在path/to/foo目录下新建一个package.json文件，内容根据你的实际文件名调整：

{
  "main": "./foo.js"
}

比如你的文件是foo.tsx，就把main的值改成./foo.tsx。这样Node.js和Next.js的模块解析器会自动识别这个配置，当你写import foo from 'path/to/foo'时，会自动加载该目录下main指定的文件，完全满足你保留文件在foo目录里的需求。

方式二：配置Next.js模块别名（适合高频使用的模块） #

如果这个foo模块是项目里常用的，还可以通过tsconfig.json或jsconfig.json配置别名来简化导入。以TypeScript项目为例，在根目录的tsconfig.json中修改compilerOptions：

{
  "compilerOptions": {
    // 其他配置...
    "paths": {
      "@/foo": ["./src/path/to/foo/foo.tsx"]
    }
  }
}

之后就能用import foo from '@/foo'来导入，比写全路径更简洁。不过单个模块的话，方式一的配置更轻量，不需要改动全局配置。

注意：如果用TypeScript，要确保文件扩展名和配置里的一致，Next.js会自动识别这些解析规则。

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