はじめに
最近のフロント開発では、Next.js の App Router と Vercel の組み合わせが定番です。
この記事では、プログラミング初心者でも数分で「自分だけの API」を作り、Vercel に公開する手順を解説します。
※本稿は概念と実装例にフォーカスし、購入や外部リンクへの誘導は行いません。
1. プロジェクトの作成
まずは Node.js がインストールされたローカル環境で、Next.js のテンプレートを作ります。
# npm がインストールされている前提
npx create-next-app@latest my-api --typescript --app
cd my-api
--app オプションで App Router が有効な構成が生成されます。my-api ディレクトリがプロジェクトのルートです。
2. API エンドポイントを作る
app/api/hello/route.ts を作成し、シンプルな JSON を返すハンドラを書きます。
// app/api/hello/route.ts
import { NextResponse } from 'next/server'
export async function GET(request: Request) {
// クエリパラメータ例: /api/hello?name=ChatGPT
const { searchParams } = new URL(request.url)
const name = searchParams.get('name') ?? 'World'
return NextResponse.json({ message: `Hello, ${name}!` })
}
GET 関数だけを書けば、/api/hello への GET リクエストで { "message": "Hello, …" } が返ります。
TypeScript が型情報を提供してくれるので、初心者でも安全にコーディングできます。
3. ローカルで確認
npm run dev
ブラウザで http://localhost:3000/api/hello?name=Qiita にアクセスすると、以下のように表示されます。
{
"message": "Hello, Qiita!"
}
4. Vercel へデプロイ
4.1 Vercel アカウント作成 & Git リポジトリ
- GitHub（または GitLab）にリポジトリを作成し、
my-apiディレクトリをプッシュします。 - Vercel のダッシュボードで「New Project」→「Import Git Repository」を選び、先ほどのリポジトリを指定します。
4.2 デプロイ設定はデフォルトで OK
Vercel は Next.js を自動検出し、ビルドコマンド npm run build、出力ディレクトリ . を使用します。
特別な設定は不要です。そのまま「Deploy」ボタンを押すだけで、数十秒で公開 URL が発行されます。
5. CI/CD（GitHub Actions）で自動デプロイ
手動デプロイに慣れたら、GitHub Actions でプッシュ時に自動デプロイさせましょう。.github/workflows/deploy.yml を作成します。
name: Deploy to Vercel
on:
push:
branches: [ main ]
jobs:
deploy:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v3
- name: Install dependencies
run: npm ci
- name: Build
run: npm run build
- name: Deploy
uses: amondnet/vercel-action@v20
with:
vercel-token: ${{ secrets.VERCEL_TOKEN }}
vercel-org-id: ${{ secrets.VERCEL_ORG_ID }}
vercel-project-id: ${{ secrets.VERCEL_PROJECT_ID }}
working-directory: .
GitHub のシークレットに Vercel のトークンとプロジェクト情報を登録すれば、main ブランチへプッシュするたびに自動で最新の API がデプロイされます。
6. まとめ
- Next.js App Router で API をファイルベースに定義でき、TypeScript が自然に活きます。
- Vercel は設定不要で即座にデプロイでき、GitHub Actions と組み合わせると CI/CD が完成します。
- 初心者でも数分で動くエンドポイントが作れるので、プロトタイプや学習用に最適です。