Amazon Web Services ブログ

AWS Amplify での Next.js API routes

Next.js は人気のある React フレームワークで、React アプリにサーバーサイドレンダリング・静的サイト生成を可能にします。これにより、驚くほど簡単にフルスタック React アプリケーションを構築できます。Next.js は、サーバーサイドレンダリングと静的サイト生成に必要な多くの難しい設定を自動的に処理する点で、Next.js は他のソリューションより開発者に好まれます。また、スタイリング・ルーティング・バンドルなどのビルトインサポートがあります。Next.js アプリは非常にパフォーマンスが高く、検索エンジンに対する最適化がされており、コマンド 1 つでホスティングプロバイダへ簡単にデプロイできます。Next.js は柔軟さ、シンプルさ、機能の豊富さにより、本番用 React アプリケーションを構築するための上位の選択肢になっています。

Next.js の API routes とは何ですか？

あなたのアプリケーションのために API を追加で構築する際、Next.js は Next.js API routes を利用することでサーバーサイドレンダリングのハイブリッドアプリに重点を置いたソリューションを提供します。API のみのアプリケーションを提供する場合、Express のほうが Next.js よりシンプルな構成にできる可能性があります。

Express API サーバーを独立して構築する場合、Next.js API routes に組み込まれているようなすべての最適化とインフラストラクチャをセットアップして、まったく別のアプリを構築して管理する必要があります。これは、スタックとデプロイを複雑にします。API routes を使用すると、別のアプリを必要とせずに Next.js アプリで API を直接構築できます。これにより、アーキテクチャと導入プロセスが簡略化されます。

Next.js API routes はファイルシステムベースルーティングを採用しており、障壁が低くエンドポイントを直感的に操作することができます。pages/api/users.js のように扱いたいルートにファイルを作成し、関数をエクスポートするだけでそのルートはすぐに使用でき、Next.js フレームワークに完全に統合されます。これにより、開発環境の高速なホットリロード・簡単な CORS 設定・環境変数やミドルウェアのサポートを得ることができます。

AWS Amplify は、フロントエンドのウェブ開発者やモバイル開発者が、API routes を備えた Next.js アプリケーションを含むフルスタックアプリケーションを AWS 上で迅速かつ簡単に構築できるようにする、専用ツールと機能のセットです。AWS Amplify Hosting への Next.js API routes のデプロイは、AWS Amplify CLI を通じて完全に管理されます。外部サービスへのセキュアなアクセスのために環境変数を Amplify Hosting で管理し、AWS Amplify Libraries は AWS AppSync API と Amazon Cognito のユーザーへのアクセスを提供します。

Amplify, AWS AppSync で Next.js の API routes を 利用する

Amplify プロジェクトで Next.js の API routes を使う例として、ユーザーが送信したデータをサードパーティのバックエンドシステムで処理する必要がある Todo アプリケーションがあります。

アプリケーションでは、顧客が UI を通じて ToDo を送信した時に、サードパーティのバックエンドシステムでそのテキストを処理し、そのユーザーの過去に完了した ToDo と比較します。そして、ToDo の完了に費やすべき時間・タグ・プロジェクトやエリア情報などの詳細情報を含む「最適化」された ToDo 情報を結果として返します。

たとえば、顧客が「犬の散歩」という ToDo を送信したとします。バックエンドシステムは過去に送信された ToDo の情報を元に「午前 7 時半 犬の散歩 #personal」という補完された ToDo としてレスポンスを返します。このように、過去の類似タスクの完了履歴に基づいて送信された ToDo のスケジュールやプロジェクトを最適化します。

以下は、ユーザーから送信された ToDo をバックエンドシステムに送信し、最適化されたバージョンの ToDo を返す pages/api/optimizeTodo.js の実装です。Next.js API routes を利用しています。レスポンスである optimizedTodo は、元の todo と共に Amplify Libraries を用いて AWS AppSync を通じて書き込まれます。

// pages/api/optimizeTodo.js

import { Amplify, withSSRContext } from "aws-amplify";
import awsExports from "../../src/aws-exports";
import { createTodo } from "../../src/graphql/mutations";

Amplify.configure({ ...awsExports });

export default async (req, res) => {
  const SSR = withSSRContext({ req });
  const { todo } = req.body;

  // Send todo to backend system for processing
  const backendResponse = await fetch(process.env.BACKEND_API_ENDPOINT, {
    method: "POST",
    headers: {
      "Content-Type": "application/json",
      Authorization: `Bearer ${process.env.BACKEND_API_KEY}`,
    },
    body: JSON.stringify({
      todo,
    }),
  });
  const { optimizedTodo } = await backendResponse.json();

  // Write original `todo` and `optimizedTodo` to AppSync using Amplify
  const { data } = await SSR.API.graphql({
    query: createTodo,
    variables: {
      input: {
        todo,
        optimizedTodo,
      },
    },
  });

  res.status(200).json({ result: optimizedTodo });
};

一般的に、API コールはクライアントサイドではなく Next.js API routes から行うことが望ましいとされています。クライアント側で直接 API キーを公開することなく、サーバーサイドで安全に API コールを実現できること・複雑なロジックや API レスポンスの変換ロジックはサーバーサイドで行う方が適しており、これにより複雑なロジックを抽象化できること等のメリットがあります。

まとめ

まとめると、Next.js API routes を使うことで、スタックをシンプルにし、開発を高速化し、最適化された API 利用体験を全て Next.js アプリケーションから提供することができます。

Next.js API routes を使うことで、複雑な別サーバーをスタック内に作ることなく、高速で最適化された API 開発体験が提供されます。開発をスピードアップし、インフラストラクチャのニーズを削減すると共に、Next.js におけるプロダクション最適化であるバンドル・コード最小化・プリレンダリングなどの恩恵をシームレスに統合することができます。

本記事は「Next.js API Routes with AWS Amplify」を翻訳したものです。翻訳はソリューションアーキテクトの高柴元が担当しました。