1. JSS Next.jsアプリでのコンポーネントの作成

チュートリアル: Sitecoreファーストの開発ワークフローを使用してJSS Next.jsアプリで新しいコンポーネントを作成する

Version:
日本語翻訳に関する免責事項

このページの翻訳はAIによって自動的に行われました。可能な限り正確な翻訳を心掛けていますが、原文と異なる表現や解釈が含まれる場合があります。正確で公式な情報については、必ず英語の原文をご参照ください。

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

このチュートリアルでは、Sitecore Containers for Next.js dotnetの新しいテンプレートと MyProjectというプロジェクトを使用してプロジェクトを設定したことを前提としています。

このチュートリアルでは、次の方法について説明します。

  1. SitecoreでJSONレンダリングを作成する

  2. レンダリングのJSON出力を確認する

  3. Next.jsアプリでコンポーネントを作成する

  4. エクスペリエンス エディターで値を入力します

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

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

  1. コンテンツ エディタの /sitecore/templates/Project/myprojectフォルダで、MyComponentという名前の新しいテンプレートを作成します。

  2. 新しいテンプレートで、新しいテンプレートセクションを作成し(名前は重要ではありません)、次のフィールドを追加します。

    • headingで、タイプはSingle-line Textです。

    • bodyで、タイプはRich Textです。

  3. Title標準フィールドを使用して、テンプレートに説明的でわかりやすい名前を付けます。

  4. Builderタブを開いた状態で、Builder OptionsメニューのStandard Valuesをクリックし、headingフィールドとbodyフィールドにいくつかのデフォルト値を入力します。

  5. コンテンツツリーの /sitecore/layout/Renderings/Project/myprojectで、MyComponentというJSONレンダリングを作成し、次のフィールドに値を設定します。

    • Datasource Locationフィールド: Enter ./

    • Datasource Template:sitecore/Templates/Project/myproject/MyComponentを選択します。

  6. /sitecore/layout/Placeholder Settings/Project/myproject/Main placeholder内のAllowed ControlsにMyComponentレンダリングを追加し、Saveをクリックします。

  7. エクスペリエンス エディターで /sitecore/content/MyProject/Homeを開き、新しいレンダリング (データ ソース アイテムの作成など) を追加します。

    先端

    レンダリングホストページでは、レンダリングホストでこのJSONレンダリングにコンポーネントがまだマップされていないため、JSSコンポーネントにReact実装が見つからない、または同様のメッセージが出力されます。

  8. すべてのアイテムの変更を公開します。

    • コンテンツ エディターのPublishリボンで、Publishアイコンの横にある小さな黒い矢印をクリックし、Publish siteをクリックします。

    • Publish Siteウィンドウで、アイテムをMasterデータベースからWebデータベースにパブリッシュするには、Smart publishラジオ ボタンを選択し、Publishをクリックします。

レンダリングのJSON出力を確認する

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

JSON出力を表示するには:

  1. Next.jsアプリケーションのルートにあるファイル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で提供され、変更を確認します。

この記事を改善するための提案がある場合は、 お知らせください!