はじめに

自分が仕事で受けるような小規模なWebサイトは、
フルスクラッチでWordPress構築してもオーバースペックなのでは？とかねてから思っていました。
保守性・速度・セキュリティ・コスト面を考えると、
毎回WordPressが最適解ではないような気がするのです。

そこで、Next.js + microCMS（と外部フォーム）で、
WPを使わず軽量でシンプルなサイトを作ってみようと思います。

やりたいこと

• 静的HTML一式を Next.js に載せる
• 「お知らせ」「実績」をmicroCMSで表示
• フォームは外部サービスで代替
今回はまず「静的HTMLをNext.jsに載せる」ところまでをやっていきます。
過去の案件で、WP構築する前の静的状態のものを活用して置き換えていきます。

作業内容

Next.jsプロジェクトの作成

VS Codeのターミナルでコマンドを叩きます。
Node.jsはすでに仕事で入れているので、導入については割愛します。

npx create-next-app client-a-site

ここで、質問がいくつか出てくるのですが、一度回答を間違えました。

✔ Would you like to use React Compiler? … Yes

今回React Compilerを使う予定はなかったのに、誤ってYesにしてしまいました。
一度回答したら戻れないので、Ctrl + Cで戻って、再度プロジェクト作成のコマンドを叩きます。

✔ Would you like to use TypeScript? … Yes
✔ Would you like to use React Compiler? … No
✔ Would you like to use ESLint? … Yes
✔ Would you like to use Tailwind CSS? … No
✔ Would you like to use `src/` directory? … No
✔ Would you like to use App Router? … Yes
✔ Would you like to customize the default import alias? … No

Success! Created client-a-site at /Users/〜/nextjs-challenge/client-a-site

無事にプロジェクトが作成できました。

Local Hostで表示

cd client-a-site

でプロジェクトの場所に移動。

npm run dev

で起動します。

http://localhost:3000

ターミナルに出てきたURLにアクセスします。
Next.jsの初期画面が表示されました。まずは導入完了です。

どこがどうなって表示されているのか

client-a-site/app/page.tsx の中身がindex.html的に表示されていることがわかりました。
h1タグの中身の文字を変えてみたら即座に反映されます。

下層のページを表示させるには、client-a-site/app/example/page.tsxとすると、

http://localhost:3000/example/

が表示されてくれます。

共通部分についてはclient-a-site/app/layout.tsxで制御されています。

WPに慣れている脳みそ的には、

page.tsx　＝ front-page.php
example/page.tsx　＝　page.php
layout.tsx　＝　header.php、footer.php

に近い理解となりました。

次回、静的HTMLをそのままNext.jsに置き換えてみます。