FaustJSのプレビュー機能をセットアップ中にハマったので、やったことをまとめました。

起きたこと

ドキュメントを参考に、プレビュー機能をセットアップしました。

https://faustjs.org/docs/next/guides/post-page-previews

が、WordPress管理画面からプレビューに遷移した時のURLが想定と異なるものでした。

• 想定していたもの: https://example.com/preview?xxxx
• 実際のURL: https://example.com/post-name/?preview=true&xxx

Next.js側で、個別記事ページを表示するために/pages/[slug].tsxを利用しています。

そのため、このURLではプレビュー用のファイル/pages/preview.tsxではなく/pages/[slug].tsxでリクエストが処理されていました。

考えられる原因

コードをざっと追いかけたのですが、FaustJSや関連プラグインの挙動ではなさそうでした。

パーマリンクの設定を/%postname%/にしていることで、WP APIまわりの実装時にハマることがありましたので、今回もこれが原因かなと思っています。

対応: プレビューのURLをフックで書き換える

個人で運用しているサイトなので、プレビューのURLを差し替えてしまうことにしました。

プレビューのURLをWordPress側で変更する

以下のコードをプラグインとして実装し、https://example.com/preview/post-name?xxxがプレビューURLになるようにしました。

add_filter( 'preview_post_link', function( $link, $post ) {
    $post_name = $post->post_name;
    if ( preg_match( '/\/preview\//', $link ) ) {
        return $link;
    }

    // For new post
    if ( ! $post_name ) {
        $site_url = get_site_url();
        $new_link = preg_replace( '{' . $site_url . '}',  $site_url . '/preview/new' , $link );
        return $new_link;
    }

    $new_link = preg_replace( '{' . $post_name . '}', 'preview/' . $post_name , $link );
    return $new_link;
}, 10, 2);

Next.js側のプレビューファイルを移動

続いてFaustJSドキュメントにあるPreviewファイルを、以下のパスに変更します。

• 変更前: /pages/preview.tsx
• 変更後: /pages/preview/[slug].tsx

補足

新規記事など、post_nameが存在しない場合のURLを/preview/newにしています。

これはNext.js側でpages/preview/[slug].tsxしか配置していないためです。

もし/previewで遷移させたい場合は、pages/preview/index.tsxも用意しましょう。