Kobashi ロゴ

ニュース詳細detail_idだお

Next.js 16.4 + WordPress「Hikari2」公開
 Next.js 16.4 + WordPress「Hikari2」公開

Hikari2
https://hikari2.kanata-tokyo.jp/

このサイトはサンプルサイトです。
Next.js 16.4 + ヘッドレスCMSにワードプレスを使用しています。 ホスティングはVecelです。

Next.jsでは、16.4推奨ののcache componentsを採用、
revalidatePath、revalidateTagとwebhookで最新の記事の公開を即時反映で再検証、
そしてキャッシュで効率的且つ高速を追及しています。
ワードプレスはヘッドレスなのでプラグインは1~2個程度で保守に不安はありません。

因みに前回のサンプルサイトHikariはNext.js + microcmsですが、
今回のヘッドレスCMSにワードプレスで更にNext.js、Reactの理解は深まりました。

裏テーマはKanataと同じ、問い合わせフォーム入力から送信でも途切れる事がなく
快適にページ遷移ができるるシームレスな音楽プレイヤーです。(Kanataは、Astro + microcms)
ワードプレスでもbarba.jsを取り入れればシームレスの設置は出来ますが、
音の途切れや管理が複雑など不安が残るところなので、
この点はJSのフレームワークの強みとかなと思います。

デザインに関してはシンプルで、
構造もページネーションなど最低限の設置です。ある程度十分な機能のみです。

使用している写真はすべて自分で撮ったもので、Canonのミラーレス一眼APS-Cを使用しています。
フォトショップなどでの加工は一切していません。
いいカメラ欲しいな~。

AIはポイントポイントで複雑なコンポーネント内部に結構使っています。
ただ自分の学んできた知識よりも、大幅に背伸びした事は危険なのでしていません。
AIの使い方はそれが信条の一つにあります。したがってReactのフックやNextのApp Router、
それこそCache,Propsなどは全て基本知識として持っています。当たり前ですが。

音楽は制作時期によく聴いていた曲を選択しています。
ちなみにこのサイトは全てノートパソコンで作成しました。いい環境で制作したいな〜。

10/26

下記、今回使用した画像(すべてCanon ミラーレス一眼)















前の記事はありません | 次の記事