Why Next 14 is re-rendering?
Unanswered
Black Vulture posted this in #help-forum
Black VultureOP
Hi, the following is happening to me: I migrated a WebbApp from Next.js 12.4 to version 14.2 (of course, creating the project from 0 by moving folders and following conventions) and now the rendering is behaving like this.
What I already tested:
- It is not strict mode.
- The layout and styles stays the same.
Behavior:
This is how my layouts looks like:
If anyone has an idea of what could be happening, thanks in advance.
What I already tested:
- It is not strict mode.
- The layout and styles stays the same.
Behavior:
Page enters, renders the form (moment I type) and then renders again (is it because of styles or Next.js rendering?).
This is how my layouts looks like:
// layout.tsx
export default function RootLayout({
children,
}: {
children: React.ReactNode;
}) {
return (
<html lang="en" suppressHydrationWarning={true}>
<body className={inter.className} suppressHydrationWarning={true}>
<ContextLayout>{children}</ContextLayout>
</body>
</html>
);
}
// contextLayout.tsx
export function ContextLayout({ children }: any) {
return (
<StyledEngineProvider injectFirst>
<Provider store={store}>
<AuthProvider>
<MainLayout>
<GoogleReCaptchaProvider
reCaptchaKey={reCaptchaKey || ''}
scriptProps={{
async: false,
defer: false,
appendTo: 'head',
nonce: undefined,
}}
>
{children}
</GoogleReCaptchaProvider>
</MainLayout>
</AuthProvider>
</Provider>
</StyledEngineProvider>
);
}
// mainLayout.tsx
export function MainLayout({ children }: any) {
return (
<>
<Toast />
<main>{children}</main>
</>
);
}If anyone has an idea of what could be happening, thanks in advance.