はじめに
最近のフロント開発では Next.js App Router が標準になり、サーバーサイドロジックをページと同じリポジトリに書けるのが魅力です。さらに Vercel へデプロイすれば、コードをプッシュした瞬間に自動で公開されます。この記事では、プログラミング初心者でも 個人用 API を最短で作り、インターネット上に公開する手順を紹介します。
必要なもの
- GitHub アカウント（リポジトリ作成用）
- Vercel アカウント（無料プランで OK）
- Node.js（最新版）と npm（または yarn）
1. プロジェクト作成
ターミナルで以下を実行し、Next.js（TypeScript）プロジェクトを作ります。
npx create-next-app@latest my-api --ts
cd my-api
my-api ディレクトリが作られ、package.json などの雛形が入ります。
2. App Router で API Route を追加
app ディレクトリ配下に api/hello/route.ts を作成します。
// app/api/hello/route.ts
import { NextResponse } from 'next/server';
export async function GET() {
// 任意のデータを JSON で返すだけのシンプルな API
const data = { message: 'こんにちは、Next.js API です！' };
return NextResponse.json(data);
}
GET ハンドラだけを書けば、/api/hello へアクセスしたときに上記 JSON が返ります。
3. ローカルで動作確認
npm run dev
ブラウザで http://localhost:3000/api/hello にアクセスすると、{ "message": "こんにちは、Next.js API です！" } が表示されます。
4. GitHub にプッシュ
git init
git add .
git commit -m "Initial commit with API route"
git branch -M main
git remote add origin https://github.com/あなたのユーザー名/my-api.git
git push -u origin main
GitHub にリポジトリが作られたら、Vercel 側で自動的にビルドが走ります。
5. Vercel にデプロイ
- Vercel のダッシュボードで New Project を選択
- GitHub のリポジトリ
my-apiをインポート - フレームワークは自動で Next.js が検出されます。
- 「Deploy」ボタンを押すだけで、ビルドが開始し、完了するとプレビュー URL が発行されます。
デプロイ後は https://my-api.vercel.app/api/hello にアクセスすれば、ローカルと同じ JSON が取得できます。
6. 変更を加えて自動デプロイを体感
たとえばメッセージを変えてみましょう。
// app/api/hello/route.ts (変更後)
export async function GET() {
const data = { message: '更新しました！' };
return NextResponse.json(data);
}
ローカルで確認後、コミットしてプッシュすれば Vercel が自動で再デプロイします。数十秒で新しいレスポンスが反映されます。
まとめ
- App Router で API がファイル一つで完結
- Vercel が GitHub と連携し、コード変更を即座に公開
- 初心者でも数ステップで本番レベルのエンドポイントが作れる
これで、個人用の簡易 API が完成です。さらに認証やデータベース連携が必要な場合は、Supabase などの BaaS と組み合わせるとスケールしやすくなります。