チュートリアル: Vercel で Next.js アプリケーションを配置

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

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

npm run build
npm run start