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'
    }
}
相关推荐
jin12332218 分钟前
React Native鸿蒙跨平台剧本杀组队消息与快捷入口组件,包含消息列表展示、快捷入口管理、快捷操作触发和消息详情预览四大核心功能
javascript·react native·react.js·ecmascript·harmonyos
烬头88212 小时前
React Native鸿蒙跨平台实现二维码联系人APP(QRCodeContactApp)
javascript·react native·react.js·ecmascript·harmonyos
xiaoqi9224 小时前
React Native鸿蒙跨平台如何实现分类页面组件通过searchQuery状态变量管理搜索输入,实现了分类的实时过滤功能
javascript·react native·react.js·ecmascript·harmonyos
打小就很皮...4 小时前
Tesseract.js OCR 中文识别
前端·react.js·ocr
qq_177767374 小时前
React Native鸿蒙跨平台实现应用介绍页,实现了应用信息卡片展示、特色功能网格布局、权限/联系信息陈列、评分展示、模态框详情交互等通用场景
javascript·react native·react.js·ecmascript·交互·harmonyos
jin1233226 小时前
基于React Native鸿蒙跨平台地址管理是许多电商、外卖、物流等应用的重要功能模块,实现了地址的添加、编辑、删除和设置默认等功能
javascript·react native·react.js·ecmascript·harmonyos
2501_920931706 小时前
React Native鸿蒙跨平台医疗健康类的血压记录,包括收缩压、舒张压、心率、日期、时间、备注和状态
javascript·react native·react.js·ecmascript·harmonyos
落霞的思绪6 小时前
配置React和React-dom为CDN引入
前端·react.js·前端框架
橙露7 小时前
React Hooks 深度解析:从基础使用到自定义 Hooks 的封装技巧
javascript·react.js·ecmascript
2501_920931707 小时前
React Native鸿蒙跨平台使用useState管理健康记录和过滤状态,支持多种健康数据类型(血压、体重等)并实现按类型过滤功能
javascript·react native·react.js·ecmascript·harmonyos