5. API Routes

Next.jsでは、API Routesを使用してサーバーレスファンクションを簡単に定義できます。API Routesを使用すると、フロントエンドと同じプロジェクト内でバックエンドロジックを処理することができます。

APIルートの設定

APIルートは、pages/apiディレクトリ内にファイルを作成することで定義します。ファイル名がエンドポイント名になります。

基本的な使用例

以下の例では、シンプルなAPIルートを定義し、/api/helloエンドポイントにアクセスすると「Hello, world!」というメッセージが返されます。

// pages/api/hello.js
export default function handler(req, res) {
  res.status(200).json({ message: 'Hello, world!' });
}

動的APIルート

動的APIルートを作成するには、ファイル名にブラケットを使用します。例えば、特定のユーザーのデータを取得するAPIルートを定義することができます。

使用例

以下の例では、/api/user/[id]エンドポイントにアクセスすると、URLのidパラメータに基づいて動的にユーザー情報が返されます。

// pages/api/user/[id].js
export default function handler(req, res) {
  const {
    query: { id },
  } = req;
  res.status(200).json({ userId: id, name: `User ${id}` });
}

Middlewareの利用

Next.jsでは、APIルートでミドルウェアを使用して、リクエストを前処理することができます。例えば、認証やログの記録などが考えられます。

使用例

以下の例では、シンプルな認証ミドルウェアを作成し、それをAPIルートで使用します。

// middleware/auth.js
export function auth(req, res, next) {
  const { authorization } = req.headers;
  if (authorization === 'Bearer mysecrettoken') {
    next();
  } else {
    res.status(401).json({ message: 'Unauthorized' });
  }
}

// pages/api/protected.js
import { auth } from '../../middleware/auth';

export default function handler(req, res) {
  auth(req, res, () => {
    res.status(200).json({ message: 'This is a protected route' });
  });
}

データベースとの連携

API Routesは、データベースと連携してデータの読み書きを行うことができます。例えば、MongoDBやPostgreSQLなどのデータベースを使用することができます。

使用例（MongoDB）

以下の例では、MongoDBと連携してデータを取得するAPIルートを作成します。

MongoDBクライアントのセットアップ：
```
npm install mongodb
```

APIルートの作成：

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

const uri = process.env.MONGODB_URI;
const options = {
  useNewUrlParser: true,
  useUnifiedTopology: true,
};

let client;
let clientPromise;

if (!process.env.MONGODB_URI) {
  throw new Error('Please add your Mongo URI to .env.local');
}

if (process.env.NODE_ENV === 'development') {
  if (!global._mongoClientPromise) {
    client = new MongoClient(uri, options);
    global._mongoClientPromise = client.connect();
  }
  clientPromise = global._mongoClientPromise;
} else {
  client = new MongoClient(uri, options);
  clientPromise = client.connect();
}

export default clientPromise;

// pages/api/posts.js
import clientPromise from '../../lib/mongodb';

export default async function handler(req, res) {
  const client = await clientPromise;
  const db = client.db('mydatabase');
  const posts = await db.collection('posts').find({}).toArray();
  res.status(200).json(posts);
}

このように進めていきます。他に追加や修正の希望があればお知らせください。

5. API Routes

APIルートの設定​

基本的な使用例​

動的APIルート​

使用例​

Middlewareの利用​