Next.jsはReactをベースとしたフレームワークで、サーバーサイドレンダリングや静的サイトジェネレーションをサポートしています。最近のNext.jsではApp Routerが導入され、ルーティングの管理が容易になりました。この記事では、Next.js App RouterとVercelを使用して個人用APIを最短公開する方法を紹介します。
Next.js App Routerの概要
Next.js App Routerは、Next.js 13から導入された新しいルーティングシステムです。従来のページベースのルーティングに加えて、App Routerではアプリケーションのルーティングをより柔軟に管理できます。App Routerを使用すると、ルーティングの定義をよりシンプルにし、複雑なルーティングを容易に管理できます。
Vercelの概要
Vercelは、Next.jsアプリケーションのデプロイを容易にするプラットフォームです。Vercelを使用すると、Next.jsアプリケーションを簡単にデプロイし、自動的に最適化されて、高速で安定したパフォーマンスを実現できます。
Next.js App RouterとVercelを使用したAPI公開
ここでは、Next.js App RouterとVercelを使用して個人用APIを最短公開する手順を紹介します。
Step 1: Next.jsプロジェクトの作成
Next.jsプロジェクトを作成するには、以下のコマンドを実行します。
npx create-next-app my-app
Step 2: App Routerの設定
Next.jsプロジェクトでApp Routerを使用するには、appディレクトリを作成し、app/layout.jsファイルを追加します。
// app/layout.js
import { html } from 'next/dist/compiled/@edge-runtime/primitives/html';
export default function RootLayout({ children }) {
return (
<html>
<head>
<title>My App</title>
</head>
<body>{children}</body>
</html>
);
}
Step 3: APIエンドポイントの作成
APIエンドポイントを作成するには、app/apiディレクトリを作成し、app/api/hello.jsファイルを追加します。
// app/api/hello.js
import { NextApiRequest, NextApiResponse } from 'next';
export default async function handler(req: NextApiRequest, res: NextApiResponse) {
res.status(200).json({ message: 'Hello, World!' });
}
Step 4: Vercelへのデプロイ
Vercelへのデプロイは、以下のコマンドを実行することで行います。
vercel
これで、Next.js App RouterとVercelを使用して個人用APIを最短公開することができました。