Next.js Discord

Discord Forum

Hydration error with typeof window !== "undefined"

Unanswered
Asiatic Lion posted this in #help-forum
Open in Discord
Asiatic LionOP
Hi everyone, I updated to next 14 and this error started to pop up, is this related to something I'm storing on server? Because I'm not storing anything there, there's a light/dark theme switch tho

Only when I refresh this occurs, if I go to a further page and back it doesn't
This /page.tsx is rendered on the server

Okay I think Next 14 is not the problem

const [isScrolled, setIsScrolled] = useState(() =>
    typeof window !== "undefined" ? window.scrollY > 0 : false
  );

this piece of code in my header component which is a client component causes this

I'm using that state to set a blur state to my header component like this

<header
      className={`sticky top-0 z-50 p-4 ${
        isScrolled ? "backdrop-blur" : "bg-transparent"
      }`}
    >
      {/* Add an additional wrapper for the blurred background */}
      {isScrolled && <div className="backdrop-blur-md absolute inset-0"></div>}


Removing this code from my page.tsx stops the error

<Link href={"/brands/new-submission"}>
                <Button className="mt-4">Make a submission</Button>
              </Link>


Full page.tsx posted as comment

3 Replies

Asiatic LionOP
Page.tsx
export default async function Home() {
  const dashboardHomeApiResponse = await fetch(
    `${BASE_API_URL}${DASHBOARD_HOME_ENDPOINT}`,
    {
      method: "GET",
      headers: {
        "Content-Type": "application/json",
      },
    }
  );

  const dashboardHomeResponse = await dashboardHomeApiResponse.json();

  return (
    <div className="flex flex-col my-6 mx-12">
      <div className="font-bold text-4xl">Dashboard</div>
      <blockquote className="space-y-2 my-4">
        <div className="text-lg">
          Welcome to Terrum&apos;s Open Dashboard, your go-to resource for
          sustainability and climate action. Here, we are diligently building a
          comprehensive database, encompassing companies, brands, videos,
          audios, and more, all dedicated to furthering sustainability efforts.
        </div>
      </blockquote>
      <div className="grid sm:grid-cols-4 gap-4">
        <Link href={"brands"}>
          <Card>
            <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
              <CardTitle className="text-sm font-medium">
                Sustainable Brands
              </CardTitle>
            </CardHeader>
            <CardContent>
              <div className="text-2xl font-bold">
                {dashboardHomeResponse.brands} Brands
              </div>
              <div className="text-xs text-[#008000] text-muted-foreground">
                {dashboardHomeResponse.new_brands_last_week} added last week
              </div>
              <Link href={"/brands/new-submission"}>
                <Button className="mt-4">Make a submission</Button>
              </Link>
            </CardContent>
          </Card>
        </Link>
      </div>
    </div>
  );
}
awareness481
const [scrolled, setScrolled] = useState(false)

useEffect(() => { setScrolled(window.scrollY > 0 }, [] )


What this does is same initial value for client and server and because useEffect only runs on the client we can just set the value based on the window there
On mobile so code formatting is a bit off