--- title: "JSS Next.jsアプリのトラブルシューティング" slug: "troubleshooting-jss-next-js-apps" abstract: "エラーを避ける方法といくつかの回避策" --- # JSS Next.jsアプリのトラブルシューティング JSSアプリケーションのデバッグを助けるために、[JSSが提供するデバッグログユーティリティの使用](https://doc.sitecore.com/xp/ja/developers/hd/19/sitecore-headless-development/debug-logging-in-jss-apps.html "Debug logging in JSS apps")をお勧めします。 以下の手順を行うことでほとんどのエラーを防ぐことができます: - アプリで使用されるすべての環境変数に値があるか確認してください。サンプルアプリは以下の順序で環境変数を検索します: 1. scjssconfig.json. 2. .env. 3. .env.local (局所環境のみ) - 複数のファイルに同じ変数の定義が含まれている場合、アプリケーションは最後に見つけた値を使用します。 変数名や記述については [サンプル .envファイルを](https://github.com/Sitecore/jss/blob/release/19.0.0/samples/nextjs/.env) ご参照ください。 - [APIキー](https://doc.sitecore.com/xp/ja/developers/hd/19/sitecore-headless-development/create-a-sitecore-services-client-api-key.html "Create a Sitecore services client API key")の設定が正しくできているか確認してください。 - プロジェクトのサイト定義とアプリの定義がSitecore設定で正しいか確認してください。必要なプロパティのリストは [サンプルアプリ設定](https://github.com/Sitecore/jss/blob/release/19.0.0/samples/nextjs/sitecore/config/JssNextWeb.config) を参照してください。 - [JSS編集シークレット](https://doc.sitecore.com/xp/ja/developers/hd/19/sitecore-headless-development/walkthrough--connecting-a-next-js-jss-app-to-sitecore-editors.html "Walkthrough: Connecting a Next.js JSS app to Sitecore editors")を設定しているか確認してください。[Next.jsアプリで使うJSS\_EDITING\_SECRET値は](https://github.com/Sitecore/jss/blob/cb32d3a21b87f488bd4bb5d311d556fd1f8354c4/samples/nextjs/.env#L18)、[Sitecoreインスタンスで使われている値](https://github.com/Sitecore/jss/blob/cb32d3a21b87f488bd4bb5d311d556fd1f8354c4/samples/nextjs/sitecore/config/JssNextWeb.config#L37)と一致しなければなりません。 - GraphQLエンドポイントが[package.json](https://github.com/Sitecore/jss/blob/cb32d3a21b87f488bd4bb5d311d556fd1f8354c4/samples/nextjs/package.json#L12)とアプリの[Sitecore定義](https://github.com/Sitecore/jss/blob/cb32d3a21b87f488bd4bb5d311d556fd1f8354c4/samples/nextjs/sitecore/config/JssNextWeb.config#L72)で正しいか確認してください。ブラウザでGraphiQLインターフェースを開き、設定(/ui?sc\_apikey=)の値を使ってエンドポイントが動作しているか確認してください。 ## サーバーサイドのJavaScriptエラー npm installまたはbuildステップ中に予期せぬJavaScriptエラー、特に他のチームメンバーが再現できないエラーに遭遇した場合は、使用されているNodeとnpmのバージョンを確認してください。ターミナルから実行してください: node -v npm -v 私たちはJSSを長期 *サポート(LTS)バージョンのNode*でテストしています。これらは通常、最新の公式Nodeバージョンより1つ大きな遅れです。 CI/本番環境で使用されるNode/npmバージョンは、ローカル環境で使われているバージョンと異なる場合があります。プロジェクト構成が特定のNode/npmバージョンを必要としない場合、package.json展開エージェントは通常、利用可能な最新のバージョンか環境固有の「デフォルト」バージョンでビルドします。 テストのためにローカル環境で複数のNodeバージョンを切り替える必要がある場合は、[n](https://github.com/tj/n)や[nvm](https://github.com/nvm-sh/nvm)のようなサードパーティ製パッケージを使うことができます。 ## SSL証明書に関するエラー プライベート署名証明書を使ってローカルのSitecoreインスタンスを扱っている場合、以下のエラーが発生する可能性があります。 > エラー:最初の証明書を検証できません > > エラー:署名*LEAF*確認*TO*できません > > UnauthorizedError:無効な署名 このエラーを解決するには、[Node.js用のSitecore CA証明書を設定し](https://doc.sitecore.com/xp/ja/developers/hd/19/sitecore-headless-development/walkthrough--configuring-sitecore-ca-certificates-for-node-js.html "Walkthrough: Configuring Sitecore CA certificates for Node.js")てください。 ## JSSアプリをローカルにデプロイする際のエラー インポートロールに正しい権限がない場合、以下のエラーが発生する可能性があります: IMPORT ERROR(S) OCCURRED! Exception thrown while importing JSS app Exception: Sitecore.Exceptions.AccessDeniedException Message: AddFromTemplate - Add access required 解決策については「 [AzureでJSSアプリケーションをインポートする際のエラー](https://kb.sitecore.net/articles/650791) 」を参照してください。 ## データ取得の問題 JSS Next.jsアプリの構築とレンダリングは、GraphQLを使ってデータを取得することに依存しています。ビルド失敗やページをレンダリングできないアプリの最も一般的な原因は、データ取得プロセスの問題です。 /ui?sc\_apikey=のGraphiQLインターフェースは、GraphQLデータのビジュアルブラウザです。この種の問題を診断するのに便利なツールです。 静的生成機能をサポートするために、サンプルアプリは[GraphQLクエリを使ってSitecoreパスを取得し](https://doc.sitecore.com/xp/ja/developers/hd/19/sitecore-headless-development/preparing-the-list-of-pages-for-static-generation-or-export-in-jss-next-js-apps.html "Preparing the list of pages for static generation or export in JSS Next.js apps")ています。このクエリを直接GraphiQLで実行してみてください。 \# 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 } } }" } 期待された結果が見られない場合は、以下のステップを試してください。 1. **Sitecoreコントロールパネル**で「**Populate Solr Managed schema**」を使ってSolrスキーマを入力してください。 2. **Sitecoreコントロールパネル**でインデックス**マネージャーを使ってインデックス**を再構築してください。 3. あなたのコンテンツに、問い合わせたい言語のバージョンがあるか確認してください。 ## GraphiQLは空欄で、開発者ツールには「エラー:モードgraphql failed to advanced stream」と表示されます。 アプリケーションがlocalStorageのデータを復元できない場合にこの問題に直面することがあります。例えば、埋め込みクエリが入ったURLを開こうとしてクエリが無効だった場合などです。 ![GraphiQL error Mode graphql failed to advance stream](https://doc.sitecore.com/api/markdown-image/xp/ja/developers/hd/19/sitecore-headless-development/images/graphiql-error1.png) 問題を解決するために: 1. 関連するタブからすべてのローカルストレージをクリアしてください。 ![Clear the local storage for the Chrome tab with errors](https://doc.sitecore.com/api/markdown-image/xp/ja/developers/hd/19/sitecore-headless-development/images/graphiql-error1-solution1.png) 2. Chromeのタスクマネージャーで、ローカルストレージに再度書き込みされる前にプロセスを終了してください。 ![Kill the process for the Chrome tab with errors](https://doc.sitecore.com/api/markdown-image/xp/ja/developers/hd/19/sitecore-headless-development/images/graphiql-error1-solution2.png) ## GraphiQLのエラー「XmlException: Root element is missing」 このエラーは、Sitecoreにログインした同じブラウザでGraphiQLを起動したときに発生します。 ![GraphiQL error XmlException: Root element is missing](https://doc.sitecore.com/api/markdown-image/xp/ja/developers/hd/19/sitecore-headless-development/images/graphiql-error2.png) 問題を解決するには、URLクエリパラメータにsc\_mode=normalを追加します。 ## Sitecoreでアイテムを編集しようとしたときのエラー Sitecore Editor Roleで新しいユーザーを作成した後、SitecoreでJSSアプリの項目を編集しようとすると、そのユーザーに読み取り権限がないと警告されることがあります。 回避策として、*System/Workflows/JSS開発ワークフロー*項目の*Workflow State Write*を手動で設定し、最終的な「公開済み」状態を編集可能にします。これにより、ユーザーは「**ロック&編集**」オプションを使って新しいバージョンのアイテムを作成できます。 ## エクスペリエンスエディターでのホストタイムアウトのレンダリング問題 Experience Editorを使ってHTTPレンダリングエンジン(Next.jsアプリなど)を使うように設定されたJSSアプリを初めて開くと、レンダリングホストからタイムアウトエラーが表示され、メッセージ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.InvokeT(String moduleName, String functionName, Object functionArgs) 問題を解決するには、\\App\_Config\\Sitecore\\JavaScriptServices\\Sitecore.JavaScriptServices.ViewEngine.Http.configファイルを編集してRequestTimeoutMs設定の値を上げてください。例えば: 10000 ## GraphQLクエリエラーは、SXAを搭載したSitecoreインスタンスを使ってNext.jsアプリを起動しようとします JSSテナントとSXA連携を持ち、Next.jsアイテムをJSSテナントにデプロイする場合、Next.jsアプリを本番モードで起動しようとした際にGraphQLクエリエラーが発生することがあります。 Error: Valid value for rootItemId not provided and failed to auto-resolve app root item. このエラーは、Next.jsアプリとNext.js JSSテナントにデプロイされたアプリアイテムが異なるテンプレートを参照しているため、クエリが失敗するため発生します。 エラーを防ぐために、GraphQLサービスのインスタンスに対するrootItemIdを次のように定義してください。 - /src/lib/sitemap-fetcher.ts. - /src/lib/dictionary-service-factory.ts. ## GraphQL内省データ生成時の誤差 GraphQLスキーマが変更された場合、GraphQLの内省データを再生成しなければなりません。 サンプルアプリでは、コマンドjss graphql:updateを使って内省データを再生成します。 > !注このコマンドで内部的に呼び出すスクリプトは、scjssconfig.jsonファイルが埋められている必要があります。ファイルを生成するには、[JSSアプリをSitecoreに接続](https://doc.sitecore.com/xp/ja/developers/hd/19/sitecore-headless-development/walkthrough--connecting-a-code-first-jss-next-js-application-to-sitecore.html "Walkthrough: Connecting a code-first JSS Next.js application to Sitecore")する必要があります。 ## VercelはローカルのSitecore環境からのデータを表示できません [ngrok](https://ngrok.com/)を使ってローカルSitecoreエンドポイントをVercelに公開する場合は、host-headerフラグを使用していることを確認してください。例えば、 ngrok http -host-header=rewrite ## 18.0.0アップグレード後、Vercelでアプリがレンダリングに失敗します もしアプリがローカル開発環境で正しくレンダリング・ビルドされるのに、Vercelにデプロイした際にレンダリングができない場合、問題の原因としてバージョン18.0.0以降への誤ったアップグレードが原因かもしれません。 jss createコマンドでNext.jsアプリケーションを作成する際、選択したオプションや\--fetchWith・\--prerenderオプションのデフォルト値に基づいてスクリプトが自動的に整理されます。 Next.jsアプリケーションをJSS 16.0からJSS 18.0に手動でアップグレードし、リポジトリから最新のコードをコピーする際には、この自動クリーンアップは行われません。バージョン18.0以前は、...path.SSR.tsx src/pages\_examples/に配置されていました。バージョン18.0.0以降では、jss createコマンドの改良により、Next.jsサンプルアプリケーションのソースはsrc/pagesの...pathパラメータ*のキャッチ*オール動的ルートの両方を保持しています。 レンダリングの問題を解決するために: 1. 正しいページソースファイルを選択し、キャッチオールの動的ルートを1つだけにしてください src/pages - サーバー側レンダリングを使う場合は、 src/path/...path.SSR.tsx を保持して名前を変更してください ...path.tsx - 静的生成を使う場合は src/path/...path.SSR.tsxを削除してください。 2. ソースコードを再デプロイしてください。 ## 既知の問題:空のテキストフィールドを入力しようとした際のエクスペリエンスエディターエラー 空のテキストフィールドを入力すると、以下のエラーメッセージが表示されます: Uncaught TypeError: Cannot read property 'baseNode' of undefined これはExperience Editorで既知の問題であり、今後のリリースで修正される予定です。機能には影響せず、安全に無視しても構いません。 開発モードでNext.jsを実行すると、Next.jsはランタイムエラーをオーバーレイで表示します。 この問題はNext.jsが本番モードで動作している場合には発生せず、コンテンツオーサーには影響しません。