ライブCMS＆次ライブプレビュー.js

それで、あなたは無関心になりました、しかし、現在内容著者/編集者はそれを保存する前に、彼らの仕事をプレビューするためにあなたを悩ましていますか?
ありがたいことにクラフトとネクスト.JSのライブプレビューが可能であり、すべての多くの努力を必要としないでください.
このチュートリアルでは、クラフト3.4 +を使用して基づいています.JEPS 10 +は、ベルセルでホストされているフロントエンドとGraphical/アポロを使用します.COM .
まず、クラフトセクションを設定する必要があります.あなたのフロントエンドを指すようにプレビューターゲットを設定する必要があります.

クラフトセットアップ

例

この例ではプレビューターゲットを{{alias('@previewBaseUrl')}}?sourceUid={sourceUid}このクラフトのエイリアスにはhttp://example.com/api/previewこれは次のように新しいページを作成する必要があることを意味します./pages/api/preview.js .
The sourceUid 渡されるページはユニークな識別子で、クラフトが使用します.
ユーザーがCMSでプレビューをクリックするとき、ユニークなトークンは、どのクラフトが魔法のようにSourceeuidと組み合わせて現在のドラフトを表示するために使用するかを通過します.
デフォルトでは、このトークンはtoken しかし、設定を使用して変更することができますtokenParamので、我々は次のようにクラフトを設定しました.

次。jsセットアップ

The preview.js ファイルは、次の機能preivewモードとクラフトのライブプレビューをトリガするために使用するものです.
このファイルは次のようになります.

リクエストをキャプチャ

トークンをチェックする

エントリのクエリ

トリガプレビューモード

previewdataで上記のエントリにリダイレクトします

プレビューモードでは、プレビューモードがアクティブであることを次のクッキーに設定します.これをcontext それから、我々は、ライブプレビューの間、著者が見る内容をカスタマイズするために使うことができます.pages/api/preview.js

import { apollo } from '@/config/apollo'
import { ENTRIES_DATA } from '@/gql/entries';

export default async (req, res) => {
    // Check the token and source uid
    if (!req.query.token || !req.query.sourceUid) {
      return res.status(401).json({ message: 'Invalid preview request' })
    }

    // Fetch the headless CMS to check if the provided `uid` exists
    const entry = await apollo(ENTRIES_DATA, { uid: req.query.sourceUid })

    // If the uid doesn't exist prevent preview mode from being enabled
    if (!entry) {
      return res.status(404).json({ message: 'Page not found' })
    }

    // Enable Preview Mode by setting cookies
    res.setPreviewData({
        uid: req.query.sourceUid,
        token: req.query.token
    })

    // Redirect to the path from the fetched entry
    if (entry.data.entry.uri == '__home__') {
        res.redirect("/?uid="+req.query.sourceUid+"&token="+req.query.token)
    } else {
        res.redirect("/" + entry.data.entry.uri + "?uid="+req.query.sourceUid+"&token="+req.query.token)
    }
}

gql/entries.js

import { gql } from '@apollo/client'

export const ENTRIES_DATA = gql`
    query ($uid: [String!]) {
        entry(uid: $uid, limit: 1) {
            title
            uri
            url
            slug
            uid
        }
    }
`;

クラフトCMSの中で、iframeは最初にこのプレビューページを開きます.
今すぐあなたの次を変更します.どのようなコンテンツが表示されるかを決定するためにプレビューモードを使用するJSのページ.pages/page.js

import { apollo } from '@/config/apollo'
import { ENTRY_DATA } from '@/gql/entry';

function Page(props) {
    return (
        <div>
            <h1>{props.data.entry.title}</h1>
            <p>My amazing websites goes here...</p>
        </div>
    )
}

// note this also works with getServerSideProps
export async function getStaticProps(context) {
    if (context.preview && context.previewData.crafttoken) {
        // Preview mode is active, pass appropiate params e.g. uid and token.
        var { data, errors } = await apollo(ENTRY_DATA, { uid: parseInt(context.previewData.sourceId) }, context.previewData.crafttoken)
    } else {
        // No preview mode, return live content.
        var { data, errors } = await apollo(ENTRY_DATA)
    }
    // return a 404 if no page is found
    if (errors.length > 0) return { notFound: true }
    // return page props e.g. page data and preview data (could be useful to have in the template)
    return { props: { data, preview: context.preview ? context.previewData : [] }  }
}

export default Page;

import { gql } from '@apollo/client'

export const ENTRY_DATA = gql`
    query ($slug: [String!], $uid: [String]) {
        entry(section: "pages", slug: $slug, uid: $uid, limit: 1) {
            id
            title
            slug
            ... on pages_page_Entry {
                customFieldGoesHere
            }
        }
    }
`;

上の例では、getServerSideProps プレビューモードがアクティブかどうかをチェックしますuid とtoken アポロを使用したGQLクエリを通して.
それがそうでないならば、我々は単純にちょうどページとしてページを照会します.context.preview これらのクッキーが存在する限り、アクティブになります.クラフトCMSを介してこれらのクッキーをクリアする私のtodoリストです😅. もう1つのオプションは、単に短い寿命を1 - 5分(例えば、PrePreviewDataを介してオプションとしてこれを行うことができます)を与えることです.
そして、それを持っている-ライブプレビューを使用して、静的に次のページを使用して生成されます.js🥳

ボーナス

いくつかの時間を節約するために、私は、私のアポロセットアップを下に掲示します.そして、それは、クラフトGQL APIに接続して、それから質問を実行します.config/apollo.js

import { ApolloClient, InMemoryCache } from '@apollo/client';

async function apollo(gqlQuery, gqlParams, previewToken = false) {
    // setup the Apollo client
    const client = new ApolloClient({
        // if the craft token exists then append it to the URL used to make queries
        // Craft uses this to load draft/revision data
        uri: previewToken ? process.env.NEXT_PUBLIC_CMS_ENDPOINT+"?crafttoken="+previewToken : process.env.NEXT_PUBLIC_CMS_ENDPOINT,
        cache: new InMemoryCache()
    });

    return await client.query({
        // the GQL query
        query: gqlQuery,
        // pass through query params e.g. { slug: "boop", uid: "2dff-344d-dfdd...", token: "..." }
        variables: gqlParams,
        // display errors from GraphQL (useful for debugging)
        errorPolicy: 'all'
    }).then(data => {
        return { 
            // return the data or NULL if no data is returned
            data: (typeof(data.data) != "undefined") ? data.data : null , 
            // return any errors
            errors: (data.errors) ? data.errors : [] 
        }
    });
}

export { apollo }

注意事項
ローカル環境では、ローカルの環境ではHTTPSを使用していない場合があります.最近では多くのブラウザとして、HTTPSを使用していません.これらの日は、安全ではないクッキーが好きではありません.
うまくいけばそれは良い出発点を与え、いくつかの時間とストレスを節約できます.
任意の改善がある場合は、下記のコメントで私に知らせて、私は参照のための記事を更新することができます.