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

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

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

Chapter 14無料公開

WordPressにGraphQLを導入する

2023.02.02に更新