La fenêtre n'est pas définie dans l'application Next.js React

Question

Dans mon application Next.js, je n'arrive pas à accéder à window :

Rejet non géré (ReferenceError): la fenêtre n'est pas définie

 componentWillMount() {
    console.log('window.innerHeight', window.innerHeight);
}

Answer 1

Une autre solution consiste à utiliser process.browser pour simplement exécuter votre commande pendant le rendu uniquement côté client.

 if (process.browser) {
  // Client-side-only code
}

Answer 2

Si vous utilisez React Hooks, vous pouvez déplacer le code dans le Hook d'effet :

 import * as React from "react";

export const MyComp = () => {

  React.useEffect(() => {
    // window is accessible here.
    console.log("window.innerHeight", window.innerHeight);
  }, []);

  return (<div></div>)
}

Le code à l'intérieur de useEffect n'est exécuté que sur le client (dans le navigateur), il a donc accès à window .

Answer 3

Sans SSR

https://nextjs.org/docs/advanced-features/dynamic-import#with-no-ssr

 import dynamic from 'next/dynamic'

const DynamicComponentWithNoSSR = dynamic(
  () => import('../components/hello3'),
  { ssr: false }
)

function Home() {
  return (
    <div>
      <Header />
      <DynamicComponentWithNoSSR />
      <p>HOME PAGE is here!</p>
    </div>
  )
}

export default Home