Next.js中间件重复请求后端接口：如何实现单次调用？

问题根源 #

你的代码把fetch放在了中间件逻辑最前面，没有先过滤无需处理的请求。中间件会对所有进入应用的请求执行——包括静态资源（图片、CSS等）、/_next路径的内部请求，甚至重定向后的请求，这些都会触发fetch，导致后端收到重复请求。

修复代码 #

把fetch移到请求过滤逻辑之后，只在需要处理的请求分支里执行：

import { NextResponse } from 'next/server';

const PUBLIC_FILE = /\.(.*)$/;

export async function middleware(req, event) {
    const { pathname, locale, search } = req.nextUrl;

    // 先过滤无需处理的请求，直接放行，不执行后续逻辑
    if (pathname.startsWith('/_next') || pathname.includes('/api/') || PUBLIC_FILE.test(pathname)) {
        return NextResponse.next();
    }

    // 仅在locale为default时执行请求和重定向
    if (locale === 'default') {
        const userLocale = req.cookies.get('NEXT_LOCALE') || 'en';
        // 改用async/await更直观，也能避免Promise链式调用的潜在问题
        const res = await fetch('http://localhost:5000/api/auth');
        const json = await res.json();
        console.log(json);

        return NextResponse.redirect(new URL(`/${userLocale}${pathname}${search}`, req.url));
    }

    // 其他合法locale的请求，直接放行
    return NextResponse.next();
}

核心优化点 #

• 提前过滤请求：先筛掉静态资源、API、/_next路径的请求，这些场景不需要执行后端请求。
• 限定执行时机：只在需要处理locale重定向的分支里调用fetch，重定向后的请求locale不再是default，不会重复触发。
• 规范异步写法：用async/await替代Promise链式调用，逻辑更清晰，也能避免未完成请求导致的异常。

如果需要在所有非静态资源请求中执行fetch，又不想重复触发，可以通过自定义cookie或请求头标记已处理的请求，避免重复执行。

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