import { NextResponse } from 'next/server' import type { NextRequest } from 'next/server' import { i18n } from './i18n-config' import { match as matchLocale } from '@formatjs/intl-localematcher' import Negotiator from 'negotiator' function getLocale(request: NextRequest): string | undefined { // Negotiator expects plain object so we need to transform headers const negotiatorHeaders: Record<string, string> = {} request.headers.forEach((value, key) => (negotiatorHeaders[key] = value)) // @ts-ignore locales are readonly const locales: string[] = i18n.locales // Use negotiator and intl-localematcher to get best locale let languages = new Negotiator({ headers: negotiatorHeaders }).languages( locales ) const locale = matchLocale(languages, locales, i18n.defaultLocale) return locale } export function middleware(request: NextRequest) { const pathname = request.nextUrl.pathname // Check if there is any supported locale in the pathname const pathnameIsMissingLocale = i18n.locales.every( (locale) => !pathname.startsWith(/${locale}/) && pathname !==/${locale}) // Redirect if there is no locale if (pathnameIsMissingLocale) { const locale = getLocale(request) // e.g. incoming request is /products // The new URL is now /en-US/products return NextResponse.redirect( new URL(/${locale}${pathname.startsWith('/') ? '' : '/'}${pathname}, request.url ) ) } } export const config = { // Matcher ignoring/_next/and/api/matcher: ['/((?!api|_next/static|_next/image|favicon.ico).*)'], }

The above is the middleware.tsx and example is taken from : https://github.com/vercel/next.js/tree/canary/examples/app-dir-i18n-routing

It is how it works. If you want home page to be at /, then create top level layout and page. But then it will be in one language and you will have to find other ways to translate this page if you need to

You mean i need to make an top level layout and page outside [lang] slug. But then how the home page translated into other language should i need to duplicate it in both page.tsx. I want something like this: https://ant.design/ Second you said there is other way can you suggest me??

The best you can do is to leave it as it is. Alternatively you can implement headers approach for dynamic rendering as described in this comment, then you can skip this whole /lang/ thing
https://github.com/vercel/next.js/issues/50699#issuecomment-1591841031

Seems complicated. But i feels like it affect my in production or not? for example when i host the domain it would not domain.com instead it will be domain.com/en. Does any library that can help me to translate the content of my website or any other method.

You can use separate domains

Yeah I already see it.