Como integrar o MongoDB ao seu aplicativo Next.js

1
npx create-next-app --example with-mongodb mflix

1
cd mflix

1
npm install

1
npm run dev

1
mongodb+srv://<USERNAME>:<PASSWORD>@cluster0.<appId>.mongodb.net/<DBNAME>?retryWrites=true&w=majority

1
MONGODB_URI=mongodb+srv://<USERNAME>:<PASSWORD>@cluster0.tdm0q.mongodb.net/sample_mflix?retryWrites=true&w=majority

1
npm run dev

1
import clientPromise from "../../lib/mongodb";
2
import { NextApiRequest, NextApiResponse } from 'next';
3
4
export default async (req: NextApiRequest, res: NextApiResponse) => {
5
    try {
6
        const client = await clientPromise;
7
        const db = client.db("sample_mflix");
8
        const movies = await db
9
            .collection("movies")
10
            .find({})
11
            .sort({ metacritic: -1 })
12
            .limit(10)
13
            .toArray();
14
        res.json(movies);
15
    } catch (e) {
16
        console.error(e);
17
    }
18
}

1
import clientPromise from "../lib/mongodb";
2
import { GetServerSideProps } from 'next';
3
4
5
interface Movie {
6
   _id: string;
7
   title: string;
8
   metacritic: number;
9
   plot: string;
10
}
11
12
13
interface MoviesProps {
14
   movies: Movie[];
15
}
16
17
18
const Movies: React.FC<MoviesProps> = ({ movies }) => {
19
   return (
20
       <div>
21
           <h1>Top 20 Movies of All Time</h1>
22
           <p>
23
               <small>(According to Metacritic)</small>
24
           </p>
25
           <ul>
26
               {movies.map((movie) => (
27
                   <li key={movie._id}>
28
                       <h2>{movie.title}</h2>
29
                       <h3>{movie.metacritic}</h3>
30
                       <p>{movie.plot}</p>
31
                   </li>
32
               ))}
33
           </ul>
34
       </div>
35
   );
36
};
37
38
39
export default Movies;
40
41
42
export const getServerSideProps: GetServerSideProps = async () => {
43
   try {
44
       const client = await clientPromise;
45
       const db = client.db("sample_mflix");
46
       const movies = await db
47
           .collection("movies")
48
           .find({})
49
           .sort({ metacritic: -1 })
50
           .limit(20)
51
           .toArray();
52
       return {
53
           props: { movies: JSON.parse(JSON.stringify(movies)) },
54
       };
55
   } catch (e) {
56
       console.error(e);
57
       return { props: { movies: [] } };
58
   }
59
};

1
import { ObjectId } from "mongodb";
2
import clientPromise from "../lib/mongodb";
3
import { GetStaticProps } from "next";
4
5
6
interface Movie {
7
   _id: ObjectId;
8
   title: string;
9
   metacritic: number;
10
   plot: string;
11
}
12
13
14
interface TopProps {
15
   movies: Movie[];
16
}
17
18
19
export default function Top({ movies }: TopProps) {
20
   return (
21
       <div>
22
           <h1>Top 1000 Movies of All Time</h1>
23
           <p>
24
               <small>(According to Metacritic)</small>
25
           </p>
26
           <ul>
27
               {movies.map((movie) => (
28
                   <li key={movie._id.toString()}>
29
                       <h2>{movie.title}</h2>
30
                       <h3>{movie.metacritic}</h3>
31
                       <p>{movie.plot}</p>
32
                   </li>
33
               ))}
34
           </ul>
35
       </div>
36
   );
37
}
38
39
40
export const getStaticProps: GetStaticProps<TopProps> = async () => {
41
   try {
42
       const client = await clientPromise;
43
44
45
       const db = client.db("sample_mflix");
46
47
48
       const movies = await db
49
           .collection("movies")
50
           .find({})
51
           .sort({ metacritic: -1 })
52
           .limit(1000)
53
           .toArray();
54
55
56
       return {
57
           props: { movies: JSON.parse(JSON.stringify(movies)) },
58
       };
59
   } catch (e) {
60
       console.error(e);
61
       return {
62
           props: { movies: [] },
63
       };
64
   }
65
};

1
npm run build
2
npm run start