技術系約2分で読めます
ポートフォリオサイトをヘッドレスWordPress + Next.jsでリニューアルしました
公開 更新
このサイトはWordPress(ヘッドレスCMS) + WPGraphQL + Next.js(App Router)という構成で作り直しました。管理画面で書いた記事や実績データを、GraphQL経由でNext.jsのフロントエンドが取得して表示しています。
技術スタック: WordPress / WPGraphQL / ACF / Next.js / TypeScript / Tailwind CSS / Docker
今後、このブログでは制作の記録や学習メモを発信していく予定です。
このサイトを動かしているもの
| 役割 | 使っているもの |
|---|---|
| ドメイン | お名前.com |
| WordPressの設置先 | お名前.com のレンタルサーバー |
| 表示側の配信 | Vercel（無料枠） |
| ソース管理 | GitHub（無料枠） |
表示側を無料枠で賄えるのは、記事を管理する場所と、実際に表示する場所を分けているからです。負荷がかかるのは表示側で、そこは静的に配信されます。
この記事を共有する
関連記事
技術系
Criticalが4件並んだ日にやったこと
朝、通知を見たらCriticalが4件並んでいました。どれも同じ相手、Next.js本体です。 この日にやったことを順に書きます。結論から言うと、上げました。ただ、上げる前にやったことのほうが本題です。 この記事で扱うこ […]
Next.jsセキュリティトラブルシューティング
技術系
印を付けただけでは、探せるようにならなかった
記事一覧のカードには、前から「読了済み」の印を付けていました。 付けた当時は57本でした。いまは110本を超えています。印は役に立たなくなっていました。 この記事で扱うこと 読了の印だけでは足りず、未読だけを出す絞り込み […]
localStorageNext.jsReactUI設計
技術系
崩れる理由が分かるCSS — ボックスモデルと詳細度（第2回）
CSSが効かない原因は詳細度、幅が合わない原因はボックスモデル。この2つを押さえたうえで、FlexboxとGridの使い分けまで進みます。
フロントエンド連載