[Internationalization routes] - The cookie value in the request does not change when we change the language from the client dropdown

[agusnovi]

Summary

Hi, I'm trying to implement internationalization routes that support SEO. I'm getting a problem with the request cookie value.

Here is my code: https://codesandbox.io/p/github/agusnovi/internationalization-routes/main

Attention:

• When I change the language from the dropdown menu, I need to reload the page because I need to refetch the page document to see the new language chosen as a new lang in HTML.
• I use middleware to redirect to the language path based on the language chosen and to set up cookies lang=${selectedLocale} in the NextResponse.
• I use window.location.href to navigate when changing the dropdown language due to refetching the page document needed.

Problem:

• when successfully refetch the new HTML document, the request still use old cookie value which is lang=${old value}.
• My hunch is that happened because the cookie value not update before doing location.href, it makes the request still using old value.

Desired:

• When refetching a new document, I need the request to use new cookie value lang=${selected language} based on the selected language.

middleware.ts

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

const LOCALES = ["id", "en"]
const DEFAULT_LOCALE = "id"
export default function middleware(request: NextRequest) {
    const { pathname } = request.nextUrl
    
    const hasLocale = hasLocaleSegment(pathname)

    const locale = getLocale(request, pathname)
    
    const nextResponse = NextResponse.next({request: request})
    nextResponse.cookies.set('lang', locale, {
        secure: true
    })

    
    if(hasLocale) return nextResponse

    return NextResponse.redirect(new URL(`/${locale}`, request.nextUrl))
}

const hasLocaleSegment = (pathname: string): boolean => LOCALES.some((locale) => pathname.startsWith(`/${locale}/`) || pathname === `/${locale}`)

const getLocale = (req: NextRequest, pathname: string) => {
    const localeCookie = req.cookies.get("lang")?.value
    const localeSearch = req.nextUrl.searchParams.get("lang")
    const localeSegment = pathname.split('/')?.[1].split('?')[0]

    return sanitizeLocale(localeSegment ?? localeCookie ?? localeSearch)
}

const sanitizeLocale = (locale?: string): string => {
    if(locale) {
        const localeLowerCase = locale.toLocaleLowerCase()
        if(/^(id|en)$/.test(localeLowerCase)){
            return localeLowerCase
        }
    }

    return DEFAULT_LOCALE
}

export const config = {
    matcher: [
        '/((?!api|_next/static|_next/image|favicon.ico|sitemap.xml|robots.txt).*)',
    ]
}

SelectLocale.tsx

'use client'
import { useSearchParams } from "next/navigation"

const SelectLocale = ({lang}:{lang: string}) => {
    const search = useSearchParams()
    const handleChange = (e) => {
        const target = `${window.location.origin}/${e.target.value}`
        window.location.href = search.toString().length > 0 ? target.concat(`?${search.toString()}`) : target
    }
    return (
        <select value={lang} onChange={handleChange}>
            <option value="id">ID</option>
            <option value="en">EN</option>
        </select>
    )
}

export default SelectLocale

- App route
- Next 15

[agusnovi]

solved by manually setting the cookie before redirecting uses document.cookie sintax in the client component based from selected language . it will makes the request use the new cookie value which is new language.