Next.js App Router图片路径失效时返回not-found.tsx的修正咨询

当你在根目录放置了not-found.tsx时，Next.js会用它接管所有路由（包括静态资源路径）的404响应。要让不存在的图片等静态资源恢复默认的黑屏404样式，有两种实用方案：

方案一：路由组隔离自定义404页面 #

把自定义的not-found.tsx放到路由组目录下，只让页面路由的404触发它，静态资源路径的404则走Next.js默认处理：

1. 调整项目结构：

app/
├── (page-routes)/          # 路由组，命名任意，用括号包裹
│   ├── not-found.tsx       # 自定义404页面，仅作用于该路由组内的页面
│   ├── page.tsx
│   └── about/
│       └── page.tsx
└── public/
    └── your-images/

2. 效果：
   • 访问不存在的页面路由（比如/about/invalid）会显示你的自定义not-found.tsx
   • 访问不存在的静态资源（比如/your-images/broken.jpg）会返回Next.js默认的黑屏404

方案二：用中间件区分静态资源请求 #

如果需要根路由的页面404仍用自定义not-found.tsx，但静态资源走默认404，可以通过中间件判断请求类型：

1. 在项目根目录创建middleware.ts：

import { NextResponse } from 'next/server'
import type { NextRequest } from 'next/server'

export function middleware(request: NextRequest) {
  // 匹配常见图片格式后缀，可根据需求添加其他静态资源类型
  const staticAssetRegex = /\.(jpg|jpeg|png|gif|svg|webp|avif)$/i
  if (staticAssetRegex.test(request.nextUrl.pathname)) {
    // 重定向到一个不存在的路径，触发Next.js默认404页面
    return NextResponse.rewrite(new URL('/__invalid-static', request.url))
  }
  return NextResponse.next()
}

// 配置匹配规则，排除Next.js内置的静态资源路径
export const config = {
  matcher: '/((?!api|_next/static|_next/image|favicon.ico).*)',
}

2. 原理：当请求是不存在的图片时，中间件将请求重写到一个非页面路由的不存在路径，不会触发根目录的not-found.tsx，最终返回Next.js默认的黑屏404。

注意事项 #

• 方案一配置更简单，适合大多数场景
• 方案二更灵活，可针对特定类型的静态资源做单独处理

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