Next.js JSSアプリでEditingRenderMiddlewareを使ってデフォルトのプロトコルをオーバーライドします

Version:
日本語翻訳に関する免責事項

このページの翻訳はAIによって自動的に行われました。可能な限り正確な翻訳を心掛けていますが、原文と異なる表現や解釈が含まれる場合があります。正確で公式な情報については、必ず英語の原文をご参照ください。

Vercel以外のプラットフォームでNext.js JSSアプリケーションをホストすると、プロトコルの不一致エラーによりExperience Editorとの連携が機能しなくなります。

デフォルトでは、Next.js JSSアプリケーションは環境変数VERCELの値に基づいてHTTPリクエストURLのプロトコルをhttpまたはhttpsに設定します。変数の値がtrueであれば、アプリケーションはリクエストのプロトコルをhttpsに設定します。異なるプラットフォームでアプリケーションをホストする場合、この変数はtrue値を持ちず、アプリケーションはhttpプロトコルを使用します。

アプリケーションはすべての可能な環境・構成・プラットフォームで正しいプロトコルを決定できないため、Next.js SDKは編集レンダリングミドルウェアの設定におけるresolveServerUrlプロパティを使ってデフォルトのプロトコルを上書きすることを可能にします。

デフォルトのプロトコル設定を上書きするには:

  • src/pages/api/editing/render.tsファイルで、既存の編集レンダリングオプションを置き換えhandler。例えば:

    const handler = new EditingRenderMiddleware({ resolveServerUrl: (req: NextApiRequest) => { return `${process.env.VERCEL ? 'https' : process.env.PROD ? 'https' : 'http'}://${req.headers.host}`; }, }).getHandler();

この記事を改善するための提案がある場合は、 お知らせください!