[Docs] Update mongodb example (#39658)

## Changelog - Updated deps - Migrated to typescript ## Documentation / Examples - [x] Make sure the linting passes by running `pnpm lint` - [x] The examples guidelines are followed from [our contributing doc](https://github.com/vercel/next.js/blob/canary/contributing.md#adding-examples)
vercel · Aug 21, 2022 · 74fb7ba · 74fb7ba
1 parent 1ebd6a1
commit 74fb7ba
Show file tree

Hide file tree

Showing 5 changed files with 64 additions and 27 deletions.
diff --git a/examples/with-mongodb/lib/mongodb.js → examples/with-mongodb/lib/mongodb.ts b/examples/with-mongodb/lib/mongodb.js → examples/with-mongodb/lib/mongodb.ts
@@ -1,5 +1,9 @@
 import { MongoClient } from 'mongodb'
 
+if (!process.env.MONGODB_URI) {
+  throw new Error('Invalid environment variable: "MONGODB_URI"')
+}
+
 const uri = process.env.MONGODB_URI
 const options = {}
 

diff --git a/examples/with-mongodb/package.json b/examples/with-mongodb/package.json
@@ -6,9 +6,14 @@
     "start": "next start"
   },
   "dependencies": {
-    "mongodb": "^4.1.3",
+    "mongodb": "^4.8.1",
     "next": "latest",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2"
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
+  },
+  "devDependencies": {
+    "@types/node": "18.7.5",
+    "@types/react": "16.9.17",
+    "typescript": "4.6.3"
   }
 }
diff --git a/examples/with-mongodb/pages/index.js → examples/with-mongodb/pages/index.tsx b/examples/with-mongodb/pages/index.js → examples/with-mongodb/pages/index.tsx
@@ -1,7 +1,33 @@
 import Head from 'next/head'
 import clientPromise from '../lib/mongodb'
+import { InferGetServerSidePropsType } from 'next'
 
-export default function Home({ isConnected }) {
+export async function getServerSideProps(context) {
+  try {
+    await clientPromise
+    // `await clientPromise` will use the default database passed in the MONGODB_URI
+    // However you can use another database (e.g. myDatabase) by replacing the `await clientPromise` with the following code:
+    //
+    // `const client = await clientPromise`
+    // `const db = client.db("myDatabase")`
+    //
+    // Then you can execute queries against your database like so:
+    // db.find({}) or any of the MongoDB Node Driver commands
+
+    return {
+      props: { isConnected: true },
+    }
+  } catch (e) {
+    console.error(e)
+    return {
+      props: { isConnected: false },
+    }
+  }
+}
+
+export default function Home({
+  isConnected,
+}: InferGetServerSidePropsType<typeof getServerSideProps>) {
   return (
     <div className="container">
       <Head>
@@ -221,26 +247,3 @@ export default function Home({ isConnected }) {
     </div>
   )
 }
-
-export async function getServerSideProps(context) {
-  try {
-    await clientPromise
-    // `await clientPromise` will use the default database passed in the MONGODB_URI
-    // However you can use another database (e.g. myDatabase) by replacing the `await clientPromise` with the following code:
-    //
-    // `const client = await clientPromise`
-    // `const db = client.db("myDatabase")`
-    //
-    // Then you can execute queries against your database like so:
-    // db.find({}) or any of the MongoDB Node Driver commands
-
-    return {
-      props: { isConnected: true },
-    }
-  } catch (e) {
-    console.error(e)
-    return {
-      props: { isConnected: false },
-    }
-  }
-}
diff --git a/examples/with-mongodb/tsconfig.json b/examples/with-mongodb/tsconfig.json
@@ -0,0 +1,20 @@
+{
+  "compilerOptions": {
+    "target": "es5",
+    "lib": ["dom", "dom.iterable", "esnext"],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "strict": true,
+    "forceConsistentCasingInFileNames": true,
+    "noEmit": true,
+    "incremental": true,
+    "esModuleInterop": true,
+    "module": "esnext",
+    "moduleResolution": "node",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "jsx": "preserve"
+  },
+  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
+  "exclude": ["node_modules"]
+}
diff --git a/examples/with-mongodb/types/mongodb.d.ts b/examples/with-mongodb/types/mongodb.d.ts
@@ -0,0 +1,5 @@
+import { MongoClient } from 'mongodb'
+
+declare global {
+  var _mongoClientPromise: Promise<MongoClient>
+}