I have a problem or I want some idea/solution how should I approach this.

My structure of my Next.js project is this -> App/[locale] -> and here I handle different locales /cs, /da, /de etc. etc...But my problem is I DONT have a ROOT page.js and layout.js. And the "Main" page only works with defined locale which is correct! But how should I handle root page and layout? I thought of using a redirect based on user‘s defined language of browser (and of course I have a default locale). But Is it good for SEO etc..? I have a middleware.js:

import { NextResponse } from "next/server";

const SUPPORTED_LOCALES = ['cs', 'sk', 'da', 'de'];
const DEFAULT_LOCALE = 'cs';

function detectLocale(acceptLanguage) {
  if (!acceptLanguage) return DEFAULT_LOCALE;
  
  const languages = acceptLanguage.split(',');
  for (const lang of languages) {
    const [code] = lang.split(';')[0].toLowerCase().split('-');
    if (SUPPORTED_LOCALES.includes(code)) {
      return code;
    }
  }
  return DEFAULT_LOCALE;
}

export function middleware(req) {
  const url = req.nextUrl.clone();
  const { pathname } = url;

  if (pathname === '/') {
    const locale = detectLocale(req.headers.get('accept-language'));
    url.pathname = `/${locale}`;
    return NextResponse.redirect(url);
  }

I also had an idea to make a main page without the locale and user could just click on language he wants to be in. (www.domain.eu) and there he could redirect for the language he wants.

Is there a better option or is one of this approaches correct?