code : via dymanic didn't work eitherimport dynamic from "next/dynamic"; export default async function Home() { const Dash = dynamic(() => ( welcome, {window.client.getUser().username} ), {ssr: false}) return }nor conditional rendering worksexport default async function Home() { if (typeof window !== "undefined") { return welcome, {window.client.getUser().username} } }

// welcome.tsx export default function Welcome() { return welcome, {window.client.getUser().username} } // page.tsx import dynamic from "next/dynamic"; const Dash = dynamic(() => import("./welcome"), {ssr: false}) export default async function Home() { return }

"window" is not defined

Unanswered

Masai Lion posted this in #help-forum

Open in Discord

Masai LionOP

2023-12-14T15:48:23.000Z

code :

via dymanic didn't work either

import dynamic from "next/dynamic";

export default async function Home() {
    const Dash = dynamic(() => (
        <h1>welcome, {window.client.getUser().username}</h1>
    ), {ssr: false})
    return <Dash/>
}

nor conditional rendering works

export default async function Home() {
    if (typeof window !== "undefined") {
        return <h1>welcome, {window.client.getUser().username}</h1>
    }
}

14 Replies

Ray

2023-12-14T15:50:21.000Z

// welcome.tsx
export default function Welcome() {
  return  <h1>welcome, {window.client.getUser().username}</h1>
}

// page.tsx
import dynamic from "next/dynamic";

const Dash = dynamic(() => import("./welcome"), {ssr: false})

export default async function Home() {
    return <Dash/>
}

you should do this

@Ray ts // welcome.tsx export default function Welcome() { return <h1>welcome, {window.client.getUser().username}</h1> } // page.tsx import dynamic from "next/dynamic"; const Dash = dynamic(() => import("./welcome"), {ssr: false}) export default async function Home() { return <Dash/> }

Masai LionOP

2023-12-14T15:51:08.000Z

i will try

Original message was deleted

Masai LionOP

2023-12-14T18:33:59.000Z

&752637460550385834 seems like there isn't slash command named "Mark Solution" as given in the replied post

Rafael Almeida

2023-12-14T18:34:52.000Z

you need to right click the message and use the dropdown, it's in Apps and Mark Solution (probably last option)

Eric Burel

2023-12-14T19:54:14.000Z

Given that you control the code next/dynamic is probably not suited

reposting here what I've posted 2 posts below because someone had a similar question ^^

Detailed answer on stack overflow: https://stackoverflow.com/a/77556387/5513532

My (paid but cheap) course on the topic: https://course.nextjspatterns.com/manage-client-only-code-in-next-js-with-react-browser-components

What you need here is a "useClient" hook to check if the component is mounted

and then only you can use "window" during render

Official next doc on the topic: https://nextjs.org/docs/messages/react-hydration-error#solution-1-using-useeffect-to-run-on-the-client-only

next/dynamic is to be used when the component is really big, or involve a pure JS lib that can't support SSR like leaflet or jquery

for other use case you'd want to favour using React logic