在主机环境创建Next.js应用后遇Webpack错误，如何修复？

为什么Webpack会访问/var/www目录？ #

Webpack（以及Next.js内置的Webpack配置）默认会尝试遍历上级目录来解析依赖、检测项目根目录或监听文件变化。如果你的Next.js项目放在/var/www的子目录下，但主机商未授予你访问/var/www父目录的权限，就会触发权限拒绝错误。

修复步骤 #

1. 限制Webpack的文件监听范围 #

修改项目根目录的next.config.js，通过webpack配置项指定只监听当前项目文件，忽略无权限访问的目录：

const path = require('path');

/** @type {import('next').NextConfig} */
const nextConfig = {
  webpack: (config) => {
    config.watchOptions = {
      ignored: [
        '/var/www/**',
        '**/node_modules/**',
        '**/.git/**'
      ],
      // 若主机商禁用inotify，启用轮询模式适配
      poll: 1000,
      aggregateTimeout: 300
    };
    return config;
  },
};

module.exports = nextConfig;

2. 自定义Webpack缓存目录到有权限的位置 #

默认Webpack缓存可能尝试写入无权限的系统目录，手动指定缓存到项目内的有权限路径：

const path = require('path');

/** @type {import('next').NextConfig} */
const nextConfig = {
  webpack: (config) => {
    config.cache = {
      type: 'filesystem',
      cacheDirectory: path.resolve(__dirname, '.next/cache/webpack'),
      store: 'pack',
    };
    return config;
  },
};

module.exports = nextConfig;

3. 调整项目部署位置 #

若主机商严格限制/var/www目录的访问权限，将项目迁移到你的用户主目录下（如~/my-next-app），避免Webpack尝试访问无权限的父目录。

4. 清除旧缓存并重新构建 #

执行以下命令清除现有缓存，避免旧缓存路径引发的问题：

rm -rf .next/cache node_modules/.cache
npm install
npm run dev

环境相关的可能性 #

这类错误大概率和主机商的环境权限限制有关：

• 共享托管环境通常会限制用户访问上级目录或系统目录；
• 部分环境禁用了文件系统的inotify监听机制，导致Webpack只能用轮询模式；
• 主机商可能限制了缓存目录的写入权限。

内容的提问来源于stack exchange，提问作者user2301879