I’m currently developing a webpage with nextjs and next-intl i18n internationalization using App Router.

Pretty much all of it is relatively new to me. Now my Boss discovered a really weird behavior that I cannot explain. When one opens the our website in multiple tabs one after the other it alternately navigates to the English version and the German version. It should always navigate to the German version.

I am not really using any complex backend logic. But there are some things special about the way I manage routing on my page.

The middleware.ts and i18n.ts files are as described in the tutorial.

The app folder contains a not-found page. It is made to redirect a user that did not specify any local to de.

'use client'

import { usePathname } from 'next/navigation'
import { redirect } from "next/navigation";

export default function NotFound() {
    const pathname = usePathname()
    redirect("/de/" + pathname);
}

My “landing page” ([locale]/page) is made to redirect to /mifotec.

'use client'

import { usePathname } from 'next/navigation'
import { redirect } from "next/navigation";

export default function CatchAllPage() {
    const pathname = usePathname()
    redirect(pathname + "/mifotec");
}

For the cases when the requested paths don’t match I have made a [..rest]/page.tsx file.

import {notFound} from 'next/navigation';

export default function CatchAllPage() {
  notFound();
}

This is a slightly shortened version of my file tree:

.
├── README.md
├── declarations.d.ts
├── locales
├── messages
│   ├── de.json
│   └── en.json
├── next-env.d.ts
├── next.config.mjs
├── public
│   ├── fonts
│   ├── next.svg
│   ├── photos
│   │   └── stock
│   │       ├── beratung.png
│   │       ├── dvb_experts.png
│   │       ├── messen.png
│   │       ├── planung.png
│   │       └── schulung.png
│   └── vercel.svg
├── src
│   ├── app
│   │   ├── [locale]
│   │   │   ├── Logo.tsx
│   │   │   ├── MenuItem.tsx
│   │   │   ├── [...rest]
│   │   │   │   └── page.tsx
│   │   │   ├── aktuelles
│   │   │   │   ├── Elfie.tsx
│   │   │   │   └── page.tsx
│   │   │   ├── impressum
│   │   │   │   └── page.tsx
│   │   │   ├── kontakt
│   │   │   │   ├── Cally.tsx
│   │   │   │   └── page.tsx
│   │   │   ├── not-found.tsx
│   │   │   └── page.tsx
│   │   ├── favicon.ico
│   │   ├── layout.tsx
│   │   ├── not-found.tsx
│   │   └── plugins.tsx
│   ├── i18n.ts
│   └── middleware.ts
└── styles
    ├── fonts.css
    └── globals.css

20 directories, 57 files

I don’t really remember what I have tried anymore.

I think the most elegant way would be to solve the routing with the middleware file but I couldn’t change it in a way that would do any good.