Overview
在本教程中，您学习如何创建连接到MongoDB 的Next.js应用程序。您还将学习；了解如何在托管 Next.js 应用程序的平台 Vercel 上部署应用程序。
注意
This tutorial uses the Next.js 页面路由器，而不是 Next.js 在版本 13 中引入的 App Router。
先决条件
开始之前，请完成以下步骤：
完成MongoDB入门指南，设立新的Atlas帐户并将示例数据加载到新的免费套餐MongoDB部署。
获取连接字符串并保存以供本教程稍后使用。
访问Vercel网站创建 Vercel 帐户。
下载 Node.js 版本 18 或更高版本。
Tutorial
本教程将指导您完成以下步骤：
创建 Next.js应用程序。
将MongoDB连接到 Next.js。
从 Next.js 查询MongoDB 。
在 Vercel 上部署应用程序。
创建 Next.js 应用程序
您可以使用with-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 install
要启动 Next.js应用程序，运行以下命令：
npm run dev
构建应用程序后，在浏览器中导航至 localhost:3000。该页面会显示一条错误消息，因为您尚未提供MongoDB连接字符串。
将MongoDB连接到 Next.js
Next.js应用程序目录包含一个 env.local.example文件。将此文件重命名为 env.local 并将其打开。该文件包含一个属性：MONGODB_URI。
将MongoDB连接字符串设置为 MONGODB_URI属性的值。您的 env.local文件类似于以下示例：
MONGODB_URI=<Your connection string>
要验证配置，请在终端中运行以下命令，重新启动 Next.js应用程序：
npm run dev
构建应用程序后，在浏览器中导航至 localhost:3000。您会看到 with-mongodb Next.js应用程序欢迎页面。
提示
如果看到"You are connected to MongoDB"消息，则表明连接成功。如果看到“You are NOT connected to MongoDB”消息，请验证连接字符串，确保数据库用户和网络连接配置正确。
从 Next.js 查询MongoDB
Next.js 支持多种检索数据的方式。您可以创建API终结点，为页面运行服务器端呈现的函数，或通过在构建时获取数据来生成静态页面。本教程展示了所有这三种方法的示例。
示例 1：为MongoDB创建 Next.js API终结点
要创建新的API终结点路由，请在 pages目录中创建 api目录。您在 api目录中创建的每个文件都将成为一个单独的API终结点。
在 api目录中创建一个名为 movies.tsx 的新文件。此终结点会从MongoDB 数据库中返回电影列表。将以下代码添加到 movies.tsx文件：
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 }
前面的代码创建一个API终结点，该终结点返回 sample_mflix数据库中排名最高的 10 部电影，并按其 metacritic 评分降序排列。res.json 方法以JSON格式向浏览器提供电影数组。当导航到 localhost:3000/api/movies 时，浏览器会显示从数据库返回的电影列表。
通过在 api目录中创建其他文件来添加更多API路由。
示例 2：使用MongoDB 的Next.js 页面
您可以使用 getServerSideProps() 方法将数据直接获取到 Next.js 页面。当您使用 Next.js 页面时，此方法可用。
getServerSideProps() 方法强制 Next.js 页面使用服务器端呈现进行加载。每次加载页面时，getServerSideProps() 方法都会在后端运行，获取数据，并通过属性将其发送到React组件。getServerSideProps() 中的代码永远不会发送到客户端。
在 pages目录中创建一个名为 movies.tsx 的新文件。以下代码展示了如何使用 getServerSideProps()查询MongoDB：
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 };
Movies 页面组件从 getServerSideProps() 方法接收属性，并使用该数据渲染页面。该页面显示排名靠前的电影标题、Metacritic 评分和情节。
注意
每次调用该页面时，getServerSideProps() 方法都会运行。如果您的数据不经常更改，请改用静态页面生成。
示例 3：使用MongoDB进行 Next.js 静态生成
您可以使用静态页面生成功能在构建时预渲染页面。当数据不经常更改时，此方法非常有用。
在 pages目录中创建一个名为 top.tsx 的新文件。以下代码展示了如何使用 getStaticProps() 渲染MongoDB 数据库中评分最高的前 1000 部电影：
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 };
当您导航到 localhost:3000/top 时，浏览器会显示电影列表。
在开发模式下，应用程序每次都会调用 getStaticProps() 方法，类似于 getServerSideProps() 方法。在生产模式下，/top 页面几乎会立即预呈现并加载。
要在生产模式下运行Next.js应用程序，请先构建。然后，运行start 命令以提供服务构建的应用程序。在终端中运行以下命令：
npm run build npm run start
当您运行npm run start 命令时，Next.js 会在生产模式下为您的应用程序提供服务。getStaticProps() 方法不会在您每次访问权限/top 路由时运行，因为 Next.js 以静态方式提供服务该页面。要查看预呈现的静态页面，请查看 .next/server/pages/top.html文件。
在 Vercel 上部署应用程序
使用 Vercel 上的MongoDB部署 Next.js应用程序。在部署之前，必须将前面步骤中的应用程序代码提交到 GitHub存储库。要学习；了解如何创建Github帐户并提交到存储库，请参阅 GitHub 文档。
在将代码提交到存储库后，导航到Vercel并登录。在 Vercel仪表盘上，单击导入项目按钮，然后单击导入 Git 存储库。
输入 GitHub存储库URL ，然后单击继续。在下一个屏幕上，添加 env.local文件中的变量。
单击部署按钮。Vercel 会自动构建和部署 Next.js应用程序。完成后，您将收到一个URL ，您可以在其中访问权限您的应用程序。
注意
Vercel 使用动态IP地址，因此您必须在MongoDB Atlas仪表盘添加例外，才能从任何IP地址访问权限数据。为此，请导航到“网络访问”标签页，单击 Add IP Address 按钮，然后单击允许从任何地方访问按钮。
其他资源
有关本教程中概念的更多信息，请参阅以下资源：