RootContext no Next.js sem bagunça

Seu `layout.tsx` virou uma árvore de natal?

Você abre o projeto e encontra isso:

<ThemeProvider>
  <SessionProvider>
    <QueryProvider>
      <SidebarProvider>
        <TooltipProvider>{children}</TooltipProvider>
      </SidebarProvider>
    </QueryProvider>
  </SessionProvider>
</ThemeProvider>

Parabéns. Seu layout.tsx virou um sanduíche de provider.

A solução: RootContext

Crie uma pasta:

src/context/root-context.tsx

Estrutura

'use client';
 
import { ThemeProvider } from 'next-themes';
import { QueryClientProvider } from '@tanstack/react-query';
 
export function RootContext({ children }: PropsWithChildren) {
  return (
    <ThemeProvider>
      <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
    </ThemeProvider>
  );
}

Agora o layout fica limpo

import { RootContext } from '@/context/root-context';
 
export default function RootLayout({ children }) {
  return (
    <html lang='pt'>
      <body>
        <RootContext>{children}</RootContext>
      </body>
    </html>
  );
}

Muito melhor.

Imagem 1

Estrutura bagunçada

Imagem 2

Estrutura organizada

Benefícios

layout mais limpo
providers centralizados
manutenção mais fácil
melhor organização
escalabilidade melhor

E tem mais

Quando outro dev entrar no projeto:

Ele não vai precisar escalar uma montanha de providers para entender a aplicação.

Tudo fica centralizado.

Tudo previsível.

Final

Arquitetura boa não é sobre deixar o projeto complicado.

É sobre deixar o projeto fácil de manter daqui 6 meses.

E um simples RootContext já ajuda MUITO nisso.

Organizando providers com RootContext no Next.js