WordPress×Next.jsで妥協のない完璧なヘッドレスCMSメディアを作る

WordPress×Next.jsで妥協のない完璧なヘッドレスCMSメディアを作る

01はじめに 02※注意・変更点 03チートシート 04ディレクトリ構造 05Dockerのインストール（※WordPressが既にある人はスキップ）06WordPressの設置（※WordPressが既にある人はスキップ）07WordPressの独自テーマ作成 08WordPress初期設定&プラグインのインストール 09nvm（Node.js）のインストール 10Next.jsアプリ立ち上げ 11GitHubでソースコードを管理する 12VS Codeの便利な拡張機能 13↓ 本格的にNext.js×WordPressはじめます！注意点あり。14Tailwind CSSを導入 15WordPressにGraphQLを導入する 16Next.jsからWordPressのデータを取得する 17.env.localで環境変数を設定する 18constantsでデータをまとめる 19ISR×useSWRでリアルタイムデータ取得をする 20Atomic Designでコンポーネントをまとめる 21記事一覧全データ取得&デザイン「最小&大ざっぱ編」22記事一覧全データ取得&デザイン「詳細編」23<Image>を使う- 画像の表示とその設定 24<Link>を使う 25Layout+Header+Footerを作成する 26記事詳細ページを作成する 27カテゴリーページを作成する 28ページネーションで複数ページにする 29Dynamic Routesを使ってトップ記事一覧とカテゴリー記事一覧のページを共通化させる

Chapter 20無料公開

Atomic Designでコンポーネントをまとめる

2023.02.02に更新