JSS Next.jsアプリのトラブルシューティング

npm installまたはbuildのステップで予期しないJavaScriptエラー、特に他のチームメンバーが再現できないエラーが発生した場合は、使用されているNodeとnpmのバージョンを確認してください。ターミナルから、次のコマンドを実行します。

node -v
npm -v

JSSはLong Term Support (LTS) versions of Nodeを使用してテストします。これらは通常、最新の公式Nodeバージョンより1つのメジャー バージョンです。

CI/本番環境で使用されるNode/npmのバージョンは、ローカル環境で使用されるバージョンとは異なる場合があります。プロジェクト構成で特定のNode/npmバージョンがpackage.jsonで必要ない場合、デプロイ エージェントは通常、使用可能な最新バージョンまたは環境固有のデフォルト バージョンを使用してビルドされます。

テストのためにローカル環境上の複数のノードバージョンを切り替える必要がある場合は、nやnvmなどのサードパーティパッケージを使用できます。

プライベート署名証明書を使用してローカルのSitecoreインスタンスを使用している場合、次のエラーが発生する可能性があります。

このエラーを解決するには、Sitecore CA証明書をNode.jsに設定します。

インポートロールに適切なアクセス許可がない場合、次のエラーが発生する可能性があります。

IMPORT ERROR(S) OCCURRED!
Exception thrown while importing JSS app
Exception: Sitecore.Exceptions.AccessDeniedException
Message: AddFromTemplate - Add access required

解決策については、「 AzureでJSSアプリケーションをインポートする際のエラー 」を参照してください。

JSS Next.jsアプリの構築とレンダリングは、GraphQLを使用してデータを正常にフェッチできるかどうかにかかっています。ビルドの失敗や、ページをレンダリングできないアプリの最も一般的な原因は、データ取得プロセスの問題です。

GraphQL IDEを <sitecore hostname + graphQL endpoint>/ui?sc_apikey=<api key> 使用して、データ取得プロセスの問題を診断できます。

静的生成機能をサポートするために、Next.js JSSアプリはGraphQLクエリを使用してSitecoreパスを取得します。GraphQL IDEで次のクエリを実行してみてください。

# YOUR_PATH should be the ID of your site root (home page) in lower-case, with dashes removed.
# YOUR_LANGUAGE should be your default language, as defined in package.json

query{
  search(where: {
    AND:[
      {
      name:"_path",
      value:"YOUR_PATH"
      },
      {
      name:"_language",
      value:"YOUR_LANGUAGE"
      },
      {
      name:"_hasLayout",
      value :"true"
      }
    ]
  })
  { 
    total
    results {
        url {
          path
        }
      }
  }"
}

期待どおりの結果が得られない場合は、次の手順を試してください。

HTTPレンダリングエンジンを使用するように設定されたJSSアプリ (Next.jsアプリなど) をエクスペリエンスエディターで初めて開くと、レンダリングホストから 「 The operation has timed out」というメッセージでタイムアウトエラーが発生することがあります。ログには、次の内容が表示される場合があります。

10292 10:51:16 ERROR [JSS] Error occurred during POST to remote rendering host: `http://localhost:3000/api/editing/render`
10292 10:51:16 ERROR The operation has timed out
Exception: System.Net.WebException
Message: The operation has timed out
Source: System
at System.Net.WebClient.UploadDataInternal(Uri address, String method, Byte[] data, WebRequest& request)
at System.Net.WebClient.UploadString(Uri address, String method, String data)
at Sitecore.JavaScriptServices.ViewEngine.Http.RenderEngine.Invoke[T](String moduleName, String functionName, Object[] functionArgs)

この問題を解決するには、\App_Config\Sitecore\JavaScriptServices\Sitecore.JavaScriptServices.ViewEngine.Http.configファイルを編集して、RequestTimeoutMs設定の値を増やします。例えば：

<!-- Specifies the maximum duration, in milliseconds, that your .NET code should wait for requests to the HTTP renderer (e.g. the `EndpointUrl` setting) to respond. -->
<RequestTimeoutMs>10000</RequestTimeoutMs>

Sitecoreエディター ロールで新しいユーザーを作成した後、SitecoreでJSSアプリ アイテムを編集しようとすると、ユーザーに読み取りアクセス権がないという警告が表示される場合があります。

回避策は、System/Workflows/JSS development workflow項目のWorkflow State Writeを手動で設定し、最終的な発行済み状態を編集可能にすることです。これにより、ユーザーはLock and Editオプションを使用して編集用のアイテムの新しいバージョンを作成できます。

SXAとJSSテナントを統合しており、Next.jsアイテムをJSSテナントにデプロイする場合、Next.jsアプリを本番環境モードで起動しようとすると、GraphQLクエリ エラーが発生する可能性があります。

Error: Valid value for rootItemId not provided and failed to auto-resolve app root item.

このエラーは、JSSテナントにデプロイされたNext.jsアプリとNext.jsアプリのアイテムが異なるテンプレートを参照し、クエリが失敗するために発生します。

このエラーを回避するには、GraphQLサービスのインスタンスのrootItemIdを次のように定義します。

GraphQLスキーマが変更された場合は、GraphQLイントロスペクション データを再生成する必要があります。

サンプル アプリでは、jss graphql:updateコマンドを使用してイントロスペクション データを再生成します。

ngrokを使用してローカルSitecoreエンドポイントをVercelに公開している場合は、host-headerフラグを使用していることを確認してください。例えば

ngrok http -host-header=rewrite <your-local-url>

アプリケーションにlocalhostドメインを使用しているときにSitecoreイメージが読み込まれない場合は、Next.jsプロキシ経由でイメージを要求しようとしているため、エラー 500 - Invalid URI: The hostname could not be parsedが発生している可能性があります。

Sitecoreイメージをlocalhostドメインにロードするには、コンテンツ リゾルバーのIncludeServerUrlInMediaUrls属性をtrueに設定して、イメージURLにSitecore URLを含める必要があります。例えば：

<config name="jss">
  <rendering>
     <renderingContentsResolver>
       <IncludeServerUrlInMediaUrls>true</IncludeServerUrlInMediaUrls>
     </renderingContentsResolver>
   </rendering>
 </config>

この設定を行うと、アプリケーションはSitecoreから直接イメージを要求します。