はじめに
自分が仕事で受けるような小規模な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に置き換えてみます。