Next.js路径中的'@'符号是什么？新手开发者咨询

这个@是自定义路径别名的前缀，不是Next.js原生语法，也不是JavaScript/TypeScript的内置特性，是通过项目里的jsconfig.json（JavaScript项目）或tsconfig.json（TypeScript项目）配置出来的。

核心作用 #

用来简化导入路径，避免写冗长的相对路径（比如../../components/Footer），让代码更整洁，后续调整项目结构时，也不用批量修改大量导入语句。

配置逻辑 #

你看到的jsconfig.json里的代码就是定义这个别名的关键：

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

• baseUrl: "." 指定项目根目录为路径解析的基础目录
• paths 字段就是别名的映射规则："@/components/*" 会被映射到根目录下的components/*，也就是说@/components/Footer等价于./components/Footer（如果当前文件在子文件夹里，相对路径会更长，别名的优势会更明显）

为什么文档里没专门提？ #

因为这本质是TypeScript/JavaScript语言服务的功能，Next.js只是兼容并支持这种配置，并不是Next.js独有的。只要是使用jsconfig.json或tsconfig.json的项目，都能配置这类路径别名。

另外，@只是社区约定俗成的前缀，你完全可以换成其他字符，比如~或者直接用src，只要在配置里对应修改映射规则就行，效果是一样的。

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