next.js中设置别名@

最新推荐文章于 2025-10-10 14:45:00 发布

原创最新推荐文章于 2025-10-10 14:45:00 发布 · 2.6k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #开发语言 #typescript

Next.js 专栏收录该内容

3 篇文章

订阅专栏

本文档介绍了在Next.js项目中如何设置别名@，包括安装相关插件，修改.babelrc，创建并配置tsconfig-base.json以及tsconfig.json的继承设置。通过这些步骤，可以简化项目路径引用，提高开发效率。

文章目录

前言
一、安装插件
二、使用步骤
三、效果展示
总结

前言

Next.js中设置别名@

项目目录结构

一、安装插件

使用babel-plugin-module-resolver

# 安装插件
yarn add -D babel-plugin-module-resolver

或

# 安装插件
npm install --save-dev babel-plugin-module-resolver

二、使用步骤

1.修改.babelrc

代码如下（示例）：

// .babelrc
{
  "presets": ["next/babel"],
  "plugins": [
    [
      "import",
      {
        "libraryName": "antd-mobile",
        "libraryDirectory": "es/components",
        "style": false
      }
    ],
    [
      "module-resolver",
      {
        "alias": {
          "@/src": "./src",
          "@/public": "./public"
        }
      }
    ]
  ]
}

2.新建tsconfig-base.json

代码如下（示例）：

// tsconfig-base.json
{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@*": ["src/*"]
    }
  }
}

2.tsconfig.json继承tsconfig-base.json

代码如下（示例）：

// tsconfig.json
{
  "extends": "./tsconfig-base.json",
  "compilerOptions": {
    "target": "es5",
    "lib": ["dom", "dom.iterable", "esnext"],
    "allowJs": true,
    "skipLibCheck": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "noEmit": true,
    "esModuleInterop": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "jsx": "preserve",
    "incremental": true
  },
  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
  "exclude": ["node_modules"]
}