Next.js 13中如何禁止app目录内组件生成路由且不移出组件？

下面是几种不用把组件移出app目录就能禁止目标路由访问的方法：

方法1：直接返回404页面 #

在app/MenuItem/page.tsx中调用Next.js的notFound方法，用户访问该路由时会直接触发404页面，无法获取组件内容：

import { notFound } from 'next/navigation';

export default function MenuItemPage() {
  notFound();
}

这种方式操作简单，Next.js会自动处理成标准的404响应。

方法2：用中间件拦截路由 #

在项目根目录创建middleware.ts文件，通过路由匹配拦截/MenuItem的访问请求，可自定义返回禁止访问提示或重定向到其他页面：

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

export function middleware(request: NextRequest) {
  if (request.nextUrl.pathname === '/MenuItem') {
    // 方案1：返回403禁止访问状态
    return new NextResponse('禁止访问', { status: 403 });
    // 方案2：重定向到首页
    // return NextResponse.redirect(new URL('/', request.url));
  }
}

// 指定中间件作用的路由
export const config = {
  matcher: ['/MenuItem'],
};

这种方式灵活性更高，适合需要批量处理路由拦截或自定义拦截逻辑的场景。

方法3：调整组件文件结构 #

如果MenuItem只是一个供其他页面调用的共享组件，不需要作为独立路由存在，可以修改文件结构：

• 将app/MenuItem/page.tsx重命名为app/MenuItem/MenuItem.tsx
• 删除原有的page.tsx文件，这样Next.js就不会生成/MenuItem路由，组件依然保留在app目录中，其他页面可正常导入使用。

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