如何阻止Next.js渲染未定义路由并返回404页面

App Router 方案（Next.js 13+） #

Next.js App Router中，/admin目录会默认匹配所有/admin/*路径，要让未定义的子路由返回404，最简单的方式是：

1. 在app/admin目录下创建not-found.tsx文件，这个文件会自动处理所有/admin下未匹配到具体路由的请求：

// app/admin/not-found.tsx
export default function AdminNotFound() {
  return (
    <div style={{ padding: '2rem', textAlign: 'center' }}>
      <h1>404 - 页面不存在</h1>
      <p>你访问的/admin子路由未定义</p>
    </div>
  );
}

2. 如果需要更严格的路径校验（比如只允许/admin本身，完全拒绝所有子路由），可以在项目根目录创建middleware.ts：

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

export function middleware(request: NextRequest) {
  const pathname = request.nextUrl.pathname;
  // 判断是否是/admin开头但不是/admin本身的路径
  if (pathname.startsWith('/admin/')) {
    return new NextResponse('Not Found', { status: 404 });
  }
  return NextResponse.next();
}

// 指定中间件生效的路径
export const config = {
  matcher: '/admin/:path*',
};

Pages Router 方案（Next.js 12及以下） #

对于Pages Router，pages/admin/index.tsx会匹配/admin及所有/admin/*路径，解决方式如下：

1. 使用Catch-All路由捕获所有/admin子路由，返回404：
   在pages/admin目录下创建[...slug].tsx文件：

// pages/admin/[...slug].tsx
import type { GetServerSideProps } from 'next';

export default function AdminNotFound() {
  return (
    <div style={{ padding: '2rem', textAlign: 'center' }}>
      <h1>404 - 页面不存在</h1>
      <p>你访问的/admin子路由未定义</p>
    </div>
  );
}

// 也可以通过getServerSideProps标记为404
export const getServerSideProps: GetServerSideProps = async () => {
  return {
    notFound: true,
  };
};

2. 或者在admin页面的getServerSideProps中校验路径：
   修改pages/admin/index.tsx：

// pages/admin/index.tsx
import type { GetServerSideProps } from 'next';

export default function AdminPage() {
  return <h1>Admin Dashboard</h1>;
}

export const getServerSideProps: GetServerSideProps = async (context) => {
  const { req } = context;
  const path = req.url;
  // 只允许访问/admin本身，其他/admin/*路径返回404
  if (path !== '/admin') {
    return {
      notFound: true,
    };
  }
  return {
    props: {},
  };
};

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