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

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

【その1】はこちらです。

作業内容

page.tsxの中身を書き換えてページを表示させる

前回、layout.tsxの中身をlocalhostで表示させるところまで成功しました。
今回はapp/page.tsx（WPで言うとfront-page.phpなど）、ディレクトリ/page.tsxの中身を置き換えて、TOPページと固定ページを表示させます。

Next.jsのお作法で書き換える

HTMLをコピペして、Next.jsの書き方になっていない箇所をlayout.tsxと同様書き換えていきます。

・className=""
・
（自己終了タグ）
・Image
・Link

ImageとLinkを使うために、

import Image from "next/image";
import Link from "next/link";

をpage.tsxにも記述します。
importは他のファイルには引き継がれないため、使うファイルごとに記述する必要があります。

フラグメントでラップ

ヘッダー・フッターと同じように置き換えたはずなのに、エラーの赤文字が消えません。
これは「returnの中身は単一のルート要素である必要があるため」でした。
sectionとdivが兄弟要素になっていたため、JSXの構文エラーになっていました。

❌
return (
    <section>...</section>
    <div>...</div>
);

そのため、兄弟要素を単一の要素にまとめる必要がありました。

⭕️
return (
    <>
        <section>...</section>
        <div>...</div>
    </>
);

これでエラーが消えました。
「フラグメント」と言うそうです。

これでももちろん⭕️
return (
    <div>
        <section>...</section>
        <div>...</div>
    </div>
);

ちなみに下層ページでは、装飾の都合で全体をdivタグで括っていたため、同じエラーは発生しませんでした。

iframeのエラーを修正

iframeも、HTMLからコピペするだけでは赤字エラーになりました。
Next.jsの書き方に修正します。

❌
<iframe
  src="..."
  style="border:0;"
  allowfullscreen=""
  loading="lazy"
  referrerpolicy="no-referrer-when-downgrade">
</iframe>

⭕️
<iframe
  src="..."
  style={{ border: 0 }}
  allowFullScreen
  loading="lazy"
  referrerPolicy="no-referrer-when-downgrade"
></iframe>

・styleをオブジェクトに
・allowfullscreenとreferrerpolicyをキャメルケースに

これで概ね、ページの中身を表示することができました。

次回：いよいよmicroCMS側の準備に入ります。