---
title: "攻略:Next.js用のSitecoreコンテナテンプレートを使った開発環境の設定"
slug: "walkthrough--setting-up-a-development-environment-with-the-sitecore-containers-template-for-next-js"
abstract: "フルスタックSitecore JSSとNext.js開発を始めましょう"
---
# 攻略:Next.js用のSitecoreコンテナテンプレートを使った開発環境の設定

Next.js用のSitecoreコンテナテンプレートを使えば、フルスタックの[Sitecoreファースト](https://doc.sitecore.com/xp/ja/developers/hd/19/sitecore-headless-development/sitecore-first-development-workflow.html "Sitecore-first development workflow") のJSS Next.jsプロジェクトを作成できます。

このウォークスルーでは、[Next.js用のSitecoreコンテナテンプレート](https://doc.sitecore.com/xp/ja/developers/hd/19/sitecore-headless-development/the-sitecore-containers-template-for-jss-next-js-apps.html "The Sitecore Containers template for JSS Next.js apps")を使って開発環境を設定する手順を説明します。

テンプレートをインストールし、SitecoreとNext.js JSSのフルスタックソリューションを作成する前に、ワークステーションに以下のソフトウェアコンポーネントが必要です:

-   有効なSitecoreライセンスファイル。
-   Windows PowerShell 5.1。PowerShell 7は現時点ではサポートされていません。
-   現在の長期サポート(LTS)バージョンの [Node.js](https://nodejs.org/)です。
-   [Core 3.1 SDK.NET(インストールされたバージョンを](https://dotnet.microsoft.com/download/dotnet-core/3.1)dotnet --version
-   [.NET Framework 4.8 SDK](https://dotnet.microsoft.com/download/dotnet-framework/net48) (. [NETフレームワークのバージョンを確認するためのMicrosoft手順](https://docs.microsoft.com/en-us/dotnet/framework/migration-guide/how-to-determine-which-versions-are-installed)を参照)。
-   [Visual Studio 2019](https://visualstudio.microsoft.com/downloads/)。
-   [Docker Windows用](https://docs.docker.com/docker-for-windows/install/)で、 *Windows Containers* を有効にしています。
-   [Sitecoreコンテナを使用する](https://doc.sitecore.com/xp/en/developers/102/developer-tools/set-up-the-environment.html)ために必要なコンポーネントについて。
-   [ギット](https://git-scm.com/)

> !注このテンプレートは、現在のSitecore XPおよびJSSのリリース向けに開発環境を設定します。ライセンスされたSitecore XPバージョンでどのJSSを使うべきか知りたい場合は、[Sitecore互換性テーブル](https://support.sitecore.com/kb?id=kb_article_view&sysparm_article=KB0541788)を参照してください。

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

-   テンプレートをインストールしてください。
-   プロジェクトの解決策を作成します。
-   検索インデックスを再構築しましょう。

## テンプレートをインストールする

解決策を作成する前に、.NET sitecore.nextjs.gettingstartedテンプレートをダウンロードしてファイルシステムにインストールする必要があります。

テンプレートをインストールするには:

1.  管理者権限でPowerShellを開いてください。
    
2.  次のコマンドを実行します:
    
    dotnet new -i Sitecore.DevEx.Templates --nuget-source https://nuget.sitecore.com/resources/v3/index.json
    
    > !注dotnetツールはインストールが成功したことを示す明確なフィードバックを提供しません。しかし、インストールコマンドの最後にインストールされたすべてのテンプレートが一覧表示されます。インストールが成功した場合、リストにはsitecore.nextjs.gettingstartedが含まれています。
    

## プロジェクトソリューションの作成

解名は自由にできますが、この例では解MyProject名を付けています。

> !重要プロジェクトやフォルダ名に非ラテン文字を使用しないでください。Dockerレジストリ名やURLの文字数制限により、非ラテン文字を使用すると予期せぬ結果が生じる可能性があります。

MyProject解を作成するには:

1.  管理者権限でPowerShellを開いてください。
    
2.  インターネット情報サーバーがポート443で動いているか確認してください:
    
    Get-Process -Id (Get-NetTCPConnection -LocalPort 443).OwningProcess
    
    もしそうなら、必ず止めなければなりません:
    
    iisreset /stop
    
3.  Apache Solrや他のサービスがポート8984で動いているか確認してください:
    
    Get-Process -Id (Get-NetTCPConnection -LocalPort 8984).OwningProcess
    
    もしそうなら、必ず止めなければなりません:
    
    Stop-Service -Name "<the name of your service>"
    
    あるいは、Non-Sucking Service Managerで起動している場合は、次のコマンドで終了してください。
    
    nssm stop "<the name of your service>"
    
4.  ソリューションフォルダに行き、MyProjectのソリューションとプロジェクトを作成します:
    
    dotnet new sitecore.nextjs.gettingstarted -n MyProject
    
    > !ヒントテンプレートが内部的に呼び出すjss createコマンドに渡されるパラメータは、\--JSSCreateParamsパラメータを使って[jss createコマンドに渡](https://doc.sitecore.com/xp/ja/developers/hd/19/sitecore-headless-development/sitecore-javascript-rendering-sdk-cli-tools-api-reference.html#UUID-ba8bae12-5938-63d2-1ae1-451aec88abe5_UUID-63ee54c7-6c40-bc5a-0db9-0be674e71aa0 "jss create")すことでカスタマイズできます。例えば:
    > 
    > dotnet new sitecore.nextjs.gettingstarted -n MyProject --JSSCreateParams "--fetchWith GraphQL --prerender SSR"
    
5.  MyProjectフォルダに行ってください。
    
6.  Sitecoreコンテナ環境を準備するには、プロジェクトのルートディレクトリからスクリプトinit.ps1を実行します:
    
    .\\init.ps1 -InitEnv -LicenseXmlPath "<C:\\path\\to\\license.xml>" -AdminPassword "<desired password>"
    
7.  Sitecore Dockerイメージをダウンロードし、コンテナおよびJSSアプリケーションのインストールおよび設定を行うには、以下のスクリプトを実行してください。
    
    .\\up.ps1
    
8.  ブラウザで促されたら、Sitecoreにログインしてデバイスの承認を受け入れてください。
    
9.  起動スクリプトがレンダリングされたサイトとSitecore Launchpadのブラウザタブを開くのを待ちます。
    

## 再構築検索インデックス

-   スクリプト .\\up.ps1 を初めて実行した後、あるいはスクリプト \\docker\\clean.ps1を実行する場合は、 [検索インデックスを再構築](https://doc.sitecore.com/xp/en/developers/102/platform-administration-and-architecture/rebuild-search-indexes.html)する必要があります。