Erro com useEffect no Next.js? Entenda quando usar "use client"

Module not found: Can't resolve 'fs'

Se esse erro apareceu quando você tentou usar useEffect, saiba que a culpa não é do seu código — é da forma como o Next.js trata componentes por padrão.

👀 O que aconteceu?

Você provavelmente tentou isso:

useEffect(() => {

  setTimeout(() => {

    console.log("executado");

  }, 1000);

}, []);

E viu algo como:

Module not found: Can't resolve 'fs'

ou

Module not found: Can't resolve 'tls'

  1 | import net from 'net'

> 2 | import tls from 'tls'

O motivo:

no Next.js 13+ (com App Router), todos os componentes são Server Components por padrão — ou seja, eles rodam no servidor, onde hooks como useEffect e window nem existem.

🧠 A solução: "use client"

Se o seu componente precisa de:

• useState, useEffect, useRef, etc.


• Acessar window, localStorage, navigator


• Lidar com eventos, DOM, cliques, animações…

Você precisa declarar no topo:

"use client";

✅ Quando usar "use client"

1. Interatividade (estado, eventos)

"use client";

import { useState } from "react";



export default function LikeButton() {

  const [liked, setLiked] = useState(false);

  return <button onClick={() => setLiked(!liked)}>{liked ? "💖" : "🤍"}</button>;

}

2. Hooks como useEffect ou libs do navegador

"use client";

import { useEffect } from "react";



export default function Tracker() {

  useEffect(() => {

    console.log("Rodou no navegador");

  }, []);



  return <p>Componente com efeito colateral</p>;

}

❌ Quando não usar "use client"

1. Leitura de dados (fetch, fs, Prisma...)

Esses devem permanecer como Server Components:

export default async function Dashboard() {

  const data = await fetchData();

  return <div>{data.title}</div>;

}

2. Componentes puros e estáticos

Evite "use client" se seu componente:

• Só renderiza props


• Não tem lógica de browser


• Não precisa de interatividade

Menos JS enviado ao navegador = mais performance.

🪄 Simulando um loading com Suspense

Você quis usar useEffect só para um setTimeout? Faça assim no servidor:

// DelayedComponent.tsx

export default async function DelayedComponent() {

  await new Promise((res) => setTimeout(res, 1000));

  return <div>Conteúdo após 1s</div>;

}

// page.tsx

import { Suspense } from "react";

import DelayedComponent from "./DelayedComponent";



export default function Page() {

  return (

    <Suspense fallback={<div>Carregando...</div>}>

      <DelayedComponent />

    </Suspense>

  );

}

Sem useEffect, sem "use client", e tudo funcionando 💨.

🚀 Conclusão

Se o componente usa hook, DOM ou eventos → "use client"

Se não, deixe server e aproveite os benefícios do Next.js.

Bora trocar ideia?

Se esse artigo te ajudou a entender melhor como o Next.js funciona por baixo dos panos, deixa um like aqui, compartilha com a galera do time e me chama no LinkedIn se quiser trocar ideia sobre frontend, React e mercado de trabalho.

🔗 werliton-silva

📬 Me manda um "vi seu artigo" e bora conversar!