次のjsを使用していて、検索状態をurlクエリパラメータと同期しようとしています。これにより、ナビゲーション中に検索入力状態が失われることはありません。

これがサーバー側の言語であることは知っていますが、このコードをウィンドウオブジェクトで機能させるにはどうすればよいですか?

これは、公式のアルゴリアの例からのコードスニペットです-https ://github.com/algolia/react-instantsearch/blob/master/examples/media/URLSync.js

import React, { Component } from "react";
import qs from "qs";

const updateAfter = 700;
const searchStateToURL = (searchState) =>
  searchState ? `${window.location.pathname}?${qs.stringify(searchState)}` : "";

const withURLSync = (TestSearch) =>
  class WithURLSync extends Component {
    state = {
      searchState: qs.parse(window.location.search.slice(1)),
    };

    componentDidMount() {
      window.addEventListener("popstate", this.onPopState);
    }

    componentWillUnmount() {
      clearTimeout(this.debouncedSetState);
      window.removeEventListener("popstate", this.onPopState);
    }

    onPopState = ({ state }) =>
      this.setState({
        searchState: state || {},
      });

    onSearchStateChange = (searchState) => {
      clearTimeout(this.debouncedSetState);

      this.debouncedSetState = setTimeout(() => {
        window.history.pushState(
          searchState,
          null,
          searchStateToURL(searchState)
        );
      }, updateAfter);

      this.setState({ searchState });
    };

    render() {
      const { searchState } = this.state;

      return (
        <TestSearch
          {...this.props}
          searchState={searchState}
          onSearchStateChange={this.onSearchStateChange}
          createURL={searchStateToURL}
        />
      );
    }
  };

export default withURLSync;

これはreactjsで機能しますが、このコードスニペットをnext.jsで機能させるにはどうすればよいですか?

応答

コードがクライアント側で実行されているかサーバー側で実行されているかをチェックwindowするステートメントの下に、使用するすべてのものを配置する必要があります。ifたとえば、次のような関数を作成します。

export const isClient = () => !(typeof window === "undefined");

または単に変数:

export const isClient = !(typeof window === "undefined");

そしてあなたの場合、あなたはこのように行うことができます(変数1を使用して):

componentDidMount() {
  if(isClient) {
    window.addEventListener("popstate", this.onPopState);
  }
}

このようにして、コードが実行されるときはいつでもwindowそうではないことを確認しますundefined