如何在NextJS开发模式下预编译所有页面？

• 使用--no-lazy启动开发服务器
  直接在启动命令中添加--no-lazy参数，关闭Next.js的按需编译特性，启动时一次性编译所有页面：

  next dev --no-lazy
  

  这会延长开发服务器的启动时间，但后续导航到任何页面都不会再触发实时编译，彻底解决导航等待问题。

• 自定义Webpack配置强制预编译所有页面
  如果--no-lazy不满足需求，可以在next.config.js中修改Webpack配置，手动将所有页面加入编译入口：

  const fs = require('fs');
  const path = require('path');
  
  module.exports = {
    webpack: (config, { dev, isServer }) => {
      if (dev && !isServer) {
        // 遍历pages目录下所有页面文件
        const pagesDir = path.join(__dirname, 'pages');
        const pageEntries = fs.readdirSync(pagesDir)
          .filter(file => file.match(/\.(js|ts|tsx)$/))
          .map(file => path.join(pagesDir, file));
        
        // 将页面文件添加到Webpack入口
        pageEntries.forEach(entry => {
          config.entry[entry] = entry;
        });
      }
      return config;
    },
  };
  

  这个方法更灵活，但需要注意维护，避免遗漏新添加的页面。

• 关于useRouter预取无效的说明
  开发模式下useRouter.prefetch()之所以没效果，是因为预取的是未编译的模块代码，当你实际导航时，Next.js还是需要先编译对应的页面。只有在生产模式下，预取才会加载已编译好的静态资源，提升导航速度。

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