Hi @wide shard. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:
#nextjs with next-intl
somber flareBOT
In Next.js, you can set a NEXT_LOCALE=the-locale cookie, which takes priority over the accept-language header. This cookie can be set using a language switcher and when a user comes back to the site, it will leverage the locale specified in the cookie when redirecting from / to the correct locale location. If a user prefers the locale fr in their accept-language header but a NEXT_LOCALE=en cookie is set, the en locale will be used when visiting / and the user will be redirected to the en locale location until the cookie is removed or expired [source (https://nextjs.org/docs/pages/building-your-application/routing/internationalization#leveraging-the-next_locale-cookie)].
If you're having issues with cookies in your middleware, it's important to note that cookies are read-only in server components and allow you to read incoming HTTP request cookies. However, when you set-cookie, it modifies the set-cookie header on the HTTP response. For the incoming request to contain your newly set cookie, you can add it to the incoming request. Here's an example of how you can do this:
const setCookie = (request: NextRequest, response: NextResponse, cookie: ResponseCookie) => {
request.cookies.set(cookie)
response = NextResponse.next({
request: {
headers: request.headers,
},
})
response.cookies.set(cookie)
return response;
}
[source (https://github.com/vercel/next.js/issues/49442)]
If you're using middleware to handle locale changes and you're having issues with the default locale, you can add a prefix to the default locale with a workaround. Here's an example of how you can do this:
import { NextRequest, NextResponse } from 'next/server'
const PUBLIC_FILE = /\.(.*)$/
export async function middleware(req: NextRequest) {
if (
req.nextUrl.pathname.startsWith('/_next') ||
req.nextUrl.pathname.includes('/api/') ||
PUBLIC_FILE.test(req.nextUrl.pathname)
) {
return
}
if (req.nextUrl.locale === 'default') {
const locale = req.cookies.get('NEXT_LOCALE')?.value || 'en'
return NextResponse.redirect(
new URL(`/${locale}${req.nextUrl.pathname}${req.nextUrl.search}`, req.url)
)
}
}
If you're still having issues, it might be helpful to check out some resources on internationalization in Next.js, such as the next-intl (https://next-intl-docs.vercel.app/docs/next-13) library [source (https://nextjs.org/docs/app/building-your-application/routing/internationalization#resources)].
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
wide shard
@somber flare But the problem I'm encountering now is When I change the language between en and th, then I check in Cookies and find that there will be NEXT_LOCALE with a value of en or th.
For example, now the page is in en , NEXT_LOCALE = en , when changing the language it will be NEXT_LOCALE = th , but sometimes when changing the language the value of NEXT_LOCALE does not change.
somber flareBOT
Let me check the knowledge base for you. One moment! :books:
The issue you're experiencing might be related to how you're setting the NEXT_LOCALE cookie when switching languages. The NEXT_LOCALE cookie should be updated every time the language is switched. If it's not updating correctly, it could be due to a problem in your language switching logic.
Unfortunately, the provided knowledge sources do not include specific examples or solutions for this issue. However, you can debug this by checking the function or event handler that's responsible for changing the language and setting the NEXT_LOCALE cookie. Make sure that it's being called and executed correctly when the language is switched.
If you're still having trouble, you might find it helpful to refer to the Next.js documentation or seek help from the Next.js community:
- Next.js Internationalization Documentation (https://nextjs.org/docs/advanced-features/i18n-routing)
- Next.js GitHub Discussions (https://github.com/vercel/next.js/discussions)
- Next.js Spectrum Community (https://spectrum.chat/next-js)