Next.js Discord

Discord Forum

Disable hydration on two specific component in static-export app-dir

Unanswered
Western harvester ant posted this in #help-forum
Open in Discord
Western harvester antOP
Hello, and thank you in advise 🙂
I was wondering if something like this would be possibile:
I'm using next ^14 with app-dir, and I'm building the application with static export.
I have the project structure as follow:
app/[locale]/layout.tsx, app/[locale]/page.tsx

It is possible to have something like:
 <html
      lang={lang}
      dir={lang === 'ar' ? 'rtl' : 'lrt'}
      data-locale={params.locale}
    >
      <body
        className={twMerge(
          'bg-cover font-normal max-h-screen h-screen',
        )}
      >
         <header />
        {children}
         <footer />
      </body>
    </html>


It is possible to tell next somehow that header and footer are not part of Next (they will be injected by another provider and sadly I have absolutely no control over it), so they will be populated after the build process.

Plus, I have no absolutely idea on how this will be achieved, I tried to update the html manually in the output directory but, as I expected, during the hydration step I all the html I've put get overridden.

Thank you in advise, and have a nice day!

4 Replies

Eric Burel
Next App Router, sadly, doesn't currently support dynamic routes with static export
you'll want to stick to "normally" run the app with next start
You maybe want to run the Next app into an iframe? You have something like a microfrontend architecture?
Next is a full fledged framework so it's a bit hard to cut it into pieces and shove it into an UI controlled by another achitecture
You can maybe take inspiration from people that use it with Electron?