如何在 Next.js 中建立和使用 REST API-js教程-PHP中文網

How to Create and Consume a REST API in Next.js

Next.js 以其伺服器端渲染和靜態網站產生的功能而聞名，但它也允許您使用伺服器建立成熟的應用程式端功能，包括API。使用 Next.js，您可以直接在框架本身內輕鬆建立 REST API，它可以由您的前端應用程式或任何外部服務使用。

在這篇文章中，我們將介紹如何在 Next.js 中建立簡單的 REST API 以及如何在應用程式內和外部使用該 API。最後，您將深入了解如何在 Next.js 專案中建立 API 並與之互動。

在 Next.js 中建立 REST API

Next.js 提供了一種使用 pages/api 目錄建立 API 路由的簡單方法。您在此目錄中建立的每個檔案都會自動成為 API 端點，其中檔案名稱對應於端點的路由。

第 1 步：設定新的 Next.js 項目

如果您還沒有 Next.js 項目，您可以透過執行以下命令輕鬆建立一個：

npx create-next-app my-next-api-project
cd my-next-api-project
npm install mongodb
npm run dev

登入後複製

這將建立一個基本的 Next.js 應用程式並啟動開發伺服器。現在您可以開始建立 REST API。

第 2 步：建立您的 API 路由

在 Next.js 中，API 路由是在 pages/api 資料夾中建立的。例如，如果您想要建立一個簡單的 API 來管理用戶，您可以在 pages/api 目錄中建立一個名為 users.js 的檔案。

mkdir pages/api
touch pages/api/users.js

登入後複製

在users.js中，您可以定義API路由。這是一個使用使用者清單進行回應的簡單範例：

// pages/api/users.js
export default function handler(req, res) {
  // Define a list of users
  const users = [
    { id: 1, name: "John Doe", email: "john@example.com" },
    { id: 2, name: "Jane Smith", email: "jane@example.com" },
  ];

  // Send the list of users as a JSON response
  res.status(200).json(users);
}

登入後複製

第 3 步：建立 MongoDB 連線實用程式
為了確保您不會為每個 API 請求開啟新的資料庫連接，最好建立一個可重複使用的 MongoDB 連接實用程式。您可以透過建立 lib/mongodb.js 檔案來完成此操作，該檔案處理與 MongoDB 實例的連接並重複使用該連接。

這是一個簡單的 MongoDB 連線實用程式的範例：

// lib/mongodb.js
import { MongoClient } from 'mongodb';

const client = new MongoClient(process.env.MONGODB_URI, {
  useNewUrlParser: true,
  useUnifiedTopology: true,
});

let clientPromise;

if (process.env.NODE_ENV === 'development') {
  // In development, use a global variable so the MongoDB client is not re-created on every reload
  if (global._mongoClientPromise) {
    clientPromise = global._mongoClientPromise;
  } else {
    global._mongoClientPromise = client.connect();
    clientPromise = global._mongoClientPromise;
  }
} else {
  // In production, it’s safe to use the MongoClient directly
  clientPromise = client.connect();
}

export default clientPromise;

登入後複製

第 4 步：在 .env.local 中設定 MongoDB URI
若要安全地儲存 MongoDB URI，請在專案的根目錄中建立一個 .env.local 檔案。在此處新增您的 MongoDB URI：

# .env.local
MONGODB_URI=mongodb+srv://<your-user>:<your-password>@cluster0.mongodb.net/mydatabase?retryWrites=true&w=majority

登入後複製

如果您使用 MongoDB Atlas，您可以從 Atlas 儀表板取得此 URI。

第 5 步：建立與 MongoDB 互動的 API 路由

您可以透過檢查 req.method 屬性來處理 API 中的不同 HTTP 方法（GET、POST、PUT、DELETE）。這是 users.js 檔案的更新版本，它根據 HTTP 方法做出不同的回應。

npx create-next-app my-next-api-project
cd my-next-api-project
npm install mongodb
npm run dev

登入後複製

現在，您的 API 能夠處理 GET、POST、PUT 和 DELETE 請求來管理使用者。

GET 取得所有使用者。
POST 新增用戶。
PUT 更新現有使用者。
DELETE 刪除使用者。

第 6 步：測試 API

現在您已經設定了 API，您可以透過使用 Postman 或 cURL 等工具發出請求來測試它。以下是每種方法的 URL：

向 /api/users 發出 GET 請求以檢索使用者清單。
向 /api/users 發送 POST 請求以建立新使用者（在請求正文中發送使用者資料）。
向 /api/users 發出 PUT 請求以更新現有使用者（在請求正文中傳送使用者資料）。
向 /api/users 發送 DELETE 請求以刪除使用者（在請求正文中傳送使用者 ID）。

第 5 步：保護您的 API（可選）

您可能想要為 API 新增一些基本驗證或授權，以防止未經授權的存取。您可以透過檢查 req.headers 或使用環境變數來儲存 API 金鑰來輕鬆完成此操作。例如：

mkdir pages/api
touch pages/api/users.js

登入後複製

在 Next.js 應用程式中使用 REST API

現在您已經設定了 API，讓我們看看如何在 Next.js 應用程式中使用它。使用 API 的方法有很多種，但最常見的方法是使用 fetch（或 Axios 等函式庫）發出 HTTP 請求。

第 1 步：使用 getServerSideProps 取得數據

如果您需要從伺服器端的 API 取得數據，可以使用 Next.js 的 getServerSideProps 在渲染頁面之前取得資料。以下是如何在頁面元件內使用 /api/users 端點的範例：

// pages/api/users.js
export default function handler(req, res) {
  // Define a list of users
  const users = [
    { id: 1, name: "John Doe", email: "john@example.com" },
    { id: 2, name: "Jane Smith", email: "jane@example.com" },
  ];

  // Send the list of users as a JSON response
  res.status(200).json(users);
}

登入後複製

在此範例中，當使用者造訪 /users 頁面時，getServerSideProps 將在渲染頁面之前從 API 取得使用者清單。這確保了頁面載入時資料已經可用。

第 2 步：使用 useEffect 取得客戶端數據

您也可以使用 React 的 useEffect 鉤子來使用 API 用戶端。這對於在頁面加載後獲取資料很有用。

// lib/mongodb.js
import { MongoClient } from 'mongodb';

const client = new MongoClient(process.env.MONGODB_URI, {
  useNewUrlParser: true,
  useUnifiedTopology: true,
});

let clientPromise;

if (process.env.NODE_ENV === 'development') {
  // In development, use a global variable so the MongoDB client is not re-created on every reload
  if (global._mongoClientPromise) {
    clientPromise = global._mongoClientPromise;
  } else {
    global._mongoClientPromise = client.connect();
    clientPromise = global._mongoClientPromise;
  }
} else {
  // In production, it’s safe to use the MongoClient directly
  clientPromise = client.connect();
}

export default clientPromise;

登入後複製

在此範例中，API 請求是在元件安裝後發出的，並且使用者清單在元件的狀態中更新。

步驟 3：發出 POST 請求以新增數據

要將資料傳送到您的 API，您可以使用 POST 請求。以下是如何將新使用者的資料傳送到 /api/users 端點的範例：

# .env.local
MONGODB_URI=mongodb+srv://<your-user>:<your-password>@cluster0.mongodb.net/mydatabase?retryWrites=true&w=majority

登入後複製

在此範例中，新使用者的姓名和電子郵件會以 POST 要求傳送到 API。請求成功後，會顯示警報。

結論

Next.js 讓直接在同一框架內建置和使用 REST API 變得異常簡單。透過使用 API 路由 功能，您可以建立可以處理 CRUD 操作並將其與前端無縫整合的無伺服器端點。

在這篇文章中，我們介紹如何在 Next.js 中建立 REST API、處理不同的 HTTP 方法，以及如何在伺服器端（使用 getServerSideProps）和客戶端（使用 useEffect）使用該 API。這為以最少的配置建立全端應用程式提供了多種可能性。

Next.js 繼續為開發人員提供靈活而簡單的解決方案，用於建立具有整合後端功能的可擴展應用程式。快樂編碼！

以上是如何在 Next.js 中建立和使用 REST API的詳細內容。更多資訊請關注PHP中文網其他相關文章！