Overview
このチュートリアルでは、 MongoDBに接続する Next.jsアプリケーションを作成する方法を学びます。また、Next.js アプリケーションをホストするプラットフォームである Vercel にアプリケーションを配置する方法も学びます。
注意
このチュートリアルでは、Next.js がバージョン 13 で導入したApp Routerではなく、Next.js ページルーターを使用します。
前提条件
始める前に、以下の手順を完了してください。
MongoDB の使用開始ガイドを完了して、新しい Atlas アカウントを設定し、サンプルデータを新しい無料クラスターにロードします。
クラスターの接続文字列を取得し、このチュートリアルの後半で使用するために保存します。
Vercel のウェブサイトにアクセスして Vercel アカウントを作成します。
Tutorial
このチュートリアルでは、次の手順についてガイドします。
Next.jsアプリケーション の作成。
MongoDB をNext.js に接続します。
Next.js からMongoDBをクエリします。
Vercel にアプリケーションを配置します。
Next.js アプリケーションの作成
mongodb例テンプレートを使用して、 MongoDB統合で Next.jsアプリケーションを作成できます。
MongoDB統合で新しい Next.jsアプリケーションを作成するには、ターミナルで次のコマンドを実行します。
npx create-next-app --example with-mongodb sample_mflixコマンドは、npx create-next-app と --example with-mongodb パラメータを使用して、 MongoDB統合の例からアプリケーションを作成します。sample_mflix は、アプリケーションの名前です。必要に応じて、別の名前を使用してください。
コマンドが完了したら、次のコマンドを実行中てプロジェクトディレクトリに移動します。
cd sample_mflix次のコマンドを実行中してnpm依存関係をインストールします。
npm installNext.jsアプリケーション を起動するには、次のコマンドを実行します。
npm run devアプリケーションのビルド後に、ブラウザで localhost:3000 に移動します。ページには、 MongoDB接続文字列をまだ指定していないため、エラー メッセージが表示されます。
MongoDB をNext.js に接続する
Next.jsアプリケーションディレクトリには env.local.exampleファイルが含まれています。このファイルの名前を env.local に変更して開きます。ファイルには 1 つのプロパティが含まれています: MONGODB_URI。
MongoDB接続文字列をMONGODB_URIプロパティの値として設定します。env.localファイルは次の例のようになります。
MONGODB_URI=<Your connection string>構成を確認するには、ターミナルで次のコマンドを実行中て Next.jsアプリケーションを再起動します。
npm run devアプリケーションがビルドされたら、ブラウザで localhost:3000 に移動します。MongoDB Next.jsアプリケーションのようこそページが表示されます。
Tip
「MongoDBに接続されています」というメッセージが表示されたら、接続は成功します。「MongoDBに接続していません」というメッセージが表示された場合は、接続文字列を確認し、データベースユーザーとネットワーク接続が正しく構成されていることを確認してください。
Next.js からのクエリMongoDB
Next.js は、データを検索するための複数の方法をサポートしています。APIエンドポイントとなる接続されたデバイスを作成したり、ページに対してサーバー側のレンダリングされた関数を実行したり、ビルド時にデータを取得して静的ページを生成したりできます。このチュートリアルでは、3 つの方法すべての例を示します。
例 1: MongoDB用の Next.js APIエンドポイントの作成
新しいAPIエンドポイント ルートを作成するには、 pagesディレクトリに apiディレクトリを作成します。apiディレクトリで作成する各ファイルは、個別のAPIエンドポイントになります。
apiディレクトリに movies.tsx という新しいファイルを作成します。このエンドポイントとなる接続されたデバイスは、 MongoDBデータベースから映画のリストを返します。次のコードを movies.tsxファイルに追加します。
import clientPromise from "../../lib/mongodb";import { NextApiRequest, NextApiResponse } from 'next';
export default async (req: NextApiRequest, res: NextApiResponse) => { try { const client = await clientPromise; const db = client.db("sample_mflix"); const movies = await db .collection("movies") .find({}) .sort({ metacritic: -1 }) .limit(10) .toArray(); res.json(movies); } catch (e) { console.error(e); }}上記のコードでは、sample_mflixデータベースから metacritic 評価の降順でソートされた上位 10 映画を返すAPIエンドポイントが作成されます。res.json メソッドは、映画の配列をJSON形式でブラウザに提供します。localhost:3000/api/movies に移動すると、ブラウザにはデータベースから返された映画のリストが表示されます。
apiディレクトリに追加のファイルを作成して、さらにAPIルートを追加します。
例 2: MongoDBを使用した Next.js ページ
getServerSideProps() メソッドを使用して、Next.js ページにデータを直接取得できます。このメソッドは、Next.js ページを使用する場合に利用できます。
getServerSideProps() メソッドは、Next.js ページがサーバー側のレンダリングを使用して読み込むように強制します。ページが読み込まれるたびに、 getServerSideProps() メソッドはバックエンドで実行され、データを取得し、 props を通じてReactコンポーネントに送信されます。getServerSideProps() 内のコードはクライアントに送信されません。
pagesディレクトリに movies.tsx という新しいファイルを作成します。次のコードは、getServerSideProps() を使用してMongoDB をクエリする方法を示しています。
import clientPromise from "../lib/mongodb";import { GetServerSideProps } from 'next';
interface Movie { _id: string; title: string; metacritic: number; plot: string;}
interface MoviesProps { movies: Movie[];}
const Movies: React.FC<MoviesProps> = ({ movies }) => { return ( <div> <h1>Top 20 Movies of All Time</h1> <p> <small>(According to Metacritic)</small> </p> <ul> {movies.map((movie) => ( <li key={movie._id}> <h2>{movie.title}</h2> <h3>{movie.metacritic}</h3> <p>{movie.plot}</p> </li> ))} </ul> </div> );};
export default Movies;
export const getServerSideProps: GetServerSideProps = async () => { try { const client = await clientPromise; const db = client.db("sample_mflix"); const movies = await db .collection("movies") .find({}) .sort({ metacritic: -1 }) .limit(20) .toArray(); return { props: { movies: JSON.parse(JSON.stringify(movies)) }, }; } catch (e) { console.error(e); return { props: { movies: [] } }; }};Moviesページ コンポーネントは getServerSideProps() メソッドから props を受け取り、そのデータを使用してページをレンダーします。ページには、上位映画のタイトル、メタファー評価、プロットが表示されます。
注意
ページが呼び出されるたびに getServerSideProps() メソッドが実行されます。データが頻繁に変更されない場合は、代わりに静的ページ生成を使用してください。
例 3: MongoDBを使用した Next.js の静的生成
静的ページ生成を使用して、ビルド時にページを事前にレンダリングできます。この方法は、データが頻繁に変更されない場合に便利です。
pagesディレクトリに top.tsx という新しいファイルを作成します。次のコードは、getStaticProps() を使用して、MongoDBデータベースから 100 万の最高評価の映画をレンダーする方法を示しています。
import { ObjectId } from "mongodb";import clientPromise from "../lib/mongodb";import { GetStaticProps } from "next";
interface Movie { _id: ObjectId; title: string; metacritic: number; plot: string;}
interface TopProps { movies: Movie[];}
export default function Top({ movies }: TopProps) { return ( <div> <h1>Top 1000 Movies of All Time</h1> <p> <small>(According to Metacritic)</small> </p> <ul> {movies.map((movie) => ( <li key={movie._id.toString()}> <h2>{movie.title}</h2> <h3>{movie.metacritic}</h3> <p>{movie.plot}</p> </li> ))} </ul> </div> );}
export const getStaticProps: GetStaticProps<TopProps> = async () => { 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 (e) { console.error(e); return { props: { movies: [] }, }; }};localhost:3000/top に移動すると、ブラウザに映画のリストが表示されます。
開発モードでは、アプリケーションはgetServerSideProps() メソッドと同様に、毎回 getStaticProps() メソッドを呼び出します。本番モードでは、/top ページが事前レンダリングされ、ほぼすぐに読み込まれます。
Next.jsアプリケーションを本番モードで実行するには、まずビルドします。次に、start コマンドを実行して、ビルドされたアプリケーションを提供します。ターミナルで次のコマンドを実行します。
npm run buildnpm run startnpm run start コマンドを実行すると、Next.js はアプリケーションを本番モードで提供します。Next.js はページを静的に処理するため、getStaticProps() メソッドは /top ルートにアクセスするたびに実行されるわけではありません。事前レンダリングされた静的ページを確認するには、 .next/server/pages/top.htmlファイルを表示します。
Vercel にアプリケーションを配置する
Vercel 上のMongoDBを使用して Next.jsアプリケーションを配置します。配置する前に、前述の手順のアプリケーションコードを GitHubリポジトリにコミットする必要があります。Githubアカウントの作成 とリポジトリにコミットする 方法については、 GitHub ドキュメントを参照してください。
コードをリポジトリにコミットした後、Vercel に移動してログます。Vercel ダッシュボードで、Import Project（プロジェクトのインポート） ボタンをクリックし、Git リポジトリのインポート をクリックします。
GitHubリポジトリURLを入力し、Continue（続行） をクリックします。次の画面で、env.localファイルから変数を追加します。
[ 配置 ] ボタンをクリックします。Vercel は Next.jsアプリケーションを自動的にビルドして配置します。完了すると、アプリケーションにアクセスできるURLが返されます。
注意
Vercel は動的IPアドレスを使用するため、 MongoDB Atlasダッシュボード内の任意のIPアドレスからデータにアクセスするには、例外を追加する必要があります。これを行うには、[ ネットワーク アクセス ]タブに移動し、Add IP Address ボタンをクリックしてから、任意の場所からのアクセスを許可 ボタンをクリックします。
追加リソース
このチュートリアルの概念の詳細については、次のリソースを参照してください。