examples: migrate with-elasticsearch to TypeScript (#44842)

## Bug - [ ] Related issues linked using `fixes #number` - [ ] Integration tests added - [ ] Errors have a helpful link attached, see [`contributing.md`](https://github.com/vercel/next.js/blob/canary/contributing.md) ## Feature - [ ] Implements an existing feature request or RFC. Make sure the feature request has been accepted for implementation before opening a PR. - [ ] Related issues linked using `fixes #number` - [ ] [e2e](https://github.com/vercel/next.js/blob/canary/contributing/core/testing.md#writing-tests-for-nextjs) tests added - [ ] Documentation added - [ ] Telemetry added. In case of a feature if it's used or not. - [ ] Errors have a helpful link attached, see [`contributing.md`](https://github.com/vercel/next.js/blob/canary/contributing.md) ## 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) Co-authored-by: Balázs Orbán <[email protected]>
vercel · Jun 15, 2023 · 5b268be · 5b268be
1 parent b09bbad
commit 5b268be
Show file tree

Hide file tree

Showing 13 changed files with 539 additions and 186 deletions.
diff --git a/...s/with-elasticsearch/lib/elasticsearch.js → ...s/with-elasticsearch/lib/elasticsearch.ts b/...s/with-elasticsearch/lib/elasticsearch.js → ...s/with-elasticsearch/lib/elasticsearch.ts
diff --git a/examples/with-elasticsearch/package.json b/examples/with-elasticsearch/package.json
@@ -7,9 +7,15 @@
     "lint": "next lint"
   },
   "dependencies": {
-    "@elastic/elasticsearch": "^8.1.0",
+    "@elastic/elasticsearch": "^8.6.0",
     "next": "latest",
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
+  },
+  "devDependencies": {
+    "@types/node": "^18.11.18",
+    "@types/react": "^18.0.26",
+    "@types/react-dom": "^18.0.10",
+    "typescript": "^4.8.2"
   }
 }
diff --git a/examples/with-elasticsearch/pages/_app.js b/examples/with-elasticsearch/pages/_app.js
diff --git a/examples/with-elasticsearch/pages/_app.tsx b/examples/with-elasticsearch/pages/_app.tsx
@@ -0,0 +1,6 @@
+import type { AppProps } from 'next/app'
+import '@/styles/globals.css'
+
+export default function App({ Component, pageProps }: AppProps) {
+  return <Component {...pageProps} />
+}
diff --git a/examples/with-elasticsearch/pages/index.js b/examples/with-elasticsearch/pages/index.js
diff --git a/examples/with-elasticsearch/pages/index.tsx b/examples/with-elasticsearch/pages/index.tsx
@@ -0,0 +1,158 @@
+import type { InferGetServerSidePropsType } from 'next'
+import Head from 'next/head'
+import Image from 'next/image'
+import styles from '@/styles/Home.module.css'
+import { Inter } from 'next/font/google'
+import { connectToElasticsearch } from '@/lib/elasticsearch'
+
+const inter = Inter({ subsets: ['latin'] })
+
+type HomePageProps = InferGetServerSidePropsType<typeof getServerSideProps>
+
+export default function Home({ isConnected }: HomePageProps) {
+  const connectionStatus = isConnected ? (
+    <p>You are connected to Elasticsearch</p>
+  ) : (
+    <p>
+      You are NOT connected to Elasticsearch. Check the{' '}
+      <code className={styles.code}>README.md</code> for instructions.
+    </p>
+  )
+
+  return (
+    <>
+      <Head>
+        <title>Create Next App</title>
+        <meta name="description" content="Generated by create next app" />
+        <meta name="viewport" content="width=device-width, initial-scale=1" />
+        <link rel="icon" href="/favicon.ico" />
+      </Head>
+      <main className={styles.main}>
+        <div className={styles.description}>
+          <p>
+            Get started by editing&nbsp;
+            <code className={styles.code}>pages/index.tsx</code>
+          </p>
+          <div>
+            <a
+              href="https://vercel.com?utm_source=create-next-app&utm_medium=default-template&utm_campaign=create-next-app"
+              target="_blank"
+              rel="noopener noreferrer"
+            >
+              By{' '}
+              <Image
+                src="/vercel.svg"
+                alt="Vercel Logo"
+                className={styles.vercelLogo}
+                width={100}
+                height={24}
+                priority
+              />
+            </a>
+          </div>
+        </div>
+
+        <div className={styles.center} style={{ paddingBottom: 0 }}>
+          <Image
+            className={styles.logo}
+            src="/next.svg"
+            alt="Next.js Logo"
+            width={180}
+            height={37}
+            priority
+          />
+          <div className={styles.thirteen}>
+            <Image
+              src="/thirteen.svg"
+              alt="13"
+              width={40}
+              height={31}
+              priority
+            />
+          </div>
+        </div>
+
+        <div
+          className={`${styles.center} ${inter.className}`}
+          style={{ paddingBlock: 20 }}
+        >
+          <h2>with Elasticsearch</h2>
+        </div>
+
+        <div className={`${styles.center} ${styles.status}`}>
+          {connectionStatus}
+        </div>
+
+        <div className={styles.grid}>
+          <a
+            href="https://nextjs.org/docs?utm_source=create-next-app&utm_medium=default-template&utm_campaign=create-next-app"
+            className={styles.card}
+            target="_blank"
+            rel="noopener noreferrer"
+          >
+            <h2 className={inter.className}>
+              Docs <span>-&gt;</span>
+            </h2>
+            <p className={inter.className}>
+              Find in-depth information about Next.js features and&nbsp;API.
+            </p>
+          </a>
+
+          <a
+            href="https://nextjs.org/learn?utm_source=create-next-app&utm_medium=default-template&utm_campaign=create-next-app"
+            className={styles.card}
+            target="_blank"
+            rel="noopener noreferrer"
+          >
+            <h2 className={inter.className}>
+              Learn <span>-&gt;</span>
+            </h2>
+            <p className={inter.className}>
+              Learn about Next.js in an interactive course with&nbsp;quizzes!
+            </p>
+          </a>
+
+          <a
+            href="https://vercel.com/templates?framework=next.js&utm_source=create-next-app&utm_medium=default-template&utm_campaign=create-next-app"
+            className={styles.card}
+            target="_blank"
+            rel="noopener noreferrer"
+          >
+            <h2 className={inter.className}>
+              Templates <span>-&gt;</span>
+            </h2>
+            <p className={inter.className}>
+              Discover and deploy boilerplate example Next.js&nbsp;projects.
+            </p>
+          </a>
+
+          <a
+            href="https://vercel.com/new?utm_source=create-next-app&utm_medium=default-template&utm_campaign=create-next-app"
+            className={styles.card}
+            target="_blank"
+            rel="noopener noreferrer"
+          >
+            <h2 className={inter.className}>
+              Deploy <span>-&gt;</span>
+            </h2>
+            <p className={inter.className}>
+              Instantly deploy your Next.js site to a shareable URL
+              with&nbsp;Vercel.
+            </p>
+          </a>
+        </div>
+      </main>
+    </>
+  )
+}
+
+export const getServerSideProps = async () => {
+  let isConnected: boolean = false
+  const client = await connectToElasticsearch()
+  if (client !== 'ERR_ENV_NOT_DEFINED') {
+    isConnected = true
+  }
+  return {
+    props: { isConnected },
+  }
+}
diff --git a/examples/with-elasticsearch/public/favicon.ico b/examples/with-elasticsearch/public/favicon.ico
diff --git a/examples/with-elasticsearch/public/next.svg b/examples/with-elasticsearch/public/next.svg
diff --git a/examples/with-elasticsearch/public/thirteen.svg b/examples/with-elasticsearch/public/thirteen.svg
diff --git a/examples/with-elasticsearch/public/vercel.svg b/examples/with-elasticsearch/public/vercel.svg