NEXT.js 中间件 NextResponse.redirect 无效

原代码

javascript 复制代码
// src/middleware.js
import { NextResponse } from 'next/server'

export function middleware(request) {
    handleLocale(request)
}

// 处理国际化
const handleLocale = (request) => {
    const locales = ['zh_CN', 'en_US', 'ja_JP']
    const { pathname } = request.nextUrl
    const pathnameHasLocale = locales.some(locale => pathname.startsWith(`/${locale}/`) || pathname === `/${locale}`)

    // 正确进入到匹配语言的目录,不做处理
    if (pathnameHasLocale) {
        // ...
    }
    // 没有进入到匹配的语言目录,设置默认语言,重定向到对应的语言目录
    else {
        const locale = locales[0]
        request.nextUrl.pathname = `/${locale}${pathname}`
        return NextResponse.redirect(request.nextUrl)
    }
}

export const config = {
    // 中间件运行的路径
    matcher: [
        // NEXT.js内部资源路径 /_next
        // e.g. /_next/static/chunks/webpack.js |  /_next/static/chunks/main-app.js |  /_next/static/chunks/app-pages-internals.js
        // 不匹配内部资源,内容资源不需要国际化
        '/((?!_next|favicon.ico).*)',
    ],
}

修改后

NextResponse.redirect 必须要在middleware 方法里执行,不然不生效

javascript 复制代码
// src/middleware.js
export function middleware(request) {
    const localeStatus = handleLocale(request);
    if (localeStatus === 'locale redirect') {
        return NextResponse.redirect(request.nextUrl)
    }
}

// 是否包含国际化的资源路径
const handleLocale = (request) => {
    const locales = ['zh_CN', 'en_US', 'ja_JP']
    const { pathname } = request.nextUrl
    const pathnameHasLocale = locales.some(locale => pathname.startsWith(`/${locale}/`) || pathname === `/${locale}`)

    // 正确进入到匹配语言的目录,不做处理
    if (pathnameHasLocale) {
        return 'locale matched'
    }
    // 没有进入到匹配的语言目录,设置默认语言,重定向到对应的语言目录
    else {
        const locale = locales[0]
        request.nextUrl.pathname = `/${locale}${pathname}`
        return 'locale redirect'
    }
}
相关推荐
To_OC7 小时前
别只拿 useRef 绑 DOM 了,搭配 Web Worker 解决页面卡顿才是真的香
前端·react.js·dom
小当家.1059 小时前
深入理解 ReAct Agent:从原理到 Java 实战
java·react.js·agent·react·架构设计·agent设计
阿黎梨梨13 小时前
React 表单处理与性能优化:从入门到进阶
前端·react.js
breeze jiang13 小时前
React memo、useCallback 与 useMemo:父组件多状态时如何减少无效渲染
前端·javascript·react.js
今天的砖头有点烫手啊15 小时前
AI Agent 开发实战(十):Agent 设计模式(ReAct / Plan-Execute / Reflection)
人工智能·react.js·设计模式
不好听61316 小时前
React useContext:跨层级共享数据的上下文
react.js
不好听61317 小时前
React 自定义 Hook:把响应式与副作用装进 useXxx
react.js
触底反弹17 小时前
🏗️ 写完 Todos 之后,大型 React 项目的 7 个架构真相
前端·react.js·前端框架
kisshyshy17 小时前
从多页面到SPA:React Router 路由进阶完全指南
前端·javascript·react.js
Zzj_tju19 小时前
Tool-Using LLM 论文精读路线:从 ReAct 到可验证工具调用
前端·react.js·前端框架