scarlet epoch
I'm reading on the documentation that
module.exports = {
i18n: {
locales: ['en-US', 'fr', 'nl-NL'],
defaultLocale: 'en-US',
},
}
will automatically add routing to en-US, fr, and nl-NL
how do I actually get the page? does this mean that I can just add /pages/fr/blog/page.tsx and the router will route me to that page?
empty forgeBOT
Hi @scarlet epoch. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:
Based on the information provided in the knowledge sources, I can help clarify how i18n routing works in Next.js.
The configuration you've shown does indeed set up internationalization for your Next.js application. However, it's important to understand that this configuration alone doesn't automatically create separate pages for each locale. Instead, it sets up the routing structure to handle these locales.
Here's how it works:
With this configuration, Next.js will handle routes for the specified locales ('en-US', 'fr', 'nl-NL') Internationalization (i18n) Routing (https://nextjs.org/docs/pages/building-your-application/routing/internationalization#getting-started).
For the default locale ('en-US' in this case), pages will be served from the root path. For other locales, pages will be served with the locale prefix Sub-path Routing (https://nextjs.org/docs/pages/building-your-application/routing/internationalization#locale-strategies).
You don't need to create separate pages for each locale. Instead, you create your pages as normal in the /pages directory, and Next.js will handle serving these pages for different locales.
For example, if you have a file /pages/blog.js, it will be accessible at:
/blog (for the default locale 'en-US')/fr/blog (for the 'fr' locale)/nl-nl/blog (for the 'nl-NL' locale)You don't need to create /pages/fr/blog/page.tsx. The same page component will be used for all locales, and you can access the current locale information within your component to display translated content as needed.
To handle locale-specific content within your pages, you can use the Next.js router to access the current locale:
import { useRouter } from 'next/router'
export default function BlogPage() {
const router = useRouter()
const { locale } = router// Use the locale to display translated content
// ...
}
**Accessing the locale information** (<https://nextjs.org/docs/pages/building-your-application/routing/internationalization#accessing-the-locale-information>)
Remember, this setup is designed to use the same page component for all locales, allowing you to handle translations and locale-specific content within the component itself, rather than creating separate page files for each locale.
----------------------
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
----------------------@empty forge I have statically generated pages at build time that have no idea of the locale. How can I access those?
empty forgeBOT
Let me check the knowledge base for you again. Give me one moment! :books:
To access statically generated pages that have no awareness of the locale in a Next.js application with internationalization (i18n) configured, you have a few options:
Disable automatic locale detection:
You can disable the automatic locale detection in your next.config.js file:
module.exports = {
i18n: {
localeDetection: false,
},
}
This will prevent Next.js from automatically redirecting based on the user's preferred locale Disabling Automatic Locale Detection (https://nextjs.org/docs/pages/building-your-application/routing/internationalization#disabling-automatic-locale-detection).
Use Static Generation without data:
If your pages don't require locale-specific data, you can use Static Generation without data. These pages will be generated at build time for all configured locales Static Generation without data (https://nextjs.org/docs/pages/building-your-application/rendering/static-site-generation#static-generation-without-data).
Use getStaticProps with locale handling:
If you need to handle locales for statically generated pages, you can use getStaticProps and return notFound: true for locales you don't want to generate:
export async function getStaticProps({ locale }) {
if (locale !== 'en-US') {
return {
notFound: true,
}
}
// Your normal getStaticProps logic here
return {
props: {
// ...
},
}
}
This approach allows you to generate the page only for specific locales Non-dynamic getStaticProps Pages (https://nextjs.org/docs/pages/building-your-application/routing/internationalization#non-dynamic-getstaticprops-pages).
Use getStaticPaths for dynamic routes:
For dynamic routes, you can use getStaticPaths to specify which paths and locales to pre-render:
export async function getStaticPaths({ locales }) {
return {
paths: [
{ params: { slug: 'my-post' }, locale: 'en-US' },
// Add other paths and locales as needed
],
fallback: false,
}
}
This allows you to control which locales are pre-rendered for each dynamic path Dynamic Routes and getStaticProps Pages (https://nextjs.org/docs/pages/building-your-application/routing/internationalization#dynamic-routes-and-getstaticprops-pages).
Remember, if you're using the App Router (app directory), you would use generateStaticParams instead of getStaticPaths generateStaticParams (https://nextjs.org/docs/app/api-reference/functions/generate-static-params#examples).
scarlet epoch
@empty forge ok and once those pages are generated how do I redirect the users based on their locale
empty forgeBOT
Let me check the knowledge base for you again. Give me one moment! :books:
To redirect users based on their locale after your pages have been statically generated, you can use Next.js Middleware. This allows you to implement custom routing logic and redirect users based on their preferred language. Here's how you can do it:
middleware.ts (or middleware.js) file in the root of your project:import { NextRequest, NextResponse } from 'next/server'
import Negotiator from 'negotiator'
import { match } from '@formatjs/intl-localematcher'
let locales = ['en-US', 'fr', 'nl-NL']
let defaultLocale = 'en-US'
function getLocale(request: NextRequest) {
const negotiatorHeaders: Record<string, string> = {}
request.headers.forEach((value, key) => (negotiatorHeaders[key] = value))
let languages = new Negotiator({ headers: negotiatorHeaders }).languages()
return match(languages, locales, defaultLocale)
}
export function middleware(request: NextRequest) {
const pathname = request.nextUrl.pathname
const pathnameIsMissingLocale = locales.every(
(locale) => !pathname.startsWith(`/${locale}/`) && pathname !== `/${locale}`
)
if (pathnameIsMissingLocale) {
const locale = getLocale(request)
return NextResponse.redirect(
new URL(`/${locale}${pathname}`, request.url)
)
}
}
export const config = {
matcher: [
'/((?!api|_next/static|_next/image|favicon.ico).*)',
],
}
This middleware does the following:
Accept-Language header.This approach is based on the routing overview provided in the Next.js documentation for the App Router Routing Overview (https://nextjs.org/docs/app/building-your-application/routing/internationalization#routing-overview). While the documentation is for the App Router, the middleware approach works for both the Pages Router and the App Router.
next.config.js to match the locales you're supporting:module.exports = {
i18n: {
locales: ['en-US', 'fr', 'nl-NL'],
defaultLocale: 'en-US',
},
}
Getting started with i18n (https://nextjs.org/docs/pages/building-your-application/routing/internationalization#getting-started)
With this setup, when a user visits your site:
/about), the middleware will redirect them to the appropriate localized version (e.g., /fr/about for French users)./fr/about), the middleware will allow the request to proceed normally.This approach ensures that users are directed to the correct localized version of your statically generated pages based on their browser's language preferences.
Remember to install the required packages (@formatjs/intl-localematcher and negotiator) if you haven't already:
npm install @formatjs/intl-localematcher negotiator
@empty forge can I match all routes ending with /compendium?
empty forgeBOT
Let me check the knowledge base for you again. Give me one moment! :books:
Yes, you can match all routes ending with /compendium in your Next.js middleware. To do this, you'll need to modify the matcher configuration in your middleware file. Here's how you can achieve this:
export const config = {
matcher: [
'/:path*/compendium',
// Keep your existing matchers if needed
'/((?!api|_next/static|_next/image|favicon.ico).*)',
],
}
This configuration uses a wildcard pattern /:path*/compendium to match any route that ends with /compendium, regardless of what comes before it. The :path* part allows for any number of path segments before compendium.
Here are some examples of paths that would match:
/compendium/games/compendium/category/subcategory/compendiumYou can add this matcher to your existing configuration, as shown in the example above. This approach is based on the custom matcher config documentation for Next.js middleware Match paths based on custom matcher config (https://vercel.com/docs/functions/edge-middleware/middleware-api#match-paths-based-on-custom-matcher-config).
Remember that the order of matchers matters, so place more specific matchers (like the /compendium one) before more general ones.
If you need to perform specific actions for these /compendium routes in your middleware function, you can add a condition to check the pathname:
export function middleware(request: NextRequest) {
const pathname = request.nextUrl.pathname
if (pathname.endsWith('/compendium')) {
// Your specific logic for /compendium routes
}
// Your existing middleware logic
}
/compendium in your Next.js application's middleware.
scarlet epoch
@empty forge Can you change the middleware to route all routes from **/compendium to **/<locale>/compendium
empty forgeBOT
Let me check the knowledge base for you again. Give me one moment! :books:
Certainly! I can help you modify the middleware to route all paths ending with /compendium to include the appropriate locale prefix. Here's how you can update your middleware to achieve this:
import { NextRequest, NextResponse } from 'next/server'
import Negotiator from 'negotiator'
import { match } from '@formatjs/intl-localematcher'
let locales = ['en-US', 'fr', 'nl-NL']
let defaultLocale = 'en-US'
function getLocale(request: NextRequest) {
const negotiatorHeaders: Record<string, string> = {}
request.headers.forEach((value, key) => (negotiatorHeaders[key] = value))
let languages = new Negotiator({ headers: negotiatorHeaders }).languages()
return match(languages, locales, defaultLocale)
}
export function middleware(request: NextRequest) {
const pathname = request.nextUrl.pathname
if (pathname.endsWith('/compendium')) {
const pathnameIsMissingLocale = locales.every(
(locale) => !pathname.startsWith(`/${locale}/`)
)
if (pathnameIsMissingLocale) {
const locale = getLocale(request)
const newPath = `/${locale}${pathname}`
return NextResponse.redirect(new URL(newPath, request.url))
}
}
// Your existing middleware logic for other routes
}
export const config = {
matcher: [
'/:path*/compendium',
// Keep your existing matchers if needed
'/((?!api|_next/static|_next/image|favicon.ico).*)',
],
}
This middleware does the following:
/compendium.getLocale function.This approach will handle routes like:
/compendium → /<locale>/compendium/games/compendium → /<locale>/games/compendium/category/subcategory/compendium → /<locale>/category/subcategory/compendiumThe matcher configuration ensures that this middleware function is only called for paths ending with /compendium, improving performance by not running unnecessary checks on other routes.
This solution is based on the routing overview and middleware examples provided in the Next.js documentation Routing Overview (https://nextjs.org/docs/app/building-your-application/routing/internationalization#routing-overview) and Middleware (https://nextjs.org/docs/app/building-your-application/routing/middleware).
Remember to keep your next.config.js file updated with the correct locale configuration:
module.exports = {
i18n: {
locales: ['en-US', 'fr', 'nl-NL'],
defaultLocale: 'en-US',
},
}
/compendium are properly localized based on the user's preferred language.
scarlet epoch
@empty forge I'm getting ERR_TOO_MANY_REDIRECTS
empty forgeBOT
Let me check the knowledge base for you again. Give me one moment! :books:
I apologize for the inconvenience you're experiencing with the ERR_TOO_MANY_REDIRECTS error. This error typically occurs when there's a redirection loop in your application. Based on the information provided in the knowledge sources, I can suggest a few potential solutions:
Check your middleware logic:
The error might be caused by the middleware continuously redirecting the request. Make sure your middleware isn't creating an infinite loop. Here's a modified version of the middleware that includes a check to prevent multiple redirects:
export function middleware(request: NextRequest) {
const pathname = request.nextUrl.pathname
if (pathname.endsWith('/compendium')) {
const pathnameIsMissingLocale = locales.every(
(locale) => !pathname.startsWith(`/${locale}/`)
)
if (pathnameIsMissingLocale) {
const locale = getLocale(request)
const newPath = `/${locale}${pathname}`
// Check if we're not already on the localized path
if (newPath !== pathname) {
return NextResponse.redirect(new URL(newPath, request.url))
}
}
}
// Your existing middleware logic for other routes
}
This modification ensures that the middleware only redirects if the new path is different from the current path Github Issue: 307 redirect loop (https://github.com/vercel/next.js/issues/55648).
Disable automatic locale detection:
If the problem persists, you might want to try disabling the automatic locale detection in your next.config.js:
module.exports = {
i18n: {
locales: ['en-US', 'fr', 'nl-NL'],
defaultLocale: 'en-US',
localeDetection: false,
},
}
This prevents Next.js from automatically redirecting based on the user's preferred locale, which might be conflicting with your custom middleware Disabling Automatic Locale Detection (https://nextjs.org/docs/pages/building-your-application/routing/internationalization#disabling-automatic-locale-detection).
Check for conflicts with rewrites or redirects:
Ensure that you don't have any conflicting rewrites or redirects in your next.config.js that might be causing a loop with your middleware Github Issue: 307 redirect loop (https://github.com/vercel/next.js/issues/55648).
Clear your browser cache and try in incognito mode:
Sometimes, cached redirects can cause this error. Try clearing your browser cache and accessing your site in an incognito/private browsing window.
If none of these solutions resolve the issue, you might need to debug your middleware more thoroughly. You can add console logs in your middleware function to track the flow of requests and identify where the loop is occurring. Remember to check these logs in your server console, not the browser console.
scarlet epoch
@empty forge I have the following code
import { NextRequest, NextResponse } from 'next/server'
import Negotiator from 'negotiator'
import { match } from '@formatjs/intl-localematcher'
const locales = ['en-US', 'fr', 'nl-NL']
const defaultLocale = 'en-US'
function getLocale(request: NextRequest) {
const negotiatorHeaders: Record<string, string> = {}
request.headers.forEach((value, key) => (negotiatorHeaders[key] = value))
const languages = new Negotiator({ headers: negotiatorHeaders }).languages()
const matchedLocale = match(languages, locales, defaultLocale)
console.log('Detected locale:', matchedLocale)
return matchedLocale
}
export function middleware(request: NextRequest) {
const pathname = request.nextUrl.pathname
console.log('Requested pathname:', pathname)
// Check if the path is within /blog and ends with /compendium
const isCompendiumPage = pathname.startsWith('/blog') && pathname.endsWith('/compendium')
console.log('Is Compendium Page:', isCompendiumPage)
// Use a regular expression to check if the pathname has a locale prefix
const localePrefixRegex = new RegExp(^/(${locales.join('|')})/)
const hasLocalePrefix = localePrefixRegex.test(pathname)
console.log('Has Locale Prefix:', hasLocalePrefix)
if (isCompendiumPage && !hasLocalePrefix) {
const locale = getLocale(request)
const redirectUrl = new URL(/${locale}${pathname}, request.url)
console.log('Redirecting to:', redirectUrl.toString())
return NextResponse.redirect(redirectUrl)
}
// Log if no redirect is necessary and proceed normally
console.log('No redirect needed, continuing to:', pathname)
return NextResponse.next()
}
export const config = {
matcher: ['/:path*/compendium', '/((?!api|_next/static|_next/image|favicon.ico).*)'],
}
But the logs are saying
dreamgrove-git-i8n-thevinters-projects.vercel.app
/en-US/blog/balance/compendium
Requested pathname: /blog/balance/compendium
why is HasLocalePrefix false
empty forgeBOT
Let me check the knowledge base for you again. Give me one moment! :books:
Based on the logs you've provided and the code you've shared, I can see why you're getting this unexpected behavior. The issue is in how the pathname is being processed in your middleware function. Let me explain:
The log shows that the actual requested pathname is /blog/balance/compendium, not /en-US/blog/balance/compendium as you might expect.
Your localePrefixRegex is correctly defined to match paths starting with a locale, but it's being applied to the wrong pathname.
The reason HasLocalePrefix is false is because the pathname variable in your middleware function is not including the locale prefix. This is likely due to how Next.js handles internationalized routing internally.
To fix this issue, you should modify your middleware to check the full URL path, not just the pathname. Here's how you can adjust your code:
export function middleware(request: NextRequest) {
const fullPath = request.nextUrl.pathname
console.log('Full requested path:', fullPath)
// Check if the path is within /blog and ends with /compendium
const isCompendiumPage = fullPath.includes('/blog') && fullPath.endsWith('/compendium')
console.log('Is Compendium Page:', isCompendiumPage)
// Use a regular expression to check if the fullPath has a locale prefix
const localePrefixRegex = new RegExp(`^/(${locales.join('|')})`)
const hasLocalePrefix = localePrefixRegex.test(fullPath)
console.log('Has Locale Prefix:', hasLocalePrefix)
if (isCompendiumPage && !hasLocalePrefix) {
const locale = getLocale(request)
const redirectUrl = new URL(`/${locale}${fullPath}`, request.url)
console.log('Redirecting to:', redirectUrl.toString())
return NextResponse.redirect(redirectUrl)
}// Log if no redirect is necessary and proceed normally
console.log('No redirect needed, continuing to:', fullPath)
return NextResponse.next()
}
These changes should correctly identify when a locale prefix is present and prevent unnecessary redirects.
Additionally, you might want to adjust your `matcher` configuration to ensure it's catching the full path including the locale:
```typescript
export const config = {
matcher: ['/:locale?/:path*/compendium', '/((?!api|_next/static|_next/image|favicon.ico).*)'],
}
This matcher will catch paths both with and without a locale prefix.
scarlet epoch
@empty forge I'm still getting
dreamgrove-git-i8n-thevinters-projects.vercel.app
/en-US/blog/balance/compendium
Full requested path: /blog/balance/compendium
I assum it's because the request path is different from the full requested path for some reason
empty forgeBOT
Let me check the knowledge base for you again. Give me one moment! :books:
You're correct in your observation. The issue persists because there's a discrepancy between the full URL path and the pathname that Next.js is providing to the middleware. This is a known issue with Next.js when using internationalization (i18n) together with middleware.
Based on the information from the Github Issue: Server side locale always default in dynamic routes when a middleware is present (https://github.com/vercel/next.js/issues/54217), this problem occurs because the middleware receives the path without the locale prefix, even though the actual URL includes it.
To work around this issue, you can try the following approach:
x-middleware-prefetch header:export function middleware(request: NextRequest) {
const fullPath = request.url // Use the full URL instead of pathname
console.log('Full URL:', fullPath)
// Extract the path from the full URL
const urlPath = new URL(fullPath).pathname
console.log('URL Path:', urlPath)
// Check if the path is within /blog and ends with /compendium
const isCompendiumPage = urlPath.includes('/blog') && urlPath.endsWith('/compendium')
console.log('Is Compendium Page:', isCompendiumPage)
// Use a regular expression to check if the urlPath has a locale prefix
const localePrefixRegex = new RegExp(`^/(${locales.join('|')})`)
const hasLocalePrefix = localePrefixRegex.test(urlPath)
console.log('Has Locale Prefix:', hasLocalePrefix)
// Check if this is a prefetch request
const isPrefetch = request.headers.get('x-middleware-prefetch') === '1'if (isCompendiumPage && !hasLocalePrefix && !isPrefetch) {
const locale = getLocale(request)
const redirectUrl = new URL(/${locale}${urlPath}, request.url)
console.log('Redirecting to:', redirectUrl.toString())
return NextResponse.redirect(redirectUrl)
}
// Log if no redirect is necessary and proceed normally
console.log('No redirect needed, continuing to:', urlPath)
return NextResponse.next()
}
2. Update your `next.config.js` to disable automatic locale detection:
```javascript
module.exports = {
i18n: {
locales: ['en-US', 'fr', 'nl-NL'],
defaultLocale: 'en-US',
localeDetection: false, // Add this line
},
}
This configuration change prevents Next.js from automatically redirecting based on the user's preferred locale, which might be conflicting with your custom middleware Disabling Automatic Locale Detection (https://nextjs.org/docs/pages/building-your-application/routing/internationalization#disabling-automatic-locale-detection).
next.config.js and implementing all locale-related logic in your middleware.These changes should help resolve the discrepancy between the actual URL and the path provided to the middleware. If you're still experiencing issues, it might be worth creating a minimal reproduction of the problem and reporting it to the Next.js GitHub repository, as this seems to be a recurring issue with the interaction between i18n and middleware in Next.js.
Github Issue: 307 redirect loop when using locale together with middleware in 13.5.1 (https://github.com/vercel/next.js/issues/55648)
scarlet epoch
dreamgrove-git-i8n-thevinters-projects.vercel.app
/en-US/blog/balance/compendium
Full URL: https://dreamgrove-git-i8n-thevinters-projects.vercel.app/blog/balance/compendium
empty forgeBOT
Let me check the knowledge base for you again. Give me one moment! :books:
Based on the logs you've provided, it's clear that there's still a discrepancy between the full URL and the path that Next.js is providing to the middleware. This is a known issue when using internationalization (i18n) with middleware in Next.js.
The problem is that the middleware is receiving the path without the locale prefix (/blog/balance/compendium), even though the actual URL includes it (/en-US/blog/balance/compendium). This causes the middleware to incorrectly determine that there's no locale prefix, leading to an unnecessary redirect and potentially causing a redirect loop.
To resolve this issue, you can try the following approach:
export function middleware(request: NextRequest) {
const fullUrl = request.url
console.log('Full URL:', fullUrl)
const urlObj = new URL(fullUrl)
const pathWithoutLocale = urlObj.pathname
console.log('Path without locale:', pathWithoutLocale)
// Extract locale from the path
const pathParts = pathWithoutLocale.split('/')
const possibleLocale = pathParts[1]
const hasLocalePrefix = locales.includes(possibleLocale)
console.log('Has Locale Prefix:', hasLocalePrefix)
const isCompendiumPage = pathWithoutLocale.includes('/blog') && pathWithoutLocale.endsWith('/compendium')
console.log('Is Compendium Page:', isCompendiumPage)
if (isCompendiumPage && !hasLocalePrefix) {
const locale = getLocale(request)
const redirectUrl = new URL(`/${locale}${pathWithoutLocale}`, fullUrl)
console.log('Redirecting to:', redirectUrl.toString())
return NextResponse.redirect(redirectUrl)
}
console.log('No redirect needed, continuing to:', pathWithoutLocale)
return NextResponse.next()
}
next.config.js has the following i18n configuration:module.exports = {
i18n: {
locales: ['en-US', 'fr', 'nl-NL'],
defaultLocale: 'en-US',
localeDetection: false,
},
}
This configuration disables automatic locale detection, which can conflict with custom middleware logic Disabling Automatic Locale Detection (https://nextjs.org/docs/pages/building-your-application/routing/internationalization#disabling-automatic-locale-detection).
next.config.js and implementing all locale-related logic in your middleware.These changes should help resolve the discrepancy between the actual URL and the path provided to the middleware. If the problem persists, it might be worth creating a minimal reproduction of the issue and reporting it to the Next.js GitHub repository, as this seems to be a recurring issue with the interaction between i18n and middleware in Next.js Github Issue: 307 redirect loop when using locale together with middleware in 13.5.1 (https://github.com/vercel/next.js/issues/55648).
scarlet epoch
@empty forge You can see that the fullUrl doesn't have the locale.
How can I go with option 3 and bypass next i8n?
empty forgeBOT
Let me check the knowledge base for you again. Give me one moment! :books:
You're right, I apologize for the confusion earlier. The full URL indeed doesn't include the locale, which is part of the issue we're facing. Let's proceed with option 3 and bypass Next.js's built-in i18n functionality. Here's how you can implement this:
next.config.js:module.exports = {
// Remove the i18n configuration
}
import { NextRequest, NextResponse } from 'next/server'
import Negotiator from 'negotiator'
import { match } from '@formatjs/intl-localematcher'
const locales = ['en-US', 'fr', 'nl-NL']
const defaultLocale = 'en-US'
function getLocale(request: NextRequest) {
const negotiatorHeaders: Record<string, string> = {}
request.headers.forEach((value, key) => (negotiatorHeaders[key] = value))
const languages = new Negotiator({ headers: negotiatorHeaders }).languages()
return match(languages, locales, defaultLocale)
}
export function middleware(request: NextRequest) {
const pathname = request.nextUrl.pathname
console.log('Requested pathname:', pathname)
// Check if the path already has a locale
const pathnameHasLocale = locales.some(
locale => pathname.startsWith(`/${locale}/`) || pathname === `/${locale}`
)
if (pathnameHasLocale) {
return NextResponse.next()
}
// Add locale to path
const locale = getLocale(request)
request.nextUrl.pathname = `/${locale}${pathname}`
console.log('Redirecting to:', request.nextUrl.toString())
return NextResponse.redirect(request.nextUrl)
}
export const config = {
matcher: [
// Skip all internal paths (_next)
'/((?!_next|api|favicon.ico).*)',
],
}
This middleware will:
Instead of relying on Next.js's built-in i18n, you'll need to manually handle the locale in your pages. You can do this by parsing the URL path in your components:
import { useRouter } from 'next/router'
export default function Page() {
const router = useRouter()
const locale = router.pathname.split('/')[1]
// Use the locale for translations, etc.
return (
// Your page content
)
}
import Link from 'next/link'
export default function Navigation() {
const locale = // determine current locale
return (
<nav>
<Link href={`/${locale}/home`}>Home</Link>
<Link href={`/${locale}/about`}>About</Link>
</nav>
)
}
This approach bypasses Next.js's built-in i18n system and gives you full control over locale handling. It should resolve the issues you were facing with the middleware and locale detection.
Remember to thoroughly test this implementation, especially: