Error with useEffect in Next.js? Understand when to use it "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!