Next.js中import语句里@符号的作用是什么？

在Next.js项目里，@ 是自定义路径别名，核心作用就是简化文件导入的路径写法，不用再写一堆../这类绕人的相对路径。

具体细节： #

• 这个别名是在项目的配置文件里定义的，用JS的项目看jsconfig.json，用TS的看tsconfig.json。通常会把@映射到项目根目录（如果有src目录，也可能映射到src下）。
• 举个配置的例子，你的配置文件里大概率有类似这样的代码：

  {
    "compilerOptions": {
      "baseUrl": ".",
      "paths": {
        "@/*": ["./*"]
      }
    }
  }
  

  这样一来，@/app/ui/global.css就直接对应项目根目录下的app/ui/global.css文件，和写完整相对路径效果完全一样，但可读性强太多。

用别名的好处： #

• 路径写法简洁直观，一眼就能定位文件在项目里的位置
• 后续如果调整目录结构，只要别名的映射关系不变，所有用@的导入语句都不用修改，省了大量重构的麻烦

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