【その2】静的HTMLサイトを Next.js + microCMS に移行してみる（WP代替検証ログ）

【その1】静的HTMLサイトを Next.js + microCMS に移行してみる（WP代替検証ログ）
の続きです。

作業内容

layout.tsxの中身を書き換える

前回、layout.tsxはWordPressで言うとheader.php・footer.phpに近い役割だということがわかりました。

<header>
〜
</header>

{children}

<footer>
</footer>

となっていて、各page.tsxの部分が{children}の中身に表示されるようなので、
{children}の前にヘッダー、後にフッター的要素を書いていきます。

ところが静的HTMLからコピペしてみると、赤波線出まくり。
お作法に沿って修正していきます。

class=""

classはJavaScriptの予約語だということで使えません。
全部classNameに置き換えます。

❌

<p class="sample">

⭕️

<p className="sample">

brタグ

閉じタグのない要素は全て自己終了タグにする必要があります。
この後改めて出てきますが、imgタグも同様です。

❌

<br>

⭕️

<br />

imgタグ

imgタグはNext.jsのコンポーネントnext/imageを使用して表示させていきます。
layout.tsxの上部に、

import Image from "next/image";

を記述して、コンポーネントを使えるようにしてから、

<img
    src="image/common/logo.jpg"
    alt="ロゴ"
    width="100"
    height="100"
>

を、

<Image
    src="/image/common/logo.jpg"
    alt="ロゴ"
    width={100} /* numberにする */
    height={100}
/>　/* 自己終了 */

に変更します。

また、画像はpublicフォルダ配下に配置する必要があります。
そのため、src には/image/common/logo.jpg のようにルート相対パスを指定します。

を使うことで、画像を適切なサイズで配信してくれたり、
遅延読み込みをやってくれたりと、便利になります。

aタグ

imgタグと同じように、Linkに置き換えていきます。
layout.tsxの上部に、

import Link from "next/link";

を追加して、

<a href="">サンプル</a>

を、

<Link href="">サンプル</Link>

に置き換えます。
外部リンクの場合はaタグのままで問題ないようです。

scriptタグ

フッターの下部に、jQueryのCDNや自前のJSのファイルを置いていましたが、
こちらもお作法に則って置き換えます。

import Script from "next/script";

をlayout.tsx上部に置いてから、

<Script src="https://code.jquery.com/jquery-3.7.1.min.js" strategy="beforeInteractive" />
<Script src="/js/main.js" strategy="afterInteractive" />

に変更。これも自己終了タグですね。
strategy="before/afterInteractive"は読み込み順を制御するものです。

headタグ

本来はmetadataや head.tsxを使うのがNext.js的な正攻法ですが、
Googleフォントや外部CDNのstylesheetはmetadataでは表現できなかったため、
今回はいったんJSX側にを記述しています。
（※このあたりは後で整理予定）

自前のCSSファイルだけは、importで呼び出して使います。

import "../css/destyle.css";
import "../css/style.css";

CSSファイルはプロジェクト直下のcss/フォルダに配置し、layout.tsxからimportして使っています。

ちなみに、いつも静的HTMLを書くときのCSSは、scssをコンパイルしてきていたのですが、
Next.jsの起動と一緒にコンパイルできるように、package.jsonをちょっと書き換えました。

"scripts": {
    "dev": "next dev",
    "sass": "sass --watch sass/style.scss:css/style.css",
    "both": "concurrently \"npm run dev\" \"npm run sass\" "
},

という感じです。

ここまでで、なんとかヘッダーとフッターを表示させることができました。

次回：page.tsxも置き換えていきます。