如何在Next.js的not-found.tsx中返回JSON响应？

嘿，我完全懂你遇到的困扰——app目录根下的not-found.tsx默认是给页面路由返回HTML的，但你希望API端点触发404时能返回JSON响应对吧？别担心，有两种实用的方法可以解决这个问题，完美区分页面和API的404处理逻辑：

方法一：为API路由单独创建404处理文件 #

Next.js的app路由体系中，页面路由和API路由是相互独立的。你可以在app/api目录下专门创建一个not-found.ts文件，这个文件会自动捕获所有匹配不到的API路由请求，直接返回JSON响应：

import { NextResponse } from 'next/server';

// 处理GET请求的API 404
export async function GET() {
  return NextResponse.json({ error: '指定的API端点不存在' }, { status: 404 });
}

// 如果你需要处理POST、PUT等其他HTTP方法，只需添加对应的函数即可
export async function POST() {
  return NextResponse.json({ error: '指定的API端点不存在' }, { status: 404 });
}

export async function PUT() {
  return NextResponse.json({ error: '指定的API端点不存在' }, { status: 404 });
}

这种方法的好处是逻辑清晰，专门针对API路由做处理，完全不会影响根目录not-found.tsx对页面路由404的HTML返回。

方法二：用Middleware全局拦截API请求的404 #

如果你需要更灵活的全局控制（比如根据请求头、参数等动态调整响应），可以使用Next.js的中间件来实现。在项目根目录（或app目录下）创建middleware.ts文件：

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

export function middleware(request: NextRequest) {
  // 只处理以/api开头的请求
  if (request.nextUrl.pathname.startsWith('/api')) {
    // 直接返回JSON格式的404响应
    return NextResponse.json(
      { error: 'API端点未找到', path: request.nextUrl.pathname },
      { status: 404 }
    );
  }

  // 非API请求继续走默认的路由流程
  return NextResponse.next();
}

// 配置中间件的匹配规则，只作用于所有API路径
export const config = {
  matcher: '/api/:path*',
};

这个中间件会拦截所有API路径的请求，当请求的API路由不存在时，直接返回你定义的JSON响应，不会触发页面的not-found.tsx。

需要注意的是，根目录的not-found.tsx依然会正常处理页面路由的404情况，返回你设置的HTML页面，这样就实现了页面和API 404响应的差异化处理。

备注：内容来源于stack exchange，提问作者hantoren