Next.JS 的 import alias (@/*)-CSDN博客

本文链接：https://blog.csdn.net/weixin_36829761/article/details/135436756

本文介绍了如何在Next.js项目中利用import别名创建更简洁的导入路径，通过配置jsconfig.json或tsconfig.json文件，以及如何为组件、样式和实用函数设置别名，以提高代码清晰度和维护性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在Next.js中，你可以使用import别名（import alias）来创建更短、更具描述性的模块导入路径。这可以使你的代码库更清晰、更易于维护，避免了在较大的项目中使用冗长的相对路径可能变得繁琐的问题。要在Next.js中设置import别名，你需要在项目中配置jsconfig.json或tsconfig.json文件，具体取决于你是使用JavaScript还是TypeScript。下面是如何在Next.js中设置import别名的步骤：

创建jsconfig.json或tsconfig.json文件：

如果你的项目根目录中还没有jsconfig.json或tsconfig.json文件，请根据你使用的是JavaScript还是TypeScript创建一个。

对于JavaScript，创建jsconfig.json文件：

{
  "compilerOptions": {
    "baseUrl": "./",
    "paths": {
      "@components/*": ["components/*"],
      "@styles/*": ["styles/*"],
      "@utils/*": ["utils/*"]
      // 根据需要添加更多别名
    }
  },
  "include": ["next-env.d.ts", "**/*.js", "**/*.jsx"]
}

对于TypeScript，创建tsconfig.json文件：

{
  "compilerOptions": {
    "baseUrl": "./",
    "paths": {
      "@components/*": ["components/*"],
      "@styles/*": ["styles/*"],
      "@utils/*": ["utils/*"]
      // 根据需要添加更多别名
    }
  },
  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"]
}

为你的文件夹设置别名：
- 在jsconfig.json或tsconfig.json文件的paths部分，你可以定义你的import别名，并将它们映射到项目中的特定文件夹。
- 例如，在上面的配置中，我们设置了三个别名：
  - @components/*：该别名映射到项目中的components文件夹。现在，你可以使用import X from '@components/X'来导入组件，而不是使用import X from '../../components/X'。
  - @styles/*：该别名映射到styles文件夹，允许你使用import 'styles/main.css'来导入样式表，而不是使用import '../../styles/main.css'。
  - @utils/*：该别名映射到utils文件夹，使你可以使用import { func } from '@utils/myFunc'来导入实用函数，而不是使用import { func } from '../../utils/myFunc'。
重启开发服务器：
- 在设置好import别名后，确保重新启动你的Next.js开发服务器以应用更改。
- 现在，你可以在整个Next.js项目中使用定义的别名在导入语句中，使你的代码库更清晰、更有组织性。