NextJS14 App Router SSR页面slug被误识别为favicon.ico的问题求助

• 检查路由结构
  确认店铺页面路由为app/shop/[slug]/page.tsx，而非app/[slug]/page.tsx。如果是后者，动态路由会匹配所有根路径请求，包括浏览器自动发起的/favicon.ico，导致params.slug被错误赋值为favicon.ico。

• 验证静态资源可正常访问
  直接访问http://localhost:3000/favicon.ico，确认能返回图标文件。若无法访问：

  • 检查public目录下的文件名是否正确（注意大小写，如Favicon.ico与favicon.ico会被视为不同文件）；
  • 确认文件为有效ICO格式，未损坏。

• 改用官方Metadata API配置图标
  在App Router中，推荐使用内置Metadata API替代手动<link>标签，避免路径错误或路由冲突。在layout.tsx中添加：

  export const metadata = {
    icons: {
      icon: '/favicon.ico',
    },
  };
  

  移除原有的<Head>标签配置，让Next.js自动处理favicon请求逻辑。

• 拦截异常路由请求
  在动态路由的page.tsx中添加判断，过滤favicon.ico这类无效slug参数，避免错误API请求：

  import { notFound } from 'next/navigation';
  
  const HomePage = async ({ params, searchParams }) => {
    const category = params.slug || '';
  
    // 拦截无效slug值
    if (category === 'favicon.ico') {
      return notFound();
    }
  
    // 剩余数据获取与渲染逻辑
  };
  

• 清除浏览器缓存
  浏览器可能缓存旧请求路径，导致错误的favicon.ico请求触发动态路由。按下Ctrl+F5强制刷新页面，或清除浏览器缓存后重新测试。

• 使用Middleware拦截特定请求
  若以上方法无效，可通过middleware.ts拦截/favicon.ico请求，直接返回静态资源，避免进入动态路由：

  import { NextResponse } from 'next/server';
  import type { NextRequest } from 'next/server';
  import fs from 'fs/promises';
  import path from 'path';
  
  export async function middleware(request: NextRequest) {
    if (request.nextUrl.pathname === '/favicon.ico') {
      const iconPath = path.join(process.cwd(), 'public', 'favicon.ico');
      const iconBuffer = await fs.readFile(iconPath);
      return new NextResponse(iconBuffer, {
        headers: { 'Content-Type': 'image/x-icon' },
      });
    }
    return NextResponse.next();
  }
  

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