2. Imageコンポーネント
変更前ソース
機能概要
SEOに配慮した最適な画像表示機能を提供します。画像を読み込むときは常にこちらの機能を使うことをおすすめします。
機能詳細
- 指定した画像をViewportに合わせ、リサイズと圧縮
-
ビルド時点ではなくオンデマンドで実行
- 画像が10枚でも1000万枚でもビルド時間は変わりません
- スクロールされるまで遅延読み込み
- Googleが検索ランキングで使用するCoreWebVitalsのCLSに対応
実装方法
画像をこちらからダウンロードしてください。「public」ディレクトリの下に「images」ディレクトリを作成しダウンロードした「profile.jpg」を配置します。
画像を使ったImageコンポーネントについて後程実装しますので、ここでの説明は割愛します。
動作確認
割愛します。
完成したソース
3. Headコンポーネント
変更前ソース
機能概要
タイトルやfaviconなどのメタデータを定義します。
機能詳細
HTMLのhead部をコードで動的に変更するために使います。注意点として、外部のスクリプトを読み込む場合は、直接ここに<script>タグを埋め込まず、後述のScriptコンポーネントを利用するようにしてください。理由についても後述します。
実装方法
「pages/posts/first-post.js」ファイルにHeadコンポーネントに関する部分を実装します。
import Link from 'next/link'; // Linkコンポーネントインポートする
import Head from 'next/head'; // Headコンポーネントをインポート
// ファイル呼び出し時のエントリーポイント
export default function FirstPost() {
return (
// HTMLの範囲を示す何らかのタグが必要。
// 今回は空タグを使用しているが<div>等でもよい
<>
{/* タイトルを追加 */}
<Head>
<title>First Post</title>
</Head>
<h1>First Post</h1>
<h2>
{/* リンク先をhrefで指定する */}
<Link href="/">
{/* 表示したい文字を<a>タグで囲う */}
<a>Back to home</a>
</Link>
</h2>
</>
);
}
動作確認
http://localhost:3000/posts/first-postをブラウザで開いて、タイトルが「First Post」に変更されていることを確認します。
