ニュース詳細detail_idだお
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 ミラーレス一眼)




