---
title: "ウォークスルー:Sitecoreファーストの開発ワークフローを使って、JSS Next.jsアプリで新しいコンポーネントを作成する"
slug: "walkthrough--create-a-new-component-in-a-jss-next-js-app-using-the-sitecore-first-development-workflow"
abstract: "Sitecore JSONレンダリングに合わせて、Next.jsコンポーネントを作成してください"
---
# ウォークスルー:Sitecoreファーストの開発ワークフローを使って、JSS Next.jsアプリで新しいコンポーネントを作成する

新しいコンポーネントの作成は、JSSアプリケーション開発時に最も一般的な作業の一つです。

このウォークスルーは、[Sitecoreコンテナを使い、Next.js MyProject](https://doc.sitecore.com/xp/ja/developers/hd/19/sitecore-headless-development/walkthrough--setting-up-a-development-environment-with-the-sitecore-containers-template-for-next-js.html "Walkthrough: Setting up a development environment with the Sitecore Containers template for Next.js")というプロジェクトで新しいテンプレートを用いてプロジェクトを設定したことを前提としています。

このウォークスルーでは以下の方法が説明されています:

:::攻略

1.  [SitecoreでJSONレンダリングを作成してください](https://doc.sitecore.com/xp/ja/developers/hd/19/sitecore-headless-development/walkthrough--create-a-new-component-in-a-jss-next-js-app-using-the-sitecore-first-development-workflow.html#create-the-json-rendering-in-sitecore)
2.  [レンダリングのJSON出力を確認してください](https://doc.sitecore.com/xp/ja/developers/hd/19/sitecore-headless-development/walkthrough--create-a-new-component-in-a-jss-next-js-app-using-the-sitecore-first-development-workflow.html#verify-the-renderings-json-output)
3.  [Next.jsアプリでコンポーネントを作成します](https://doc.sitecore.com/xp/ja/developers/hd/19/sitecore-headless-development/walkthrough--create-a-new-component-in-a-jss-next-js-app-using-the-sitecore-first-development-workflow.html#create-the-component-in-the-nextjs-app)
4.  [経験エディタで値を入力してください](https://doc.sitecore.com/xp/ja/developers/hd/19/sitecore-headless-development/walkthrough--create-a-new-component-in-a-jss-next-js-app-using-the-sitecore-first-development-workflow.html#fill-out-values-in-the-experience-editor):::

## SitecoreでJSONレンダリングを作成してください

SitecoreでJSONレンダリングを作成するには:

1.  コンテンツエディターの */sitecore/templates/Project/myproject*フォルダで、MyComponentという新しいテンプレートを作成します。
    
2.  新しいテンプレートで新しいテンプレートセクションを作成し(名前は重要ではありません)、以下のフィールドを追加します:
    
    -   *見出しで、タイプは**Single-line Textです。*
    -   *体*はタイプ *Rich Text*。
3.  **タイトル**標準フィールドを使い、テンプレートに説明的で使いやすい名前を付けてください。
    
4.  **ビルダー**タブを開いた状態で、ビルダーオプションメニューで**標準値**をクリックし、**見出し**と**本文**欄にデフォルト値を入力してください。
    
5.  コンテンツツリーの */sitecore/layout/Renderings/Project/myproject*で 、MyComponentというJSONレンダリングを作成し、以下のフィールドの値を設定します。
    
    -   **データソースの所在地フィールド:.***/ を入力*
    -   **データソーステンプレート**:選択 *sitecore/Templates/Project/myproject/MyComponent*。
6.  MyComponentレンダリングを*/sitecore/layout/Placeholder Settings/Project/myproject/Main*の**Allowed Control**に追加し、「**保存**」をクリックします。
    
7.  Experience Editorで */sitecore/content/MyProject/Home*を開き、新しいレンダリングを追加し、データソース項目も作成してください。
    
    > !ヒントレンダリングホストのページに出力されるのは、JSSコンポーネントがReact実装が不足しているか、それに似たメッセージが出るということです。これは、まだレンダリングホストのJSONレンダリングにコンポーネントをマッピングしていないためです。
    
8.  すべてのアイテム変更を公開する:
    
    -   コンテンツエディターの **「公開** 」リボンの上で、「 **公開** 」アイコンの横にある小さな黒い矢印をクリックし、「 **公開サイト**」をクリックしてください。
    -   **Publish Site**ウィンドウで、MasterデータベースからWebデータベースへのアイテム公開にはSmart **Publish**ラジオボタンを選択し、「**Publish**」をクリックします。

## レンダリングのJSON出力を確認してください

新しいレンダリングの出力をテストするには、サイトホームページのレイアウトサービスのJSON出力を表示してみてください。

JSON出力を見るには:

1.  Next.jsアプリケーションのrootにあるファイルscjssconfig.jsonからapiKey値をコピーします。
    
2.  ブラウザでURLを開https://cm.myproject.localhost/sitecore/api/layout/render/jss?item=/&sc\_apikey=<YOUR API KEY>&sc\_site=<YOUR SITE NAME>&sc\_mode=normal。
    
3.  出力には新しい部品が含まれていなければなりません。
    
    {
     "uid": "ba5d4f2d-b6f1-428a-81e8-6b7c25844c08",
     "componentName": "MyComponent",
     "dataSource": "{A2A3F4C0-B13B-4651-B342-320E56FDC43A}",
     "params": {},
     "fields": {
     "heading": {
     "value": "Default"
     },
     "body": {
     "value": "Default"
     }
     }
    }
    

## Next.jsアプリでコンポーネントを作成します

Next.jsアプリケーションでは、Sitecoreで作成したレンダリングに合致するコンポーネントを作成する必要があります。

JSS Next.js Sitecore優先アプリでコンポーネントを作成するには:

1.  ファイルを作成MyProject\\src\\rendering\\src\\components\\MyComponent.tsx。
    
2.  新たに作成されたファイルで、レンダリングと同じ名前のコンポーネントを定義します:
    
    import { Text, Field, RichText } from '@sitecore-jss/sitecore-jss-nextjs';
    
    type MyComponentProps = {
     fields: {
     heading: Field<string>,
     body: Field<string>
     };
    }
    
    const MyComponent = (props: MyComponentProps): JSX.Element => (
     <div>
     <Text field={props.fields.heading} />
     <RichText field={props.fields.body} />
     </div>
    );
    
    export default MyComponent;
    

## 経験値エディターで値を入力してください

コンポーネントのフィールドの値を入力できます。

値を記入するには:

1.  エクスペリエンスエディターでアイテムを開 */sitecore/content/MyProject/home*。
2.  すべての項目の値を記入してください。
3.  アイテムを保存して公開してください。
4.  ブラウザでアプリケーションを更新し、通常は http://localhost:3000 で変更を確認します。