--- title: "ウォークスルー:JSS CLIでJSS Next.jsアプリケーションを作成する方法" slug: "walkthrough--creating-a-jss-next-js-application-with-the-jss-cli" abstract: "まずはコードファーストのJSS Next.jsアプリ開発を始めましょう" --- # ウォークスルー:JSS CLIでJSS Next.jsアプリケーションを作成する方法 フロントエンドやJavaScript開発者なら、JSS CLIコマンドjss createでJSS Next.jsアプリを素早くスキャフォールドできます。 その結果生まれたプロジェクトは [、まずコードファーストの開発](https://doc.sitecore.com/xp/ja/developers/hd/19/sitecore-headless-development/code-first-development-workflow.html "Code-first development workflow")に最適化されています。Sitecoreインスタンスを持っていない、またはそれに対して開発する予定がない場合は、[Sitecoreから切り離して作業](https://doc.sitecore.com/xp/ja/developers/hd/19/sitecore-headless-development/working-disconnected-in-jss.html "Working disconnected in JSS")することができます。 JSSのコマンドラインツール(CLI)を使ってJSS Next.jsアプリケーションを作成できます。 > !注この方法を使う場合は、[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")を踏む必要があります。 > > 新しいJSSアプリケーションがライセンスされたSitecore XPバージョンと互換性があるかを確認するには、[Sitecore互換性テーブル](https://support.sitecore.com/kb?id=kb_article_view&sysparm_article=KB0541788)を参照してください。 このアプローチは、コードファーストの開発ワークフローを使用するSitecore開発者や、SitecoreをインストールしずにJSS開発者体験を評価したい開発者に推奨します。 JSS CLIを使ってJSSアプリケーションを作成する前に、まず[JSS CLIをグローバルにインストール](https://doc.sitecore.com/xp/ja/developers/hd/19/sitecore-headless-development/install-the-jss-cli-globally.html "Install the JSS CLI globally")する必要があります。 このウォークスルーでは、以下の方法を説明します: - JSS Next.jsアプリケーションを作成しましょう。 - JSS Next.jsアプリケーションを実行してください。 - アプリ作成後のステップ。 ## JSS Next.jsアプリケーションを作成しましょう Next.jsテンプレートに基づくJSSアプリケーションを作成するには: - ターミナルで、ディレクトリ名とnextjsテンプレートを入力して以下のコマンドを実行します。 jss create my-first-jss-app nextjs --fetchWith {REST|GraphQL} --prerender {SSG|SSR} このコマンドはJSSの最新バージョンのJSS Next.jsアプリケーションを作成し、必要なパッケージをインストールします。 > [!ヒント以前のバージョンのJSSを使ってアプリケーションを作成するには、JSS CLIリファレンスの例を参照してください](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")jss create ## JSS Next.jsアプリケーションを実行してください アプリケーションを実行するには: 1. ターミナルでアプリケーションディレクトリに移動します。例えば: cd my-first-jss-app 2. ターミナルで次のコマンドを実行します: jss start これで [切断モードでの開発](https://doc.sitecore.com/xp/ja/developers/hd/19/sitecore-headless-development/working-disconnected-in-jss.html "Working disconnected in JSS")を始められます。 ## アプリをSitecoreと統合する コードファーストのアーティファクトやコンテンツをSitecoreにデプロイしたり、WYSIWYG編集をしたり、本番環境でJSSを使用したりするなどの活動には、Sitecoreインスタンスが必要です。 まずコードファーストの成果物やコンテンツをSitecoreに展開するには、[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") し、[高度なSitecoreエディタに接続](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")してください。 もしよければ、[コード優先からSitecore優先の開発ワークフローに切り替え](https://doc.sitecore.com/xp/ja/developers/hd/19/sitecore-headless-development/transitioning-from-code-first-to-sitecore-first.html "Transitioning from code-first to Sitecore-first")ることもできます。