ウォークスルー、JSS Next.jsアプリで新しいコンポーネントを作成する
このページの翻訳はAIによって自動的に行われました。可能な限り正確な翻訳を心掛けていますが、原文と異なる表現や解釈が含まれる場合があります。正確で公式な情報については、必ず英語の原文をご参照ください。
新しいコンポーネントの作成は、JSSアプリケーション開発時に最も一般的な作業の一つです。
このウォークスルーは、Sitecoreコンテナを使い、Next.js MyProjectというプロジェクトで新しいテンプレートを用いてプロジェクトを設定したことを前提としています。
このウォークスルーでは以下の方法が説明されています:
SitecoreでJSONレンダリングを作成してください
SitecoreでJSONレンダリングを作成するには:
-
コンテンツエディターの /sitecore/templates/Project/myprojectフォルダで、MyComponentという新しいテンプレートを作成します。
-
新しいテンプレートで新しいテンプレートセクションを作成し(名前は重要ではありません)、以下のフィールドを追加します:
- 見出しで、タイプは**Single-line Textです。
- 体はタイプ Rich Text。
-
タイトル標準フィールドを使い、テンプレートに説明的で使いやすい名前を付けてください。
-
ビルダータブを開いた状態で、ビルダーオプションメニューで標準値をクリックし、見出しと本文欄にデフォルト値を入力してください。
-
コンテンツツリーの /sitecore/layout/Renderings/Project/myprojectで 、MyComponentというJSONレンダリングを作成し、以下のフィールドの値を設定します。
- データソースの所在地フィールド:./ を入力
- データソーステンプレート sitecore/Templates/Project/myproject/MyComponent。
-
MyComponentレンダリングを*/sitecore/layout/Placeholder Settings/Project/myproject/Main*のAllowed Controlに追加し、「保存」をクリックします。
-
Experience Editorで /sitecore/content/MyProject/Homeを開き、新しいレンダリングを追加し、データソース項目も作成してください。
!ヒントレンダリングホストのページに出力されるのは、JSSコンポーネントがReact実装が不足しているか、それに似たメッセージが出るということです。これは、まだレンダリングホストのJSONレンダリングにコンポーネントをマッピングしていないためです。
-
すべてのアイテム変更を公開する:
- コンテンツエディターの 「公開 」リボンの上で、「 公開 」アイコンの横にある小さな黒い矢印をクリックし、「 公開サイト」をクリックしてください。
- Publish Siteウィンドウで、MasterデータベースからWebデータベースへのアイテム公開にはSmart Publishラジオボタンを選択し、「Publish」をクリックします。
レンダリングのJSON出力を確認してください
新しいレンダリングの出力をテストするには、サイトホームページのレイアウトサービスのJSON出力を表示してみてください。
JSON出力を見るには:
-
Next.jsアプリケーションのrootにあるファイルscjssconfig.jsonからapiKey値をコピーします。
-
ブラウザでURLを開https://cm.myproject.localhost/sitecore/api/layout/render/jss?item=/&sc\_apikey=
&sc_site= &sc_mode=normal。 -
出力には新しい部品が含まれていなければなりません。
{ "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優先アプリでコンポーネントを作成するには:
-
ファイルを作成MyProject\src\rendering\src\components\MyComponent.tsx。
-
新たに作成されたファイルで、レンダリングと同じ名前のコンポーネントを定義します:
import { Text, Field, RichText } from '@sitecore-jss/sitecore-jss-nextjs';
type MyComponentProps = { fields: { heading: Field
, body: Field }; } const MyComponent = (props: MyComponentProps): JSX.Element => (
);export default MyComponent;
経験値エディターで値を入力してください
コンポーネントのフィールドの値を入力できます。
値を記入するには:
- エクスペリエンスエディターでアイテムを開 /sitecore/content/MyProject/home。
- すべての項目の値を記入してください。
- アイテムを保存して公開してください。
- ブラウザでアプリケーションを更新し、通常は http://localhost:3000 で変更を確認します。