Next.js で REST API を作成および使用する方法

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 接続ユーティリティを作成するのが最善です。これを行うには、MongoDB インスタンスへの接続と接続の再利用を処理する lib/mongodb.js ファイルを作成します。

簡単な 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
</your-password></your-user>

MongoDB Atlas を使用している場合は、Atlas ダッシュボードからこの URI を取得できます。

ステップ 5: MongoDB と対話するための API ルートを作成する

req.method プロパティを検査することで、API でさまざまな HTTP メソッド (GET、POST、PUT、DELETE) を処理できます。これは、HTTP メソッドに基づいて異なる応答を行う users.js ファイルの更新バージョンです。

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 を使用する方法を見てみましょう。 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
</your-password></your-user>

この例では、新しいユーザーの名前と電子メールが POST リクエストとして API に送信されます。リクエストが成功すると、アラートが表示されます。

結論

Next.js を使用すると、同じフレームワーク内で REST API を直接構築して使用することが驚くほど簡単になります。 API ルート 機能を使用すると、CRUD 操作を処理できるサーバーレス エンドポイントを作成し、フロントエンドとシームレスに統合できます。

この投稿では、Next.js で REST API を作成し、さまざまな HTTP メソッドを処理し、その API をサーバー側 (getServerSideProps を使用) とクライアント側 (useEffect を使用) の両方で使用する方法について説明しました。これにより、最小限の構成でフルスタック アプリケーションを構築するための多くの可能性が開かれます。

Next.js は、統合されたバックエンド機能を備えたスケーラブルなアプリケーションを構築するための柔軟でシンプルなソリューションを開発者に提供し続けます。コーディングを楽しんでください!

以上がNext.js で REST API を作成および使用する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。