Improve with-algolia-react-instantsearch example and convert to Typ…

…eScript (#42617)

Converted to TypeScript to match Contribution docs, and updated/simplified the example.

- Replaced stylesheets in Head component with imported styles
- Removed `style-loader`, `css-loader`, `cross-env`, `prop-types` packages
- Removed custom webpack config

## Documentation / Examples

- [X] Make sure the linting passes by running `pnpm build && pnpm lint`
- [X] The "examples guidelines" are followed from [our contributing doc](https://github.com/vercel/next.js/blob/canary/contributing/examples/adding-examples.md)

examples/with-algolia-react-instantsearch/components/Search.tsx

@@ -0,0 +1,56 @@
+import {
+  RefinementList,
+  SearchBox,
+  Hits,
+  Configure,
+  Highlight,
+  Pagination,
+  InstantSearch,
+} from 'react-instantsearch-dom'
+import type { InstantSearchProps } from 'react-instantsearch-dom'
+
+const HitComponent = ({ hit }: any) => (
+  <div className="hit">
+    <div>
+      <div className="hit-picture">
+        <img src={`${hit.image}`} />
+      </div>
+    </div>
+    <div className="hit-content">
+      <div>
+        <Highlight attribute="name" hit={hit} />
+        <span> - ${hit.price}</span>
+        <span> - {hit.rating} stars</span>
+      </div>
+      <div className="hit-type">
+        <Highlight attribute="type" hit={hit} />
+      </div>
+      <div className="hit-description">
+        <Highlight attribute="description" hit={hit} />
+      </div>
+    </div>
+  </div>
+)
+
+export function Search(props: InstantSearchProps) {
+  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 />
+      </footer>
+    </InstantSearch>
+  )
+}

examples/with-algolia-react-instantsearch/package.json

@@ -2,19 +2,25 @@
   "private": true,
   "scripts": {
     "dev": "next",
-    "build": "cross-env NODE_ENV=development next build",
+    "build": "next build",
     "start": "next start"
   },
   "dependencies": {
-    "algoliasearch": "4.3.0",
-    "cross-env": "^7.0.2",
-    "css-loader": "1.0.0",
+    "algoliasearch": "^4.14.2",
+    "instantsearch.css": "^7.4.5",
     "next": "latest",
-    "prop-types": "^15.5.10",
-    "qs": "^6.4.0",
+    "qs": "^6.11.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "react-instantsearch-dom": "6.6.0",
-    "style-loader": "^0.17.0"
+    "react-instantsearch-dom": "^6.38.0"
+  },
+  "devDependencies": {
+    "@types/node": "^18.11.9",
+    "@types/qs": "^6.9.7",
+    "@types/react": "^18.0.25",
+    "@types/react-dom": "^18.0.8",
+    "@types/react-instantsearch-core": "^6.26.2",
+    "@types/react-instantsearch-dom": "^6.12.3",
+    "typescript": "^4.8.4"
   }
 }

examples/with-algolia-react-instantsearch/pages/_app.tsx

@@ -0,0 +1,7 @@
+import type { AppProps } from 'next/app'
+import 'instantsearch.css/themes/algolia.css'
+import '../styles/global.css'
+
+export default function MyApp({ Component, pageProps }: AppProps) {
+  return <Component {...pageProps} />
+}