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

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

　この連載では、現在注目のWebホスティングサービス「Vercel」をご紹介します。前回に引き続き、「Next.js」の便利な9つの機能をご紹介します。今回は、「グローバル設定」「プリレンダリング」「動的ルート」「サーバーレス機能」の4つの機能を紹介します。

はじめに

　前回に引き続き、Next.jsの便利な機能を紹介しながら、簡単なブログを表示するアプリを作成していきます。

　この記事は既になんらかのプログラミング言語やWebフレームワークを学習した経験がある人向けに書いています。サンプルコードを提供しますので、サンプルコードを実際に動かしていただくことでより理解が深まると考えています。

　自身でサンプルコードを動かす時間が無い方向けにも一読するだけで理解ができるように配慮しましたので、ぜひ最後まで読んでいただければと思います。

環境準備

　OSは問いません。Node.jsとVisual Studio Codeを利用しますので、それぞれインストールをします。

Node.jsのインストール

　公式サイトより16.15.1LTS（執筆時点）をダウンロードしてインストールしてください。

Visual Studio Codeのインストール

　公式サイトより1.67.2（執筆時点）をダウンロードしてインストールしてください。

Next.jsの便利な9の機能

　Next.jsはシングルページアプリケーション（SPA）を作るにあたって、React.jsをより便利に利用するためのフレームワークです。

　前回と今回で、Next.jsで便利な以下の9の機能を簡潔に紹介していきます。

1. Linkコンポーネント
2. Imageコンポーネント
3. Headコンポーネント
4. Scriptコンポーネント
5. レイアウトコンポーネント
6. グローバル設定
7. プリレンダリング
8. 動的ルート
9. サーバーレス機能

　今回は、6～9の4つの機能について解説します。

　それぞれの機能ごとに変更前と変更後のソースコード、サンプルサイトを記載しています。皆様のご環境で実際に動かして体験していただくことを想定してしますが、お時間の無い方はそれらを見ていただくだけでも雰囲気がわかっていただけると思います。