はじめに
前回はNext.jsアプリケーションをVercelにデプロイする方法や、一緒に活用する利点などを紹介しました。今回から2回にわたって、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をより便利に利用するためのフレームワークです。
今回から2回にわたって、Next.jsで便利な以下の9の機能を簡潔に紹介していきます。
- Linkコンポーネント
- Imageコンポーネント
- Headコンポーネント
- Scriptコンポーネント
- レイアウトコンポーネント
- グローバル設定
- プリレンダリング
- 動的ルート
- サーバーレス機能
今回は、1～5の5つのコンポーネントについて解説します。
それぞれの機能ごとに変更前と変更後のソースコード、サンプルサイトを記載しています。皆様のご環境で実際に動かして体験していただくことを想定してしますが、お時間の無い方はそれらを見ていただくだけでも雰囲気がわかっていただけると思います。
1. Linkコンポーネント
変更前ソース
機能概要
リンクをクリックしたときブラウザをリフレッシュさせることなく遷移することができます。
機能詳細
通常のWebページでは<a>タグを使ってリンク先を定義しますが、クリックするとブラウザ全体を描画しなおしてしまい、ユーザーは表示まで待たされる上にデータの転送量が増えます。この機能を利用するとページ全体を読み込みなおすことなく、差分のみ描画がされます。
実装方法
「pages/posts/first-post.js」を作成し、以下コードを記載します。
// Linkコンポーネントインポートする
import Link from 'next/link';
// ファイル呼び出し時のエントリーポイント
export default function FirstPost() {
return (
// HTMLの範囲を示す何らかのタグが必要。
// 今回は空タグを使用しているが<div>等でもよい
<>
<h1>First Post</h1>
<h2>
{/* リンク先をhrefで指定する */}
<Link href="/">
{/* 表示したい文字を<a>タグで囲う */}
<a>Back to home</a>
</Link>
</h2>
</>
);
}
「pages/index.js」を次のように修正します。
import Head from 'next/head'
import Link from 'next/link'; // 追加
export default function Home() {
return (
<div className="container">
<Head>
<title>Create Next App</title>
<link rel="icon" href="/favicon.ico" />
</Head>
<main>
{/* h1タグのみ修正 */}
<h1 className="title">
{/* HTML中にスペースを明示的に入れて改行したい時は{' '}のように書く */}
Read{' '}
<Link href="/posts/first-post">
<a>this page!</a>
</Link>
</h1>
// …以下省略
動作確認
http://localhost:3000をブラウザで開いて確認します。
