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'
    }
}
相关推荐
雲墨款哥2 小时前
从一行好奇的代码说起:React的 useEffect 到底是不是生命周期?
前端·react.js·设计模式
加油乐2 小时前
react基础概念合集
前端·react.js
AC赳赳老秦3 小时前
前端可视化组件开发:DeepSeek辅助Vue/React图表组件编写实战
前端·vue.js·人工智能·react.js·信息可视化·数据分析·deepseek
老朋友此林3 小时前
React Hook原理速通笔记1(useEffect 原理、使用踩坑、渲染周期、依赖项)
javascript·笔记·react.js
yyyao6 小时前
🔥🔥🔥 React18 源码学习 - 容器的挂载
react.js·源码阅读
Eadia6 小时前
React基础框架搭建8-axios封装与未封装,实现 API 请求管理:react+router+redux+axios+Tailwind+webpack
react.js·前端框架·前端工程化
北辰alk6 小时前
深入理解 React Suspense 组件:原理、使用场景与最佳实践
react.js
怕浪猫6 小时前
React从入门到出门第三章 虚拟 DOM 与并发渲染基础
前端·javascript·react.js
名誉寒冰6 小时前
基于 React + Three.js + 大模型的全息地球 Web 项目(水个web课程设计)
前端·javascript·react.js·ai编程
徐同保8 小时前
react组件内添加一个全局点击时间,点击函数能区分是否是某个特定的id的dom触发的
前端·javascript·react.js