1. JSS Next.jsアプリのデプロイ オプション

チュートリアル: 次回のエクスポートによる静的HTMLファイルへのJSS Next.jsアプリのエクスポート

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

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

Next.jsを使用すると、アプリケーションを静的HTMLファイルとしてエクスポート し、静的ファイルまたはコンテンツ配信ネットワークの提供をサポートするホスティングサービスを使用して、Node.jsサーバーなしで実行できます。

このチュートリアルでは、HTML JSS Next.js Next.jsコマンドnext export.

静的HTMLエクスポートdoes not support:

  • サーバー側でレンダリングされた (SSR) ページ ( getServerSidePropsを使用)。

  • 増分静的再生成を含むページ。

  • APIルート。

  • fallback: true.

  • 国際化されたルーティング。

  • 書き換えを要求します。

  • 訪問者の識別とパーソナライゼーション。

  • Sitecoreメディア ライブラリのエクスポート。メディアライブラリの実行中のContent Deliveryインスタンスは引き続き必要です。

  • デフォルトのイメージloadernext/imageコンポーネントによって使用されます。

先端

一部のページがサーバー側でレンダリングされ、他のページが静的に生成されるハイブリッド アプリケーションを作成している場合、Next.jsはgetStaticPropsを静的なHTMLファイルとして使用するルート/ページを自動的に構築します。

このチュートリアルでは、次の方法について説明します。

  • 静的HTMLエクスポート用にアプリケーションを準備します。

  • アプリケーションをエクスポートします。

静的HTMLエクスポート用のアプリケーションの準備

エクスポート プロセスの一部の制限に対処するには、JSS Next.jsアプリにいくつかの変更を加える必要があります。

アプリケーションを静的HTMLファイルにエクスポートする前に、次のことを行います。

  1. JSS Next.jsアプリのルート ディレクトリで、ファイルsitecore/config/<appname>.configを次のように変更します。

    • SitecoreサーバーのURLをメディア リクエストの一部として含めます。

       <IncludeServerUrlInMediaUrls>true</IncludeServerUrlInMediaUrls>

    • または、<IncludeServerUrlInMediaUrls> 設定パッチを削除します。

       <layoutService>
     <configurations>
         <config name="jss">
             <rendering>
                 <renderingContentsResolver>
                     <IncludeServerUrlInMediaUrls>false</IncludeServerUrlInMediaUrls>
                 </renderingContentsResolver>
             </rendering>
         </config>
     </configurations>
 </layoutService>

  2. jss deploy configを実行します。

  3. Next.js JSSアプリのルート フォルダーの .envファイルに、環境変数を追加します。

    EXPORT_MODE=true

  4. next.config.jsファイルで、環境変数EXPORT_MODEを使用して、EXPORT_MODEがfalseに設定されている場合のみ、i18nオプションとrewritesオプションを使用するようにNext.jsに指示します。

    i18n: !process.env.EXPORT_MODE && {
    // These are all the locales you want to support in your application.
    // These should generally match (or at least be a subset of) those in Sitecore.
    locales: ['en', 'da-DK'],
    // This is the locale that will be used when visiting a non-locale
    // prefixed path e.g. `/styleguide`.
    defaultLocale: packageConfig.language,
  },
rewrites: !process.env.EXPORT_MODE && (async () => {
    if (isDisconnected) {
      // When disconnected we proxy to the local faux layout service host, see scripts/disconnected-mode-server.js
      return [
      // rewrite rules
      ];
    }
  }),

  5. src/components/Layout.tsxファイルで、EXPORT_MODE環境変数の値を考慮して、<VisitorIdentification /> コンポーネントの使用を更新します。

    {!process.env.EXPORT_MODE && <VisitorIdentification />}

  6. .envファイルで、PUBLIC_URL変数を定義します。

  7. package.jsonファイルに、次のスクリプトを追加します。

    • 基本的なエクスポート スクリプト:

      "next:export": "next export"

    • ローカル ファイルのコンテンツを使用するアプリをエクスポートするためのスクリプト:

      "export": "cross-env-shell JSS_MODE=disconnected PORT=3042 EXPORT_MODE=true \"npm-run-all --serial bootstrap next:build next:export\""

      PORT値を切断されたサーバーのポートに置き換えます。

    • Sitecoreのコンテンツとデータを使用する接続済みアプリをエクスポートするためのスクリプト:

      "export:connected": "cross-env-shell EXPORT_MODE=true \"npm-run-all --serial bootstrap next:build next:export\""

  8. JSS NextImageコンポーネントまたはnext/imageコンポーネントを使用していた任意のコンポーネントまたはファイルで、インスタンスをJSS Imageコンポーネントに置き換えます。 NextImageコンポーネントとnext/imageコンポーネントを使用した画像の最適化は、静的エクスポートではサポートされていません。

アプリケーションのエクスポート

アプリケーションを静的HTMLファイルにエクスポートするには、package.jsonファイルでこの目的に定義されているスクリプトの1つを使用します。

ローカルファイルで定義されたコンテンツとデータを使用する切断されたJSS Next.jsアプリケーションをエクスポートするには:

  1. JSSアプリケーションのルート ディレクトリで、切断されたプロキシを使用してアプリを起動します。

  2. ターミナルで、JSS Next.jsアプリのルート ディレクトリで、次のスクリプトを実行します。

    jss export

Sitecoreに接続されているJSS Next.jsアプリケーションをエクスポートするには、次の手順に従います。

  • ターミナルで、JSS Next.jsアプリのルート ディレクトリで、次のスクリプトを実行します。

    jss export:connected
先端

CI/CDのコンテキストでは、これらのスクリプトをjssの代わりにnpmを使用して実行できます。例えば：

npm run export:connected

エクスポート スクリプトは、結果のファイルをoutディレクトリに配置します。

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