Faust.jsでヘッドレスWordPressサイトを作成する方法（9ステップ）

WordPressをヘッドレスで実行する必要がある場合は、高品質のフレームワークが必須です。 ただし、最新のフレームワークの助けを少し借りても、コンテンツを効果的にプレビューするのに苦労する場合があります。

そこでFaust.jsが登場します。この新しいフレームワークはNext.jsとReactのパワーを活用し、これを便利なポストプレビュー機能と組み合わせています。 Faust.jsを使用すると、従来のWordPress Webサイトとまったく同じように、[公開]をクリックする前にコンテンツを表示できます。

この記事では、次のヘッドレスWordPressプロジェクトにFaust.jsを使用する理由を探ります。 次に、この新しいフレームワークをセットアップして、単純なフロントエンドを構築する方法を示します。 始めましょう！

ヘッドレスWordPressサイトを運営したい理由

典型的なコンテンツ管理システム（CMS）はフロントエンドとバックエンドで構成されており、WordPressも例外ではありません。 ただし、WordPressをヘッドレスで実行することは可能です。

「ヘッド」はプレゼンテーション層を指し、「ボディ」はコンテンツが保存および作成される場所です。 フロントエンド（ヘッド）をバックエンド（ボディ）から削除することで、WordPressをヘッドレスで実行できます。

ヘッドレスプロジェクトでは、使い慣れたWordPressダッシュボードとツールを引き続き使用します。 ただし、WordPressの通常の制約に関係なく、独自のフロントエンドを自由に設計できます。 これにより、コンテンツの表示方法を完全に制御できます。

独自のフロントエンドを作成することはエキサイティングな見通しかもしれませんが、それは特に簡単ではありません。 幸いなことに、あなたのために重い物を持ち上げることの多くを実行することができるツールがあります。

多くのヘッドレスCMSユーザーは、Frontity、Gatsbyフレームワーク、ReactベースのNext.jsなどのツールの助けを借りることを選択します。 ただし、従来は、フレームワークを使用している場合でも、ヘッドレスサイトで投稿やページをプレビューすることは困難でした。 そこでFaust.jsが登場します。

このフレームワークはNext.jsとReactの上に構築されており、従来のWordPressと一貫性のあるパブリッシングエクスペリエンスの提供に努めています。 これを実現するために、Faust.jsはシームレスなコンテンツプレビューを提供します。

Faust.jsもGraphQLクライアントを使用します。 これにより、事前にGraphQLクエリを知らなくても、WordPressWPGraphQLAPIをクエリできます。

さらに、Faust.jsは、WordPressバックエンドを認証するための組み込みメカニズムを提供します。 これにより、ヘッドレスCMSを使用してゲートコンテンツとeコマースサイトを簡単に構築できます。

Faust.jsでヘッドレスWordPressサイトを作成する方法（9ステップ）

Faust.jsとは何か、およびその主な利点のいくつかについて説明したので、このフレームワークを開始する方法を見てみましょう。 Faust.jsを使用してヘッドレスCMSを9つのステップで作成する方法は次のとおりです。

ステップ1：開発環境を準備する

始める前に、Node.jsとNode Package Manager（NPM）をインストールする必要があります。 また、WordPressのインストールも必要です。これは、ローカルまたはWebサーバーでホストできます。

また、いくつかのWordPressプラグインを使用します。 まず、WPGraphQLプラグインはWordPressをGraphQL APIに変換し、プロジェクトで使用できるようにします。

WPEヘッドレスも必要です。 このプラグインは、WordPressがヘッドレスCMSとして正しく機能することを保証するのに役立ついくつかの追加機能を提供します。 このプラグインの最新バージョンをダウンロードして、WordPressダッシュボードにアップロードできます。

Faust.jsフレームワークの使用を開始するために、create-next-appスタータープロジェクトを使用します。 これにより、必要なすべての構成とファイルが既に配置されたブートストラップされたNext.jsアプリケーションが生成されます。 その後、これをヘッドレスFaust.jsプロジェクトの基礎として使用できます。

NPMにバンドルされているnpxツールを使用してcreate-next-appをインストールできます。 ローカルのターミナルまたはコマンドプロンプトウィンドウで、次のコマンドを実行します。

 npx create-next-app faust-headless-demo

これにより、コンピュータのローカルユーザーディレクトリにfaust-headless-demoプロジェクトが作成されます。 このプロセスが完了すると、ターミナルは次のコマンドを使用してNext.jsアプリケーションを開始するように求めるプロンプトを表示します。

 cd faust-headless-demo npm run dev

おめでとうございます– Next.jsプロジェクトが正常に作成されました！ このアプリケーションを確認するには、ブラウザで「http：// localhost：3000」にアクセスしてください。

Next.jsスターターサイトが表示されます。 エラーメッセージが表示された場合は、 npm run devコマンドを再実行してみてください。これにより、問題が解決する場合があります。

ステップ2：TypeScriptを設定する

Faust.jsは、コンパイル時の型チェックを追加するJavaScriptの型付きスーパーセットであるTypeScriptを使用します。 これにより、実行時まで待つのではなく、コンパイル時にエラーをキャッチできます。 TypeScriptをインストールするには、ターミナルで次のコマンドを実行します。

 npm install --save-dev @types/react npm install typescript --save-dev

次に、 tsconfig.jsonファイルを生成する必要があります。 このファイルは、プロジェクトの実行に必要なコンパイラオプションを指定します。

 npx tsc --init

TypeScriptを設定したら、いくつかのJavaScriptファイルをTypeScript形式に変換する必要があります。 ローカルのUsersディレクトリに移動します。このディレクトリには、新しいfaust-headless-demoディレクトリが含まれている必要があります。

faust-headless-demo内で、 pagesディレクトリを開きます。 これで、 _app.jsファイルの名前を_app.tsxに変更し、その内容を次のように置き換えることができます。

 import '../styles/globals.css'; import type { AppProps /*, AppContext */ } from 'next/app'; function MyApp({ Component, pageProps }: AppProps) { return <Component {...pageProps} />; } export default MyApp;

次に、 pages/index.jsの名前をpages/index.tsxに変更します。 これで、Next.jsアプリがTypeScript用に適切に構成されました。

ステップ3：再利用可能なReactコンポーネントを作成する

この時点で、ダミーコンテンツを表示して、プロジェクトをテストできます。 ローカルページディレクトリに、 posts.tsxファイルを作成します。

このファイルには、テキストを入力します。 次のコンテンツがブラウザに表示される場合は、Next.jsアプリケーションが正しく構成されていることがわかります。

 export default function PostsPage() { return <h1>The posts page</h1>; }

ブラウザで、「http：// localhost：3000/posts」に移動します。 これで、次のダミーコンテンツが表示されます。

セットアップを確認したら、次のステップは基本的なReactコンポーネントを作成することです。 最終的には、このコンポーネントを使用して、すべてのWordPress投稿のリストを表示します。

すべてのReactコンポーネントを専用ディレクトリに追加することをお勧めします。 これを念頭に置いて、プロジェクトのルートに移動し、コンポーネントフォルダーを作成します。

このディレクトリ内に、 post.tsxファイルを作成します。 Reactコンポーネントは、コンポーネントの小道具を介して親コンポーネントからデータを受け取ることができます。 この例では、各投稿のタイトルとコンテンツを投稿コンポーネントに渡します。

TypeScriptでは、渡すデータをマップするためのインターフェイスを作成することでこれを実現できます。 あなたのposts.tsxファイルの中に、以下を追加してください：

 export interface PostProps { title: string; content: string; } export default function Post(props: PostProps) { const { title, content } = props; return ( <article> <h1>{title}</h1> <p>{content}</p> </article> ); }

これで、再利用可能なReactコンポーネントができました。 次のステップは、投稿ページでこのコンポーネントを使用することです。

ステップ4：投稿のリストを表示する

開始するには、 pages/posts.tsxファイルを開きます。 この時点で、リスト形式で表示する偽のデータを提供するだけです。

 import Post from '../components/post'; const posts = [ { id: 1, title: 'Lorem ipsum.', content: 'nteger porttitor, dui id dapibus euismod, lacus felis tincidunt ante, sit amet eleifend metus enim in orci. Vivamus tincidunt eleifend leo, at scelerisque lacus viverra ac.', }, { id: 2, title: 'Lorem ipsum.', content: 'In lacinia ipsum et lorem varius, eu porttitor eros porttitor. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.', }, ]; export default function PostsPage() { return <h1>My posts page</h1>; }

投稿配列をループすることで、投稿のリストを作成できます。 これには、アイテムごとにPostコンポーネントをレンダリングする必要があります。

 import Post from '../components/post'; const posts = [ { id: 1, title: 'Lorem ipsum.', content: 'nteger porttitor, dui id dapibus euismod....', }, { id: 2, title: 'Lorem ipsum.', content: 'In lacinia ipsum et lorem varius, eu porttitor eros porttitor...', }, ]; export default function PostsPage() { return ( <div> <h1>My posts</h1> {posts.map((post) => ( <Post key={post.id} title={post.title} content={post.content} /> ))} </div> ); }

変更を保存して、このファイルを閉じます。 次に、「http：// localhost：3000/posts」に移動します。

このタブには、偽の投稿のリストが表示されます。 Faust.jsをWordPressバックエンドに接続したら、このReactコンポーネントを使用して、Webサイトの実際の投稿のリストを表示します。

ステップ5：Faust.jsフレームワークを構成する

これで、Faust.jsフレームワークをセットアップする準備が整いました。 開始するには、次のコマンドを実行して、本番および開発の依存関係をインストールします。

 npm install --save-prod @faustjs/core @faustjs/next npm install --save-dev @gqty/cli dotenv

次に、プロジェクトのルートディレクトリに移動します。 このフォルダー内に、新しいfaust.config.jsファイルを作成します。

このファイルを使用して、Faust.jsをWordPressバックエンドに接続します。 これで、次のコードを入力できます。

 import { config as coreConfig } from '@faustjs/core'; if (!process.env.NEXT_PUBLIC_WORDPRESS_URL) { console.error( 'You must provide a NEXT_PUBLIC_WORDPRESS_URL environment variable, did you forget to load your .env.local file?', ); } /** * @type {import("@faustjs/core").Config} */ export default coreConfig({ wpUrl: process.env.NEXT_PUBLIC_WORDPRESS_URL, apiClientSecret: process.env.WP_HEADLESS_SECRET, });

このディレクトリ内に、 .env.localファイルも作成する必要があります。 これにより、すべての環境変数が保持されます。

.env.local内に、次のコードを追加します。 必ず自分のサイトを自分のURLに置き換えてください。

 NEXT_PUBLIC_WORDPRESS_URL=http://your-site.com WP_HEADLESS_SECRET=YOUR_PLUGIN_SECRET

また、 YOUR_PLUGIN_SECRETをサイトのヘッドレスシークレットに置き換える必要があります。 この情報は、WordPressダッシュボードの[設定]>[ヘッドレス]に移動して見つけることができます。

Faust.jsは、このヘッドレスシークレットを使用して、WordPressへのリクエストを認証します。 これにより、フロントエンドでドラフトコンテンツをプレビューできます。

ステップ6：Faust.js用にGraphQLクライアントを構成する

Faust.jsは、GraphQLクライアントとしてGQtyを使用します。 GQtyを構成するには、プロジェクトのルートディレクトリにgqty.config.jsファイルを作成します。

これで、このファイルを開いて編集できます。 gqty.config.js内で、以下をコピーして貼り付けます。

 require('dotenv').config(); /** * @type {import("@gqty/cli").GQtyConfig} */ const config = { react: false, scalarTypes: { DateTime: 'string' }, introspection: { endpoint: `${process.env.NEXT_PUBLIC_WORDPRESS_URL}/graphql`, headers: {}, }, destination: './client/index.ts', subscriptions: false, javascriptOutput: false, }; console.log(`Using "${config.introspection.endpoint}" to generate schema...`); module.exports = config;

次のステップは、GQtyクライアントを作成することです。これを使用して、Webサイトのデータを照会します。 プロジェクトのルートに、新しいクライアントディレクトリを作成します。 このフォルダー内に、次のコードを含むindex.tsファイルを作成します。

 import type { IncomingMessage } from 'http'; import { getClient } from '@faustjs/next'; import { generatedSchema, scalarsEnumsHash, GeneratedSchema, SchemaObjectTypes, SchemaObjectTypesNames, } from './schema.generated'; export const client = getClient< GeneratedSchema, SchemaObjectTypesNames, SchemaObjectTypes >({ schema: generatedSchema, scalarsEnumsHash, }); export function serverClient(req: IncomingMessage) { return getClient<GeneratedSchema, SchemaObjectTypesNames, SchemaObjectTypes>({ schema: generatedSchema, scalarsEnumsHash, context: req, }); } export * from './schema.generated';

これで、変更を保存して、 index.tsファイルを閉じることができます。 すべての要素が揃ったので、GraphQLスキーマを生成する準備が整いました。

ステップ7：生成スクリプトを実行する

次のステップは、 package.jsonファイルに生成スクリプトを追加することです。 このスクリプトは、WordPressサイトの構造に基づいて必要なスキーマを生成します。

このスクリプトを追加するには、プロジェクトのルートフォルダーに移動し、 package.jsonファイルを開きます。 これで、生成スクリプトを最初のコードブロックに追加できます。

 { "name": "fause-headless-demo", "version": "0.1.0", "private": true, "scripts": { "dev": "next dev", "build": "next build", "start": "next start", //Add the following// "generate": "gqty generate" },

このスクリプトを実行する前に、Webサイトのパブリックイントロスペクションを一時的に有効にする必要があります。 WordPressダッシュボードで、 [GraphQL]>[設定]に移動します。 次に、[パブリックイントロスペクションを有効にする]までスクロールし、付随するチェックボックスを選択します。

[変更を保存]をクリックします。 これで、ターミナルに次のコマンドを入力して、生成スクリプトを実行できます。

 npm run generate

このスクリプトは、 client/schema.generated.tsファイルを作成します。 この時点で、WordPressダッシュボード内でパブリックイントロスペクションを無効にできます。

ステップ8：FaustProviderコンポーネントとフックを定義する

次に、組み込みの<FaustProvider>コンポーネントを使用してNext.jsアプリケーションをラップする必要があります。 このReactHigher-Orderコンポーネントは、Faust.jsにデータのフェッチとキャッシュに必要なコンテキストを提供します。

これを実現するには、プロジェクトのpages/_app.tsxファイルを開きます。 その後、その内容を次のように置き換えることができます。

 import '../faust.config'; import '../styles/globals.css'; import type { AppProps /*, AppContext */ } from 'next/app'; import { FaustProvider } from '@faustjs/next'; import { client } from '../client'; function MyApp({ Component, pageProps }: AppProps) { return ( <FaustProvider client={client} pageProps={pageProps}> <Component {...pageProps} /> </FaustProvider> ); } export default MyApp;

これで、WordPressバックエンドからデータをクエリする準備が整いました。 ヘッドレスWordPressAPIから投稿のリストを取得する標準インターフェースを提供するusePostsフックを使用します。

pages / posts.tsxディレクトリを開き、定型文のLoremLipsumコードをすべて削除します。 次に、 usePostsフックを実装できます。

 import { client } from '../client'; import Post from '../components/post'; export default function PostsPage() { const { usePosts } = client; const posts = usePosts()?.nodes; return ( <div> <h1>My posts</h1> {posts.map((post) => ( <Post key={post.id} title={post.title} content={post.content} /> ))} </div> ); }

生成したスキーマファイルはPostタイプをエクスポートします。 これは、このタイプを使用してPostコンポーネントの小道具を定義できることを意味します。 Postpropを受け入れるには、 components / post.tsxファイルを開き、以下を追加します。

 import { Post as PostType } from '../client'; export interface PostProps { post: PostType; } export default function Post(props: PostProps) { const { post } = props; return ( <article> <h1>{post.title()}</h1> <div dangerouslySetInnerHTML={{ __html: post.content() }} /> </article> ); }

レンダリングされたコンテンツを受信するか、生のコンテンツを受信するかを指定できます。 上記のコードでは、レンダリングされたコンテンツを選択しています。

ステップ9：Faust.jsをWordPressWebサイトに接続する

最後のステップは、データとPostコンポーネントの間にリンクを作成することです。 これには、 posts.tsxファイルに1行のコードを追加する必要があります。

 … .... …. {posts.map((post) => ( //Add the following line// <Post key={post.id} post={post} /> ))} </div> ); }

これらの変更を行った後、ブラウザに「http：// localhost：3000/posts」をロードします。 これで、WordPressWebサイトからのすべての投稿のリストが表示されます。

投稿が表示されない場合は、ターミナルを閉じて実行中のプロセスを終了してください。 次に、新しいウィンドウを開き、ディレクトリの変更コマンドを使用して、ターミナルがローカルのFaust.jsプロジェクトを指すようにします（例： cd / Users / username / faust-headless-demo ）。 次に、開発サーバーを起動して（ npm run dev ）、「http：// localhost：3000/posts」ページを更新してみてください。

結論

多くのヘッドレスWordPress開発者は、フレームワークを使用することを選択します。 ただし、コンテンツをプレビューするときは、多くのフレームワークにより、外部サイトにログインするか、フレーム内のプレビューページを表示する必要があります。

Faust.jsは、一貫性のあるシームレスなプレビューエクスペリエンスを提供することを目指しています。 このフレームワークを設定すると、使い慣れたWordPressワークフローを使用してコンテンツを表示できるようになります。 また、おなじみのReactおよびNode.jsツールセットにもアクセスできます。

Faust.jsフレームワークについて質問がありますか？ 以下のコメントセクションでお知らせください。