Next.js 如何设置别名？

Question

这是我的配置

在此输入图片描述

但是 Next.js 给了我这个警告

在此输入图片描述

Answer 1

对不起。这是我在 StackOverflow 上的第一个问题

我是这样解决的： 由于我的 Next.JS 是 TypeScript 项目 所以，我的项目有 tsconfig.json

1. 添加baseUrl和路径，解析到IDE

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

2. 别名在 webpack.js 中配置

// next.config.js
const path = require('path')
/** @type {import('next').NextConfig} */
const nextConfig = {
  reactStrictMode: true,
  swcMinify: true,
}

module.exports = {
  ...nextConfig,
  webpack: (config,
    { buildId, dev, isServer, defaultLoaders, nextRuntime, webpack }) => {
    config.resolve.alias = {
      ...config.resolve.alias,
      '@': path.resolve(__dirname),
      '@/components': path.resolve(__dirname, 'components'),
    }
    return config
  },
}

3. 使用

import Layout from '@/components/Layout'

Answer 2

要为代码中的组件设置导入别名，您可以修改项目的 tsconfig.json 文件中的“baseUrl”和“paths”配置

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

Answer 3

这很可能是 https://www.npmjs.com/package/module-alias

与NextJs无关。

Answer 4

我的首选配置

{
  "compilerOptions": {
    "paths": {
      "baseUrl": ["."],
      "@/*": ["./src/*"],
      "@components/*": ["./src/components/*"],
      "@utils/*": ["./src/utils/*"],
      "@hooks/*": ["./src/hooks/*"],
      "@lib/*": ["./src/lib/*"],
      // Other alias configurations
    }
  }
}

现在您可以像这样导入：

import Button from "@components/button" // path ./src/components/button.tsx
import { useHook } from "@hooks/use-hook" // path ./src/hooks/use-hook.ts