Next.js Discord

Discord Forum

Missing required html tags

Unanswered
Spectacled Caiman posted this in #help-forum
Open in Discord
Spectacled CaimanOP
I'm having a problem with app.tsx. I don't the why it is happening.

32 Replies

Spectacled CaimanOP
export default async function RootLayout(
  props: {
    children: React.ReactNode;
    params: Promise<{lang: Locale }>;
  }
) {
  const params = await props.params;
  const { children } = props;

  return (
    <html lang={params.lang}>
      <GoogleTagManager gtmId="x" />
      <body
        className={`${inter.className} antialiased min-h-[100vh] flex flex-col`}
      >
        <SidebarProvider>
          <div className="w-full">
            <AnnouncementBar />
            <Header />
            <AppSidebar />
            <main className="min-h-[50vh] flex flex-col gap-4 justify-between bg-gray-100 pt-2">
              <div className="w-full max-w-7xl mx-auto relative my-4 px-4 md:px-8">
                <Breadcrumbs />
                {children}
              </div>
              <CallToAction />
            </main>
            <Toaster />
            <Footer />
          </div>
        </SidebarProvider>
      </body>
    </html>
  );
}
My layout.tsx. I'm using app router.
Black Turnstone
can you share folder structure?
@Black Turnstone can you share folder structure?
Spectacled CaimanOP
of course
@Black Turnstone
Black Turnstone
Your root layout is in /app/[lang] folder. but root layout should be in /app directory. That's the cause of the issue
Can I bring it to /app directory too?
Black Turnstone
Yes
css files location doesn't matter there are some reserver file names that are looked by next js rest can be anywhere
Also, I believe if you move layout to /app folder params will no longer work (not sure tho).
Spectacled CaimanOP
That doesn't works
The styles is all wrong
Black Turnstone
is css path correct?
@Black Turnstone is css path correct?
Spectacled CaimanOP
yeah
Black Turnstone
can you share repo?
Spectacled CaimanOP
yeah
Spectacled CaimanOP
any suggestions? @Black Turnstone
Black Turnstone
Checking
I think middleware is not getting triggered
@Black Turnstone I think middleware is not getting triggered
Spectacled CaimanOP
make senses
I copied completely everything from the site
@Spectacled Caiman I copied completely everything from the site
Black Turnstone
Create this structure (Move your assets and app folder)
comment this
and it will work
I believe there is some bug that is causing this issue
but commenting i18n config seems to trigger the middleware and redirect to correct page
Spectacled CaimanOP
is this is workaround?
Black Turnstone
No. I just moved assets to app folder instead of [lang] as middleware is not getting triggered on assets so it will not add locale to those assets path. If you want you can keep them in [lang] folder then you have to adjust matcher and configuration of your middleware to handle the redirects for the images too
@Spectacled Caiman is this is workaround?
Black Turnstone
If you are asking about commenting i18n then I believe yes. Not using default next.js internationalisation and redirecting using middleware does the trick for now
Spectacled CaimanOP
It's working
Thank you @Black Turnstone