别名 | 希曼日记

引言

记录一次给nextjs设置别名.

由于项目的复杂性增加, 项目中多了许多../../../的路径, 看起来难看而且还增加了维护成本,由于是第一次在next.js用配置 别名. 以往在webpack以及vite的使用中知道肯定是要配置相应的配置文件的,但是不能光凭直觉去想,先去看看官方的文档吧.

官网文档是这样介绍[1],官网文档写的很简单: // tsconfig.json or jsconfig.json

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

只需要配置ts的配置文件tsconfig.json就可以了,连webpack.config(next.js是基于webpack)配置都不用写,居然是如此简单,在感叹 next.js 强大的同时按照去做了,但是next.js却给我这样的报错:

无法解析此导入

果然还得自己写配置文件, 在查阅了官网的文档以及在stackoverflow上提问( 虽然没有帮助)之后,自己就找,在翻阅官网以及搜索当中,我找到了答案,以下是自己摸索得到的解决方式:

前置条件

本项目是next.js的TypeScript版本,创建时就集成了ts,默认包含tsconfig.json,如果是js项目,理论只需要配置next的配置文件next.config即可,如果是js项目转成ts的,那么就需要手动添加tsconfig.json

1. 配置别名

在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
  },
}

2. 配置IDE解析

// tsconfig.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,
    "baseUrl": ".",
    "paths": {
      "@/components/*": [
        "./components/*"
      ],
      "@/images/*": [
        "./public/images/*"
      ]
    }
  },
  "include": [
    "next-env.d.ts",
    "**/*.ts",
    "**/*.tsx"
  ],
  "exclude": [
    "node_modules"
  ]
}

本文的next.js版本是12.2.3

参考资料:

[1] https://nextjs.org/docs/advanced-features/module-path-aliases