チュートリアル: JSS Next.jsアプリを静的HTMLファイルにエクスポートし、次回のエクスポートを行う

Version: 22.x

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

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

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

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

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

サーバー側でレンダリングされた (SSR) ページ ( getServerSidePropsを使用)。
増分静的再生成を含むページ。
APIルート。
fallback: true.
国際化されたルーティング。
書き換えを要求します。
訪問者の識別とパーソナライゼーション。
Sitecoreメディアライブラリのエクスポート。メディアライブラリの実行中のコンテンツ配信インスタンスは引き続き必要です。
デフォルトのイメージloadernext/imageコンポーネントによって使用されます。

先端

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

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

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

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

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

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

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

SitecoreサーバーのURLをメディアリクエストの一部として含めます。
RequestResponse
```
 <IncludeServerUrlInMediaUrls>true</IncludeServerUrlInMediaUrls>
```

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

RequestResponse

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

jss deploy configを実行します。
Next.js JSSアプリのルートフォルダーにある .envファイルに、環境変数を追加します。
RequestResponse
```
EXPORT_MODE=true
```

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

RequestResponse

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
      ];
    }
  }),

src/components/Layout.tsxファイルで、EXPORT_MODE環境変数の値を考慮して、<VisitorIdentification /> コンポーネントの使用を更新します。
RequestResponse
```
{!process.env.EXPORT_MODE && <VisitorIdentification />}
```
.envファイルで、PUBLIC_URL変数を定義します。
package.jsonファイルに、次のスクリプトを追加します。
- 基本的なエクスポートスクリプト:
  RequestResponse
  "next:export": "next export"
- ローカルファイルのコンテンツを使用するアプリをエクスポートするためのスクリプト:
  RequestResponse
  "export": "cross-env-shell JSS_MODE=disconnected PORT=3042 EXPORT_MODE=true \"npm-run-all --serial bootstrap next:build next:export\""
  PORT値を切断されたサーバーのポートに置き換えます。
- Sitecoreのコンテンツとデータを使用する接続アプリをエクスポートするためのスクリプト:
  RequestResponse
  "export:connected": "cross-env-shell EXPORT_MODE=true \"npm-run-all --serial bootstrap next:build next:export\""
JSS NextImageコンポーネントまたはnext/imageコンポーネントを使用したコンポーネントまたはファイルで、インスタンスをJSS Imageコンポーネントに置き換えます。 NextImageコンポーネントとnext/imageコンポーネントを使用した画像の最適化は、静的エクスポートではサポートされていません。

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

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

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

JSSアプリケーションのルートディレクトリで、切断されたプロキシを使用してアプリを起動します。
ターミナルのJSS Next.jsアプリのルートディレクトリで、次のスクリプトを実行します。
RequestResponse
```
jss export
```

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

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

先端

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

RequestResponse

npm run export:connected

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

何かフィードバックはありますか?

この記事を改善するための提案がある場合は、