ブログを作りながら学ぶ、Next.jsの便利な4つの機能（グローバル設定、プリレンダリング、動的ルート、サーバーレス）

Vercel＋Next.jsを活用したWebアプリケーション開発入門　第4回

９．サーバーレス機能

変更前ソース

• https://github.com/nnasaki/nextjs-blog/tree/function-8

機能概要

　APIルート機能を使って、サーバーレス関数を簡単に作ることができます。

機能詳細

　APIを別のフレームワークやGitリポジトリで管理することなく、一元管理できますので生産性の向上が見込めます。また、「VercelにNext.jsアプリケーションをデプロイする～Vercel上でNext.jsを動かす利点も紹介」にて記載したとおり、Vercel上でサーバーレス関数のホストをすることが可能です。

実装方法

　「pages/api」ディレクトリを作成し、「hello.js」を作成します。

export default function handler(req, res) {
  res.status(200).json({ text: 'Hello' });
}

動作確認

　http://localhost:3000/api/helloにアクセスすると、以下のように表示されます。

完成したソース

• https://github.com/nnasaki/nextjs-blog/tree/function-9

サンプルサイト

• https://nextjs-blog-git-function-9-nnasaki.vercel.app/api/hello

まとめ

　今回は、Next.jsで便利な以下の9の機能のうち「グローバル設定」「プリレンダリング」「動的ルート」「サーバーレス」の4つを紹介しました。

　次回は大規模サイトにおけるVercel活用方法をご紹介します。