Next.jsで簡単にAPIを作成・公開する方法

Next.jsは、Reactベースのフレームワークで、サーバーレンダリングや静的サイト生成など、さまざまな機能を提供しています。Next.jsには、App Routerと呼ばれる機能があり、個人用APIを簡単に作成・公開できます。

Next.js App Routerとは

Next.js App Routerは、Next.jsでAPIルーティングを簡単に設定できる機能です。App Routerを使用すると、APIエンドポイントを作成して、外部からアクセスできるようにすることができます。

Vercelとは

Vercelは、Next.jsアプリを簡単にデプロイできるプラットフォームです。Vercelを使用すると、Next.jsアプリをGitHubリポジトリにプッシュすると自動的にデプロイされます。

Next.js App RouterとVercelで個人用APIを最短公開する

次のコードは、Next.js App RouterとVercelで個人用APIを最短公開する例です。

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

このコードは、/api/helloエンドポイントを作成し、Hello World!というメッセージを返します。

デプロイ方法

Vercelにデプロイするには、次の手順を実行します。

1. GitHubリポジトリを作成し、Next.jsプロジェクトをプッシュします。
2. Vercelアカウントを作成し、GitHubリポジトリを接続します。
3. Vercelのダッシュボードで、デプロイを実行します。

デプロイが完了すると、https://your-app.vercel.app/api/helloにアクセスして、Hello World!というメッセージが返されることを確認できます。

まとめ

Next.js App RouterとVercelを使用すると、個人用APIを簡単に作成・公開することができます。この方法では、Next.jsのApp Router機能を使用してAPIルーティングを設定し、Vercelを使用してデプロイします。

詳しい手順はこちら → https://felixstudio0.gumroad.com/?utm_source=qiita&utm_medium=github_actions&utm_campaign=2026-q1&utm_content=qiita-footer