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

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

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

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

新しいコンポーネントの作成は、JSSアプリケーションの開発中に実行される最も一般的なタスクの1つです。JSS Next.jsアプリケーションには、新しいコンポーネントの作成を容易にするために、ファイルscripts/scaffold-component.tsで定義されたスキャフォールディング スクリプトが用意されています。

この手順では 、スキャフォールディング スクリプトを使用して、コード優先開発ワークフローを使用してJSS Next.jsアプリに新しいコンポーネントを作成する方法を示します。

Next.js JSSアプリケーションでコンポーネントを作成するには、次のようにします。

  1. ターミナルで、Next.jsプロジェクトのルートディレクトリで、スクリプトを実行してアプリケーションを起動します。

    jss start
    先端

    ブラウザでhttp://localhost:3000/ に移動すると、コードの変更がリアルタイムで表示されます。

  2. 新しいターミナルタブ/ウィンドウを開きます。アプリケーションのルートディレクトリで、次のコマンドを実行します。

    jss scaffold MyComponent
    先端

    足場システムは、簡単な作業コンポーネントを放出します。src/scripts/scaffold-component.jsでスキャフォールディングの規則を変更できます。

  3. アプリケーションのルートディレクトリで、新しいコンポーネントのマニフェスト定義を含むファイルsitecore/definitions/components/MyComponent.sitecore.tsで、コンポーネントのデータフィールドを定義します。例えば：

    // eslint-disable-next-line no-unused-vars
import { CommonFieldTypes, SitecoreIcon, Manifest } from '@sitecore-jss/sitecore-jss-dev-tools';

/**
 * Adds the MyComponent component to the disconnected manifest.
 * This function is invoked by convention (*.sitecore.ts) when 'jss manifest' is run.
 * @param {Manifest} manifest Manifest instance to add components to
 */
export default function MyComponent(manifest: Manifest): void {
  manifest.addComponent({
    name: 'MyComponent',
    icon: SitecoreIcon.DocumentTag,
    fields: [{ name: 'heading', type: CommonFieldTypes.SingleLineText }],
    /*
    If the component implementation uses <Placeholder> or withPlaceholder to expose a placeholder,
    register it here, or components added to that placeholder will not be returned by Sitecore:
    placeholders: ['exposed-placeholder-name']
    */
  });
}

  4. ファイルsrc/components/MyComponent.tsxで、Reactコンポーネントを実装します。例えば：

    import { Text, Field, withDatasourceCheck } from '@sitecore-jss/sitecore-jss-nextjs';
import { StyleguideComponentProps } from 'lib/component-props';

type MyComponentProps = StyleguideComponentProps & {
  fields: {
    heading: Field<string>;
  };
};

const MyComponent = (props: MyComponentProps): JSX.Element => (
  <div>
    <p>MyComponent Component</p>
    <Text field={props.fields.heading} />
  </div>
);

  5. 新しく作成されたコンポーネントは、ルートのレイアウトに追加されるまで非アクティブです。コンポーネントをルート レイアウトに追加します。この例では、コンポーネントをデフォルトのプレースホルダーjss-mainへのルートルートに追加します。ファイル /data/routes/en.ymlで、jss-mainプレースホルダの下のコンポーネントの配列にコンポーネントを追加します。

    placeholders:
  jss-main:
  - componentName: MyComponent
    fields:
      heading: Hello, Next.js!
  - componentName: ContentBlock
    fields:
      heading: Welcome to Sitecore JSS

  6. ブラウザを確認してください。新しいコンポーネントがページの上部に表示されます。

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