4. Scriptコンポーネント
変更前ソース
機能概要
外部のJavaScriptの読み込むタイミングを指定します。
機能詳細
<Head>タグにてスクリプトを読み込むこともできますが、読み込むタイミングが不定となり、ページ表示がブロッキングされてパフォーマンスに影響を与える場合があります。
Scriptコンポーネントはスクリプトの読み込みタイミングを明示的に指定することでページのパフォーマンスを最適化できます。
実装方法
「pages/posts/first-post.js」ファイルにScriptコンポーネントに関する部分を実装します。
import Link from 'next/link'; // Linkコンポーネントをインポート
import Head from 'next/head'; // Headコンポーネントをインポート
import Script from 'next/script'; // Scriptコンポーネントをインポート
// ファイル呼び出し時のエントリーポイント
export default function FirstPost() {
return (
// HTMLの範囲を示す何らかのタグが必要。
// 今回は空タグを使用しているが<div>等でもよい
<>
{/* タイトルを追加 */}
<Head>
<title>First Post</title>
</Head>
{/* facebookのスクリプト読み込み */}
<Script
src="https://connect.facebook.net/en_US/sdk.js"
strategy="lazyOnload"
onLoad={() =>
console.log(`script loaded correctly, window.FB has been populated`)
}
/>
<h1>First Post</h1>
<h2>
{/* リンク先をhrefで指定する */}
<Link href="/">
{/* 表示したい文字を<a>タグで囲う */}
<a>Back to home</a>
</Link>
</h2>
</>
);
}
「strategy="lazyOnload"」はブラウザのアイドル時間中に、スクリプトを遅延ロードするという意味です。「onLoad」はスクリプトの読み込みが終了した時に行う処理です。ここではFacebookのスクリプトが読み込まれたことをコンソールに出力します。
動作確認
http://localhost:3000/posts/first-postをブラウザで開いて、ブラウザの開発者コンソールを開きます。以下のようにコンソールに表示されれば成功です。
完成したソース
サンプルサイト
5. レイアウトコンポーネント
変更前ソース
機能概要
複数のページで利用する共通のレイアウトを作ることができます。
機能詳細
ブログやニュースサイトでは1記事ごとのレイアウトは共通化されており、そのような共通化レイアウトを定義します。いわゆるテンプレートみたいなものです。
また、レイアウトコンポーネントのみの機能ではありませんが、Next.jsはページごとに最小のコードが読み込まれるようにコードを自動で分割します。レイアウトで使用するCSSもコード分割の対象となっており、1ページあたりのバンドルサイズが小さくなることでパフォーマンスの最適化が行えます。
実装方法
まず、レイアウトコンポーネントを作ります。
「components」ディレクトリを作り、「layout.js」ファイルを作り、以下のコードを記述します。
// 単純にdivを付け加えるだけのレイアウト
export default function Layout({ children }) {
return <div>{children}</div>;
}
「pages/posts/first-post.js」にレイアウトコンポーネントを適用します。リファクタリングとして、ここまで加えたコメントとScriptコンポーネントは利用しないので消します。
import Link from 'next/link';
import Head from 'next/head';
import Layout from '../../components/layout'; // Layoutコンポーネントをインポート
export default function FirstPost() {
return (
// レイアウトコンポーネントに変更
<Layout>
<Head>
<title>First Post</title>
</Head>
<h1>First Post</h1>
<h2>
<Link href="/">
<a>Back to home</a>
</Link>
</h2>
</Layout>
);
}
ここまではブラウザ上での変化はありません。
CSSを追加します。CSSは「components」ディレクトリに「layout.module.css」を追加します。styled-jsxが組み込まれており、Reaxtコンポーネントに直接CSSを記述することが可能です。
.container {
max-width: 36rem;
padding: 0 1rem;
margin: 3rem auto 6rem;
}
動作確認
http://localhost:3000/posts/first-postをブラウザで開いて、左と上に少し余裕のある表示になったことを確認できます。
完成したソース
サンプルサイト
まとめ
今回は、Next.jsで便利な以下の9の機能のうち「Linkコンポーネント」「Imageコンポーネント」「Headコンポーネント」「Scriptコンポーネント」「レイアウトコンポーネント」の5つを紹介しました。
次回は、残りの4つの機能「グローバル設定」「プリレンダリング」「動的ルート」「サーバーレス機能」を紹介します。
