Next.js Discord

Discord Forum

Localization (Internalization)

Unanswered
Blue orchard bee posted this in #help-forum
Open in Discord
Blue orchard beeOP
Hi. Please help me solve the problem with internalization and SEO.

I developed a website on Next js using Sanity CMS. AppRouter technology. My website supports English add German languages. The thing is that there is no home page on the main domain, because the folder structure is as follows: app/[lang]/page.tsx. Accordingly, the home page is always located at mysite.com/en or mysite.com/de based on middleware file. Is it possible to somehow reconfigure the project so that the home page is located at mysite.com without a slash? Or is it okay to create project with this structure?

SEO-specialist says that the main language should be on the main domain without subfolders. Who is right in this case?

I have set up internalization this way:

// middleware.ts 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 { const negotiatorHeaders: Record<string, string> = {}; request.headers.forEach((value, key) => (negotiatorHeaders[key] = value)); const locales: string[] = i18n.languages.map(lang => lang.id); const languages = new Negotiator({ headers: negotiatorHeaders }).languages(); const locale = matchLocale(languages, locales, i18n.base || "id"); return locale; } export function middleware(request: NextRequest) { const pathname = request.nextUrl.pathname; const pathnameIsMissingLocale = i18n.languages.every( locale => !pathname.startsWith(/${locale.id}/) && pathname !==/${locale.id}); if (pathnameIsMissingLocale) { const locale = getLocale(request); return NextResponse.redirect( new URL(/${locale}${pathname.startsWith("/") ? "" : "/"}${pathname}, request.url ) ); } } };

4 Replies

White-crowned Pigeon
i am afraid it's impossible for app routing now ! just because according to the guide in official nextjs doc, you have to move all routes include-ing layout.tsx ( the root layout) to that [lang]/ so there's no way to show an empty route as domain.com instead domain.com/lang because at this time there is no layout nor page file at the app/ dir any longer, and if you insist to keep a layout/page there you will get the error of hydrating because of this effect <html><body><html><body> ( nested <html><body> ) .
i am thinking of a wrap around way with catch-all routing like this [[...lang]]/ ( refer https://nextjs.org/docs/app/building-your-application/routing/dynamic-routes#optional-catch-all-segments ) but you have to pre-process routing in middleware in a very complicated way, tell me if you find out
or maybe we have to wait for the stable version of next15 because there's still many bug/experiments that's frustrated ! i want to use back next12 with pages routing it supports international routing out of the box.
about the SEO, who told you that, not neccessary be like that, crawling bot like google can understand well with clear localisation with sub/ and with <html lang='...'>