Next.js中限制/pages路径页面访问并跳转至404页面

问题分析 #

你需要限制用户直接访问/pages目录下的特定页面（比如/navbar），即使页面文件存在，也要将这类请求重定向到404页面。之前用next-redirects的方案已过时，以下提供两种可靠的实现方式。

方案一：单个页面独立处理（简单直接） #

直接在目标页面文件（如/pages/navbar.tsx）中添加重定向逻辑，兼顾服务端与客户端场景：

import { useEffect } from 'react';
import { useRouter } from 'next/router';
import Error from 'next/error';

export default function Navbar() {
  const router = useRouter();

  // 客户端跳转，避免用户停留目标页面
  useEffect(() => {
    router.push('/404');
  }, [router]);

  // 服务端提前返回404状态，防止搜索引擎抓取或直接访问
  export async function getServerSideProps(context) {
    const { res } = context;
    res.statusCode = 404;
    return { props: {} };
  }

  // 兜底渲染404组件
  return <Error statusCode={404} />;
}

方案二：中间件全局批量处理（推荐多页面场景） #

如果需要限制多个页面，使用Next.js 12+支持的中间件统一管理，在项目根目录创建middleware.ts文件：

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

// 定义需要限制访问的页面路径列表
const restrictedPaths = ['/navbar', '/sidebar'];

export function middleware(request: NextRequest) {
  const path = request.nextUrl.pathname;
  
  // 判断当前路径是否在限制列表中
  if (restrictedPaths.includes(path)) {
    // 重写路径到404并设置状态码
    const url = request.nextUrl.clone();
    url.pathname = '/404';
    return NextResponse.rewrite(url, { status: 404 });
  }

  // 允许其他路径正常访问
  return NextResponse.next();
}

// 指定中间件生效的路径匹配规则，支持通配符如'/pages/*'
export const config = {
  matcher: ['/navbar', '/sidebar'],
};

注意事项 #

• 单个页面限制选方案一，批量页面限制选方案二，后者更易维护。
• 仅用客户端useEffect处理会导致用户短暂看到目标页面，必须结合服务端逻辑才完整。
• 使用中间件时，确保Next.js版本在12.2及以上，低版本需先升级框架。

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