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

攻略
Next.jsアプリを静的なHTMLファイルにエクスポートする

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

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

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

このウォークスルーでは、Next.jsコマンドnext exportを使ってJSS Next.jsアプリケーションを静的HTMLファイルに探索するために必要な手順を案内します。

静的HTMLエクスポートは以下をサポートしません:

  • サーバーサイドレンダリング(SSR)ページ( getServerSidePropsを使用)。
  • ページには段階的な静的再生があります。
  • APIルート。
  • fallback: true.のルート。
  • 国際ルーティング。
  • 書き直しを依頼してください。
  • 訪問者の身分証明書。
  • Sitecoreメディアライブラリのエクスポート。メディアライブラリ用の実行中のContent Deliveryインスタンスは依然として必要です。
  • デフォルトの画像loadernext/imageコンポーネントで使われます。

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

このウォークスルーでは、以下の方法を説明します:

  • アプリケーションを静的HTMLエクスポートに備えてください。
  • 申請書をエクスポートしてください。

静的HTMLエクスポートのためにアプリケーションを準備しましょう

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

アプリケーションを静的なHTMLファイルにエクスポートする前に:

  1. JSS Next.jsアプリのルートディレクトリで、ファイルをsitecore/config/.config以下に修正します。

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

      true

    • あるいは、 設定パッチを削除してください:

      false

  2. 走ってjss deploy config。

  3. Next.js JSSアプリのルートフォルダの .envファイルに、環境変数を追加してください:

    EXPORT_MODE=true

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

    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環境変数の値を考慮します:

    {!process.env.EXPORT_MODE && }

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

  7. ファイルpackage.jsonに以下のスクリプトを追加します:

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

      "next

      ": "next export"

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

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

      next
      \""

      PORT値を切断されたサーバーのポートに置き換えてください。

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

      "export

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

アプリケーションをエクスポートする

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

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

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

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

    jss export

Sitecoreに接続されたJSS Next.jsアプリケーションをエクスポートするには:

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

    jss export

!ヒントCI/CDの文脈では、これらのスクリプトはjssの代わりにnpmで実行できます。例えば:

NPM run export

エクスポートスクリプトは、得られたファイルをoutディレクトリに配置します。

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