(Next.js)エラーログ:window未定義

最近加入したチームでは、最初のタスクは次の応答プロジェクトです.jsプロジェクトへの移植を担当しています.
移行はワークロードを最小限に抑えることができます(試してみると、容易ではないことがわかります).再設置プロジェクト開始のコンサルティングと両方向に悩んだ.
考えてみると、プロジェクトの構造は簡単ではなく、構造を把握する後者にはより多くの時間がかかるかもしれないが、使用しないライブラリや変数を削除し、シーケンス画像ボードライブラリを移植できると思ったため、プロジェクトは後者の方向に発展し始めた.
Next.jsは反応ライブラリ(フレームワークですが、ライブラリだと思います)とは異なり、フレームワークです.
そのため、守らなければならないルールがいくつかあり、プロジェクトの構造を全体的に理解するために、ノマドコドニゴ先生の講義を聞いて、全体の進捗状況を理解し、プロジェクトを行いました.
この文章はプロジェクトの初期に現在の最大の難題を否定した文章である.
もしかしたら、次.初めてjsに触れた人にとってはきっと役に立ちます.

😱 window is not defined

Next.jsは反応フレームワークであり、自由レンダリングをサポートします.次に、フリーレンダリングを行います.jsとは、ページをレンダリングするときに、まずHTMLを生成してSEOを最適化し、パフォーマンスを改善することです.
サーバ側レンダリングの特徴が利用されているため、windowイベントを参照するコードを実行すると、次のエラーが発生する可能性があります.

// components/Scroll.js
window.addEventListener("scroll", function() {
  console.log("scroll!")
});

Next.jsのデフォルトはノードです.js環境で操作します.
したがって、Windowsオブジェクトはまだ定義されていません.Windowsはブラウザでしか参照できないからです.この点、Nextはクライアントレンダリングの応答アプリケーションとサーバ側レンダリングフォーマットをサポートする.jsの違いは明らかだ.
Windowsを使用するプロセス.ブラウザを使ってブラウザの状態をチェックするなどの参考作業が必要です.
この点を解決するために,多様な位置決めを参考にした.一般的な解決策は次のとおりです.

1.第一の解決策：ブランチタイプ処理

if (typeof window !== "undefined") {
  // Client-side-only code
}
// or
if (typeof window === 'undefined') return;

この方法は、クライアントがレンダリングを待機し、ウィンドウが参照できる時点でblockのコードを実行することです.

2.第2の解決策：UserEffectでコードを使用する

// components/Scroll.js
import React, { useEffect } from "react";

 const Scroll = () => {
  useEffect(function mount() {
    function onScroll() {
      console.log("scroll!");
    }
    window.addEventListener("scroll", onScroll);
    return function unMount() {
      window.removeEventListener("scroll", onScroll);
    };
  });
  return null;
}
export default Scroll

// pages/index.js

import Scroll from "../components/Scroll";

export default function Home() {
  return (
    <div style={{ minHeight: "1000px" }}>
      <h1>Home</h1>
      <Scroll />
    </div>
  );
}

userEffect hookを使用して、ブラウザにレンダリングするときにコードを実行します.
すなわち、クライアントで実行すべきコードをUserEffect内に分離し、サーバ側で実行すべきコードをgetServerSidePropsセグメントに分離する.

const MyPage = () => {
  useEffect(() => {
    // client side stuff
    // window is accessible here.
  }, [])

  return (
    <div> ... </div>
  )
}

MyPage.getServerSideProps = async () => {
  // server side stuff
}

3.第3の解決策：動的な使用

本書の推奨事項の表示

// components/Scroll.js

function onScroll() {
  console.log("scroll!");
}

window.addEventListener("scroll", onScroll);

export default function Scroll() {
  return null;
}

// pages/index.js

import dynamic from "next/dynamic";

const Scroll = dynamic(
  () => {
    return import("../components/Scroll");
  },
  { ssr: false }
);

export default function Home() {
  return (
    <div style={{ minHeight: "1000px" }}>
      <h1>Home</h1>
      <Scroll />
    </div>
  );
}

サーバ側のホスティング側でfalseオプションを提供し、クライアントのホスティング時にコンポーネントをマウントし、コードを実行します.これは第2の方法と同様に,UseEffectを用いなくても実現できる方法である.

Jsencryptライブラリを使用する場合のソリューション

上記の方法は、通常、サーバ側でコードを実行しないことを選択することである.しかし、私の場合、custom hookで使用しているJSencryptライブラリでエラーが発生したため、3つの方法のいずれかを適用するのは難しいです.
チームはConfluenceのエラーログを作成しています.幸いにもConfluenceのチーム長は解決方法を記録しています.(😃 やはり記録が生産できる…!

元のコード

import { JSEncrypt } from 'jsencrypt
const encrypt = new JSEncrypt()
const encryptedPassword = encrypt.encrypt(password)

importによる解決

const JSEncrypt = (await import("jsencrypt")).default
const encrypt = new JSEncrypt()
const encryptedPassword = encrypt.encrypt(password)

ライブラリがインポートされるのを待ち、インポート時にJsencrypyオブジェクトのデフォルト値を参照します.この点では,3つ目の方法で提案したdynamicimportに似ていると思います.

整理する

Next.これはjsキャラクターを正しく把握できる問題だと思います.もちろん,検索結果を導入することで問題を解決することはできなかったが,チームプロジェクトで共有しなければならない話題の必要性について,体験の機会を試みた.Jsencryptライブラリを使用している人は...next.もしあなたがjsの移行を担当しているなら、私は文章を書いて、あなたに役に立つことを望んでいます.

リファレンス

https://dev.to/vvo/how-to-solve-window-is-not-defined-errors-in-react-and-next-js-5f97

NextJSを使用したStatic Siteの作成

スタックオーバーフロー位置決め

スタックオーバーフロー位置決め2