Next.js App Router动态路由下静态文件访问异常问题求助

按以下步骤排查并解决问题：

• 检查路由重写/重定向配置
  打开项目根目录的next.config.js，确保没有将/images或通配路径导向动态路由的规则。比如删除类似下面的错误配置：

  module.exports = {
    async rewrites() {
      return [
        // 移除这类会干扰静态文件匹配的规则
        {
          source: '/:path*',
          destination: '/[companyslug]/:path*',
        },
      ];
    },
  };
  

• 过滤动态路由的参数值
  在app/[companyslug]/page.jsx的generateStaticParams函数中，排除与public目录下静态资源路径重名的slug（比如images），避免静态生成的路由覆盖静态文件路径：

  // app/[companyslug]/page.jsx
  export async function generateStaticParams() {
    const companies = await fetchCompanies(); // 你的公司slug获取逻辑
    // 过滤掉与静态资源目录重名的slug
    return companies
      .filter(company => company.slug !== 'images')
      .map(company => ({
        companyslug: company.slug,
      }));
  }
  

• 清除缓存并重启服务
  删除项目根目录下的.next文件夹，重启Next.js开发服务器，同时清除浏览器缓存。开发环境的缓存偶尔会导致路由匹配逻辑异常。

补充说明：Next.js默认路由匹配优先级为 public目录静态文件 > 静态生成路由 > 动态路由，正常情况下/images/img.png会直接返回public目录下的资源。出现冲突基本是上述某一处配置或逻辑干扰了默认优先级。

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