Next.js × WordPress スターター
概要
Next.js と WordPress(WPGraphQL)を組み合わせたオープンソースのスターターキットです。WordPress をヘッドレスCMSとして使い、WPGraphQL 経由でコンテンツを取得して Next.js の静的サイト生成(SSG)機能でビルドします。ブログや固定ページ、投稿一覧、検索機能、RSS、サイトマップなど、公開に必要な基本機能が揃っており、TypeScript ベースでコード品質向上や運用性が考慮されています。Netlify や Vercel などの静的ホスティングにそのままデプロイできる点が魅力です。(約300字)
リポジトリの統計情報
- スター数: 2
- フォーク数: 0
- ウォッチャー数: 2
- コミット数: 30
- ファイル数: 27
- メインの言語: TypeScript
主な特徴
- WPGraphQL を利用して WordPress のコンテンツを GraphQL で取得、静的にビルド
- ブログ/ページ/投稿のルーティング、検索、RSS、サイトマップをサポート
- TypeScript と Next.js を使用したモダンなスタックでパフォーマンスと可読性を両立
- Netlify / Vercel 向けに最適化されたデプロイフロー
技術的なポイント
このスターターはヘッドレス WordPress をフロントエンドのデータソースと見なし、WPGraphQL を介してデータを取得する設計です。Next.js の静的生成(getStaticProps / getStaticPaths)を使って、ビルド時に WordPress の投稿や固定ページをフェッチし、軽量で高速な静的ページを生成します。TypeScript を採用して型安全性を確保しているため、GraphQL スキーマと連携した開発がしやすく、デバッグやリファクタリングの負担が軽減されます。
検索やRSS、サイトマップなどの副次的機能も組み込まれており、SEO 対策やコンテンツ発見性を高める構成です。デプロイ面では、Netlify や Vercel のような静的ホスティングサービスに適した設定が想定されており、CI/CD による自動ビルド・配信が容易です。ESLint や Babel 設定が含まれているため、コード整形・品質管理の導入がスムーズです。WP 側では WPGraphQL プラグインを有効化し、必要に応じてカスタムフィールドやカスタム投稿タイプを GraphQL で公開することで拡張性を持たせられます。結果として、既存の WordPress コンテンツ資産を活かしつつ、モダンなフロントエンドに移行したいプロジェクトに適したベースとなります。(約700字)
プロジェクトの構成
主要なファイルとディレクトリ:
- .all-contributorsrc: file
- .babelrc: file
- .eslintignore: file
- .eslintrc.js: file
- .github: dir
- package.json: file
- tsconfig.json: file
- README.md: file
- src/: dir(pages, components, lib 等を想定)
- public/: dir(静的アセット)
- next.config.js: file
- その他設定ファイルやテンプレートファイル、計27ファイル …他 22 ファイル
まとめ
WordPress のコンテンツを活かして高速でSEOに強い静的サイトを短期間で構築できる実用的なスターターです。(約50字)
リポジトリ情報:
- 名前: NEXT-WORDPRESS
- 説明: Next.js WordPress starter that uses WPGraphQL to build a fast, SEO-friendly static site with blog/pages/posts, search, RSS, and sitemap, ready for Netlify or Vercel.
- スター数: 2
- 言語: TypeScript
- URL: https://github.com/Jacob-A11/NEXT-WORDPRESS
- オーナー: Jacob-A11
- アバター: https://avatars.githubusercontent.com/u/242334228?v=4
READMEの抜粋:
Next.js WordPress Starter
Scaling WordPress with the power of Next.js and the static web!