wet-aquaW
Refine•12mo ago•
7 replies
wet-aqua

Next.js & Ant Design - Custom ThemedLayoutV2 not working

Hi, I tried to swizzle the ThemedLayout as I need to edit the Sider. But if I follow the documentation:
src/app/layout.tsx
...
<Refine ...>
  <ThemedLayoutV2 ... />
</Refine>
...

then I was getting errors that I can't use hooks in a server component. So I created client component refine-context.tsx:
"use client";
...
export const RefineContext = ({ themeMode, children }: PropsWithChildren<Props>) => {
<AntdRegistry>
  <ContextProvider>
    ...
    <Refine ...>
      <ThemedLayoutV2 ...>
        {children}
      </ThemedLayoutV2>
    </Refine>
  </ContextProvider>
</AntdRegistry>

and src/app/layout.tsx:
...
  return (
    <html lang={locale}>
      <body>
        <Suspense>
            <NextIntlClientProvider locale={locale} messages={messages}>
              <RefineContext themeMode={theme?.value}>{children}</RefineContext>
            </NextIntlClientProvider>
        </Suspense>
      </body>
    </html>
  );


Then I end up with "duplicate" layout (the customized layout is correct, but then I am getting the default one inside the customized one..)
Does anyone know how to sort that out properly?
Thank you in advance!
Screenshot_20250204_162950.png
Was this page helpful?