chore(examples): update next example to Next 12 (#3438)

Haroenv · francoischalifour · web-flow · commit 391b9f41530c · 2022-04-21T13:10:49.000+02:00
* chore(examples): update next example to Next 12 see https://github.com/algolia/react-instantsearch/discussions/3434 * Update examples/next/components/app.js Co-authored-by: François Chalifour <francoischalifour@users.noreply.github.com> * Apply suggestions from code review Co-authored-by: François Chalifour <francoischalifour@users.noreply.github.com> * simplify further * document the simpler form * fix types Co-authored-by: François Chalifour <francoischalifour@users.noreply.github.com>
diff --git a/examples/hooks-next/pages/index.tsx b/examples/hooks-next/pages/index.tsx
@@ -1,4 +1,5 @@
 import Head from 'next/head';
+import { GetServerSideProps } from 'next';
 import algoliasearch from 'algoliasearch/lite';
 import { Hit as AlgoliaHit } from 'instantsearch.js';
 import {
@@ -82,15 +83,16 @@ function FallbackComponent({ attribute }: { attribute: string }) {
   );
 }
 
-export async function getServerSideProps({ req }) {
-  const protocol = req.headers.referer?.split('://')[0] || 'https';
-  const url = `${protocol}://${req.headers.host}${req.url}`;
-  const serverState = await getServerState(<HomePage url={url} />);
+export const getServerSideProps: GetServerSideProps<HomePageProps> =
+  async function getServerSideProps({ req }) {
+    const protocol = req.headers.referer?.split('://')[0] || 'https';
+    const url = `${protocol}://${req.headers.host}${req.url}`;
+    const serverState = await getServerState(<HomePage url={url} />);
 
-  return {
-    props: {
-      serverState,
-      url,
-    },
+    return {
+      props: {
+        serverState,
+        url,
+      },
+    };
   };
-}
diff --git a/examples/next/.babelrc b/examples/next/.babelrc
diff --git a/examples/next/components/app.js b/examples/next/components/app.js
@@ -1,5 +1,4 @@
 import React from 'react';
-import PropTypes from 'prop-types';
 import {
   RefinementList,
   SearchBox,
@@ -33,56 +32,32 @@ const HitComponent = ({ hit }) => (
   </div>
 );
 
-HitComponent.propTypes = {
-  hit: PropTypes.object,
-};
-
-export default class extends React.Component {
-  static propTypes = {
-    searchState: PropTypes.object,
-    resultsState: PropTypes.oneOfType([PropTypes.object, PropTypes.array]),
-    onSearchStateChange: PropTypes.func,
-    createURL: PropTypes.func,
-    indexName: PropTypes.string,
-    searchClient: PropTypes.object,
-  };
-
-  render() {
-    return (
-      <InstantSearch
-        searchClient={this.props.searchClient}
-        resultsState={this.props.resultsState}
-        onSearchStateChange={this.props.onSearchStateChange}
-        searchState={this.props.searchState}
-        createURL={this.props.createURL}
-        indexName={this.props.indexName}
-        onSearchParameters={this.props.onSearchParameters}
-        {...this.props}
-      >
-        <Configure hitsPerPage={12} />
-        <header>
-          <h1>React InstantSearch + Next.Js</h1>
-          <SearchBox />
-        </header>
-        <main>
-          <div className="menu">
-            <RefinementList attribute="categories" />
-          </div>
-          <div className="results">
-            <Hits hitComponent={HitComponent} />
-          </div>
-        </main>
-        <footer>
-          <Pagination />
-          <div>
-            See{' '}
-            <a href="https://github.com/algolia/react-instantsearch/tree/master/examples/next">
-              source code
-            </a>{' '}
-            on github
-          </div>
-        </footer>
-      </InstantSearch>
-    );
-  }
+export function App(props) {
+  return (
+    <InstantSearch {...props}>
+      <Configure hitsPerPage={12} />
+      <header>
+        <h1>React InstantSearch + Next.js</h1>
+        <SearchBox />
+      </header>
+      <main>
+        <div className="menu">
+          <RefinementList attribute="categories" />
+        </div>
+        <div className="results">
+          <Hits hitComponent={HitComponent} />
+        </div>
+      </main>
+      <footer>
+        <Pagination />
+        <div>
+          See{' '}
+          <a href="https://github.com/algolia/react-instantsearch/tree/master/examples/next">
+            source code
+          </a>{' '}
+          on GitHub
+        </div>
+      </footer>
+    </InstantSearch>
+  );
 }
diff --git a/examples/next/components/head.js b/examples/next/components/head.js
@@ -1,5 +1,4 @@
 import NextHead from 'next/head';
-import { string } from 'prop-types';
 import React from 'react';
 
 const defaultDescription = '';
@@ -34,12 +33,3 @@ export const Head = (props) => (
     <link rel="stylesheet" href="instantsearch.css" />
   </NextHead>
 );
-
-Head.propTypes = {
-  title: string,
-  description: string,
-  url: string,
-  ogImage: string,
-};
-
-export default Head;
diff --git a/examples/next/components/index.js b/examples/next/components/index.js
@@ -1,2 +1,2 @@
 export * from './head';
-export { default as App } from './app';
+export * from './app';
diff --git a/examples/next/next.config.js b/examples/next/next.config.js
diff --git a/examples/next/package.json b/examples/next/package.json
@@ -8,20 +8,24 @@
     "build": "next build",
     "start": "next start"
   },
-  "devDependencies": {
-    "babel-core": "7.0.0-bridge.0",
-    "babel-jest": "23.6.0",
-    "css-loader": "3.2.0",
-    "style-loader": "1.0.0"
+  "jest": {
+    "transform": {
+      "^.+\\.(js|jsx|ts|tsx)$": [
+        "babel-jest",
+        {
+          "presets": [
+            "next/babel"
+          ]
+        }
+      ]
+    }
   },
   "dependencies": {
     "algoliasearch": "4.11.0",
-    "next": "9.1.1",
-    "prop-types": "15.6.2",
+    "next": "12.1.5",
     "qs": "6.8.0",
     "react": "17.0.2",
     "react-dom": "17.0.2",
-    "react-fast-compare": "3.0.1",
     "react-instantsearch-dom": "6.23.3"
   }
 }
diff --git a/examples/next/pages/index.js b/examples/next/pages/index.js
@@ -1,7 +1,5 @@
-import isEqual from 'react-fast-compare';
 import React from 'react';
-import PropTypes from 'prop-types';
-import { withRouter } from 'next/router';
+import { useRouter } from 'next/router';
 import qs from 'qs';
 import algoliasearch from 'algoliasearch/lite';
 import { findResultsState } from 'react-instantsearch-dom/server';
@@ -27,70 +25,54 @@ const DEFAULT_PROPS = {
   indexName: 'instant_search',
 };
 
-class Page extends React.Component {
-  static propTypes = {
-    router: PropTypes.object.isRequired,
-    resultsState: PropTypes.object,
-    searchState: PropTypes.object,
-  };
-
-  state = {
-    searchState: this.props.searchState,
-    lastRouter: this.props.router,
-  };
-
-  static async getInitialProps({ asPath }) {
-    const searchState = pathToSearchState(asPath);
-    const resultsState = await findResultsState(App, {
-      ...DEFAULT_PROPS,
-      searchState,
-    });
-
-    return {
-      resultsState,
-      searchState,
-    };
-  }
+export default function Page(props) {
+  const [searchState, setSearchState] = React.useState(props.searchState);
+  const router = useRouter();
+  const debouncedSetState = React.useRef();
 
-  static getDerivedStateFromProps(props, state) {
-    if (!isEqual(state.lastRouter, props.router)) {
-      return {
-        searchState: pathToSearchState(props.router.asPath),
-        lastRouter: props.router,
-      };
+  React.useEffect(() => {
+    if (router) {
+      router.beforePopState(({ url }) => {
+        setSearchState(pathToSearchState(url));
+      });
     }
+  }, [router]);
+
+  return (
+    <div>
+      <Head title="Home" />
+      <App
+        {...DEFAULT_PROPS}
+        searchState={searchState}
+        resultsState={props.resultsState}
+        onSearchStateChange={(nextSearchState) => {
+          clearTimeout(debouncedSetState.current);
+
+          debouncedSetState.current = setTimeout(() => {
+            const href = searchStateToURL(nextSearchState);
+
+            router.push(href, href, { shallow: true });
+          }, updateAfter);
+
+          setSearchState(nextSearchState);
+        }}
+        createURL={createURL}
+      />
+    </div>
+  );
+}
 
-    return null;
-  }
-
-  onSearchStateChange = (searchState) => {
-    clearTimeout(this.debouncedSetState);
-
-    this.debouncedSetState = setTimeout(() => {
-      const href = searchStateToURL(searchState);
-
-      this.props.router.push(href, href, {
-        shallow: true,
-      });
-    }, updateAfter);
+export async function getServerSideProps({ resolvedUrl }) {
+  const searchState = pathToSearchState(resolvedUrl);
+  const resultsState = await findResultsState(App, {
+    ...DEFAULT_PROPS,
+    searchState,
+  });
 
-    this.setState({ searchState });
+  return {
+    props: {
+      resultsState: JSON.parse(JSON.stringify(resultsState)),
+      searchState,
+    },
   };
-
-  render() {
-    return (
-      <div>
-        <Head title="Home" />
-        <App
-          {...DEFAULT_PROPS}
-          searchState={this.state.searchState}
-          resultsState={this.props.resultsState}
-          onSearchStateChange={this.onSearchStateChange}
-          createURL={createURL}
-        />
-      </div>
-    );
-  }
 }
-
-export default withRouter(Page);
diff --git a/global.d.ts b/global.d.ts
@@ -1 +1,8 @@
 declare const __DEV__: boolean;
+
+declare namespace NodeJS {
+  // override the type set by Next (in examples), which sets NODE_ENV to readonly globally
+  interface ProcessEnv {
+    NODE_ENV: 'development' | 'production' | 'test';
+  }
+}
diff --git a/yarn.lock b/yarn.lock

Original file line number	Diff line number	Diff line change
`@@ -1,2 +1,2 @@`
`1`	`1`	`export * from './head';`
`2`		`-export { default as App } from './app';`
	`2`	`+export * from './app';`