next.js设置src别名@

最近在学习next.js准备用服务器渲染搭建自己的一个博客项目。 跟着next.js官网(Getting Started: Installation | Next.js (nextjs.org))去一步步创建项目，在开发期间遇到了不少的问题.记录下来也给大家避个坑。

next.js问题记录

1. import xxx from '../../xxx' 发现在写项目时太麻烦了 有文件修改也不太友好 根据官网经行别名配置

相对路径引入 报错：找不到xxx模块

可以先使用上面的配置试试，不行的话在 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, 'src/app'),
      '@/components': path.resolve(__dirname, 'components'),
    }
    return config
  },
}