Initial Commit

Author: iamKushagra

.gitignore

@@ -33,4 +33,4 @@ yarn-error.log*
 
 # typescript
 *.tsbuildinfo
-next-env.d.ts
+next-env.d.ts

pages/movies.js

@@ -0,0 +1,42 @@
+import clientPromise from "../lib/mongodb";
+
+export default function Movies({ movies }) {
+    return (
+        <div>
+            <h1>Top 20 Movies of All Time</h1>
+            <p>
+                <small>(According to Metacritic)</small>
+            </p>
+            <ul>
+                {movies.map((movie) => (
+                    <li>
+                        <h2>{movie.title}</h2>
+                        <h3>{movie._id}</h3>
+                        <p>{movie.plot}</p>
+                    </li>
+                ))}
+            </ul>
+        </div>
+    );
+}
+
+export async function getServerSideProps(context) {
+    try {
+        const client = await clientPromise;
+
+        const db = client.db("sample_mflix");
+
+        const movies = await db
+            .collection("movies")
+            .find({})
+            .sort({ metacritic: -1 })
+            .limit(10)
+            .toArray();
+
+        return {
+            props: { movies: JSON.parse(JSON.stringify(movies)) },
+        };
+    } catch (error) {
+        console.log(error);
+    }
+}

pages/top.js

@@ -0,0 +1,42 @@
+import clientPromise from "../lib/mongodb";
+
+export default function Top({ movies }) {
+  return (
+    <div>
+      <h1>Top 1000 Movies of All Time</h1>
+      <p>
+        <small>(According to Metacritic)</small>
+      </p>
+      <ul>
+        {movies.map((movie) => (
+          <li>
+            <h2>{movie.title}</h2>
+            <h3>{movie.metacritic}</h3>
+            <p>{movie.plot}</p>
+          </li>
+        ))}
+      </ul>
+    </div>
+  );
+}
+
+export async function getStaticProps() {
+    try {
+        const client = await clientPromise;
+
+        const db = client.db("sample_mflix");
+
+        const movies = await db
+            .collection("movies")
+            .find({})
+            .sort({ metacritic: -1 })
+            .limit(1000)
+            .toArray();
+
+        return {
+            props: { movies: JSON.parse(JSON.stringify(movies)) },
+        };
+    } catch (error) {
+        console.log(error);
+    }
+}