---
title: "攻略:JSS Next.jsアプリを静的なHTMLファイルにエクスポートする"
slug: "walkthrough--export-a-jss-next-js-app-to-static-html-files-with-next-export"
abstract: "JSS Next.jsアプリを静的ファイルのエクスポートとHTMLファイルとして生成できるようにしてください"
---
# 攻略:JSS Next.jsアプリを静的なHTMLファイルにエクスポートする

Next.jsは、静 [的HTMLファイルとしてアプリケーションをエクスポート](https://nextjs.org/docs/advanced-features/static-html-export) し、静的ファイルの提供をサポートするホスティングサービスやコンテンツ配信ネットワークを使えば、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を使用します](https://nextjs.org/docs/advanced-features/automatic-static-optimization)。

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

-   アプリケーションを静的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を使い、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では、<VisitorIdentification /> コンポーネントの使用を更新し、EXPORT\_MODE環境変数の値を考慮します:
    
    {!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\\""
        

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

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

ローカルファイルで定義されたコンテンツとデータを使用する切断された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ディレクトリに配置します。