Add the “use client”. O que é esse erro e como corrigir?

Com a nova versão do nextjs 13, muitos desenvolvedores estão se esbarrando com o seguinte erro: Add the “use client” directive at the top of the file to use it. Algumas vezes vindo também acompanhado da seguinte mensagem: Uncaught createContext only works in Client Components.

Erro Add the “use client”

Inicialmente vamos entender o que é esse erro e o porque dele acontecer no nosso projeto.

A primeira vista pode parecer algo complexo, principalmente quando resolvemos pesquisar no Google esse erro e acabamos nos deparando com discussões técnicas (em inglês), muitas opiniões e muitas “gambiarras” para resolver. Muitas delas não resolvem o erro de verdade, apenas contornam ele de forma errada e eliminando recursos importantes do NextJs 13.

Primeiramente precisamos entender como funciona essa nova versão do NextJs.
Essa nova versão veio com uma modificação na estrutura do framework e como ele funciona.
Antes usávamos a estrutura src/pages/nossapagina.tsx e usávamos a função getServerSideProps para executar código do lado do servidor e depois devolver atributos para o nosso componente renderizar no frontend. Até a versão do NextJs era essa a abordagem padrão.

Porém na versão 13 do NextJs não usamos mais a estrutura acima, e sim a seguinte estrutura para a mesma página: src/app/nossapagina/page.tsx.
E em vez de usarmos a função getServerSideProps executar código no servidor, basta apenas escrevermos o código dentro da própria page, ficando assim:

const funcaoExemplo = () => {
  console.log('essa função está sendo executada em server-side')
}

export default async function PageTutorial() {

  funcaoExemplo();

  return (
    <main>
      Hello World
    </main>
  )
}

Dessa forma a função funcaoExemplo() está sendo executado em server-side.

Simulando o erro

Agora para simular esse erro, vamos adicionar um useEffect na nossa página, ficando assim:

import { useEffect } from "react";

const funcaoExemplo = () => {
  console.log('Essa função está sendo executada em server-side')
}

export default async function PageTutorial() {

  funcaoExemplo();

  useEffect(() => {
    console.log('página carregada')
  }, [])

  return (
    <main>
      Hello World
    </main>
  )
}

Repare, que ao executar novamente o código, o erro começa a aparecer no nosso console, impedindo inclusive o carregamento da página.

Porque o erro Add the “use client” acontece?

Para entender, basta ter em mente que o conteúdo do arquivo page.tsx é feito para ser executado exclusivamente no servidor, sendo assim, não é possível executar o código useEffect, pois ele depende de elementos do navegador para ser executado, e aqui podemos concluir que o o servidor não tem acesso ao navegador para executar essa função.

Como corrigir?

Ao pesquisar por aí, uma das soluções mais sugeridas é a de adicionar o seguinte trecho de código no início da página: “use client”.

Porém, ao fazer isso, você está “capando” a capacidade do NextJs em executar código no servidor e estará forçando o arquivo page.tsx a ser executado no lado do cliente. E não é bem isso que queremos, certo?

Então o jeito CERTO de fazer isso é o seguinte:

Crie um componente, esse sim será executado no cliente, e importe esse componente no nosso arquivo page.tsx.

Crie uma pasta chamada “components” em src/, e dentro dessa pasta, vamos criar nosso componente onde será executada a função useEffect, ficando dessa forma: src/components/MeuComponente.tsx

'use client';

import { useEffect } from "react";

const MeuComponent = () => {

  useEffect(() => {
    console.log('página carregada')
  }, [])

  return (
    <p>Meu componente</p>
  )
}

export default MeuComponent;

Repare que no componente nos escrevemos o ‘use client’ no início do arquivo, garantindo que nosso componente execute do lado do cliente.

E o arquivo src/app/nossapagina/page.tsx ficará assim:

import MeuComponent from "@/components/MeuComponente";

const funcaoExemplo = () => {
  console.log('Essa função está sendo executada em server-side')
}
export default async function PageTutorial() {

  funcaoExemplo();

  return (
    <main>
      <MeuComponent />
      Hello World
    </main>
  )
}

Removemos o useEffect do arquivo src/app/nossapagina/page.tsx e passamos para o nosso componente src/components/MeuComponente.tsx.

Ao executar o código, o arquivo page.tsx é executado no servidor e o arquivo MeuComponente.tsx é executado do lado do cliente e o erro para de ser exibido.

Conclusão e observações

Esse erro acontece frequentemente ao utilizar algumas bibliotecas de construção de layout, como por exemplo a MUI, a Ant-Design, ou outras bibliotecas do mesmo estilo.

Recomendo a leitura da documentação oficial do NextJs conhecer detalhes sobre essa nova forma de organizar o projeto.

Se você preferir, pode também conferir esse tutorial em vídeo:

Espero que esse tutorial tenha ajudado você a solucionar esse erro.

Siga nosso canal no Youtube e acompanhe os novos posts.