---
title: "攻略:JSSイニショナイザーを使ってJSS Next.jsアプリケーションを作成する方法"
slug: "walkthrough--creating-a-jss-next-js-application-with-the-jss-initializer"
abstract: "まずはコードファーストのJSS Next.jsアプリ開発を始めましょう"
---
# 攻略:JSSイニショナイザーを使ってJSS Next.jsアプリケーションを作成する方法

フロントエンドやJavaScript開発者なら、[JSSアプリの初期化器](https://doc.sitecore.com/xp/ja/developers/hd/22/sitecore-headless-development/the-jss-app-initializer.html "The JSS app initializer")を使ってJSS Next.jsアプリを素早くスキャフォールドできます。

> !注この方法を使う場合は、[Sitecoreインスタンスに接続するために追加の手順](https://doc.sitecore.com/xp/ja/developers/hd/22/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 Next.jsアプリケーションを作成しましょう
-   アプリをSitecoreと統合する
-   JSS Next.jsアプリケーションを実行してください

## JSS Next.jsアプリケーションを作成しましょう

Next.jsテンプレートに基づくJSSアプリケーションを作成するには:

1.  ターミナルで、ディレクトリ名とnextjsテンプレートを入力して以下のコマンドを実行します。
    
    npx create-sitecore-jss@ver<version-number> nextjs
    
    <version-number>を使いたいバージョンに置き換えてください。例えば、21.
    
    > !注コードファーストワークフローに最適化されたアプリケーションを作成するには、プロンプトが出たらnextjs-styleguideアドオンを追加することを選びます。アドオンを使用すると、プロセスはjss startまたはnpm run startコマンドでアプリケーションを切断モードで実行するためのdataおよびsitecore/definitionsフォルダを作成します。
    > 
    > [切断された状態で動作](https://doc.sitecore.com/xp/ja/developers/hd/22/sitecore-headless-development/working-disconnected-in-jss.html "Working disconnected in JSS")するアプリケーションを作成するには、プロンプトが出たらデータ取得方法としてRESTを選択してください。それ以外の場合は、アプリケーションを初期化した後、Sitecoreから切断された動作中にRESTサービスを使用するようアプリケーションを修正してください。
    
2.  申請書の選択肢を示すために、指示に従ってください。
    

このコマンドはJSSの最新バージョンのJSS Next.jsアプリケーションを作成し、必要なパッケージをインストールします。

> !ヒント[JSSやSitecoreの旧バージョンのアプリケーションを作成する](https://doc.sitecore.com/xp/ja/developers/hd/22/sitecore-headless-development/create-a-jss-app-for-an-older-version-of-sitecore.html "Create a JSS app for an older version of Sitecore")ことも可能です。

## アプリをSitecoreと統合する

コードファーストの成果物やコンテンツのSitecoreへのデプロイ、WYSIWYG編集、GraphQLでのデータ取得、本番環境でのJSS使用などの作業にはSitecoreインスタンスが必要です。

まずコードファーストの成果物やコンテンツをSitecoreに展開するには、[JSSアプリをSitecoreに接続](https://doc.sitecore.com/xp/ja/developers/hd/22/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/22/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/22/sitecore-headless-development/transitioning-from-code-first-to-sitecore-first.html "Transitioning from code-first to Sitecore-first")ることもできます。

## JSS Next.jsアプリケーションを実行してください

アプリケーションを実行するには:

1.  ターミナルでアプリケーションディレクトリに移動します。例えば:
    
    cd my-first-jss-app
    
2.  ターミナルで次のコマンドを実行します:
    
    jss start
    
    あるいは、もしあなたのアプリがSitecoreに接続されている場合:
    
    jss start:connected