mcpField
N
nextjs-16-proxy

nextjs-16-proxy

github.com/blink-new开发56 次安装
代码仓库

关于 nextjs-16-proxy

为 Next.js 开发者提供迁移指南，将 middleware 用法更新为 Next.js 16 的 `proxy` 约定，并说明如何在路由前处理重写。

主要功能

  1. 01说明 `middleware.ts` 到 `proxy.ts` 的变更
  2. 02介绍文件应放置的位置
  3. 03说明路由前使用 proxy 重写
  4. 04提供 middleware 迁移命令

适用场景

  1. 01迁移 Next.js 15 的 middleware 文件
  2. 02重写与动态路由冲突的路径

安装

复制下面的命令，在终端中运行。

$npx skills add https://github.com/blink-new/claude --skill nextjs-16-proxy

安装后在 Claude Code 中输入/nextjs-16-proxy确认已加载。

详细介绍

Next.js 16 Proxy 约定

Next.js 16 将 middleware 重命名为 proxy，以更准确地体现其网络边界用途。

与 Middleware 的主要变化

旧版（Next.js 15）新版（Next.js 16+）
middleware.tsproxy.ts
export function middleware()export function proxy()
相同位置相同位置

文件位置

将 proxy.ts 放在与 app 或 pages 同一层级的位置：

src/
├── proxy.ts      ← Correct location
├── app/
│   └── ...

不要放在 app/ 内：

src/
├── app/
│   ├── proxy.ts  ← Wrong location
│   └── ...

基本模板

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

export function proxy(request: NextRequest) {
  const { pathname } = request.nextUrl;

  // Example: rewrite /uploads/* to /api/uploads/*
  if (pathname.startsWith("/uploads/")) {
    const newUrl = request.nextUrl.clone();
    newUrl.pathname = pathname.replace("/uploads/", "/api/uploads/");
    return NextResponse.rewrite(newUrl);
  }

  return NextResponse.next();
}

export const config = {
  matcher: ["/uploads/:path*"],
};

常见问题：动态路由捕获路径

当根目录下有类似 [teamSlug] 的动态路由时，它可能会在应用 next.config.ts 中的重写规则之前捕获路径。

问题：

  • 请求：/uploads/image.png
  • 动态路由 [teamSlug] 将其捕获为 teamSlug = "uploads"
  • 导致 404

解决方案： 使用 proxy.ts，而不是 next.config.ts 重写规则。Proxy 会在路由处理之前运行。

迁移命令

npx @next/codemod@canary middleware-to-proxy .

此命令会自动：

  • 将 middleware.ts 重命名为 proxy.ts
  • 将函数名 middleware 更新为 proxy

评论

支持 Markdown