Tailwind Logo

コンポーネント開発用の Next.js プロジェクトの作成（後編）

Next.js

公開日: 2024-07-23

前回は純粋な Next.js のプロジェクトに対して、XM Cloud で利用しているスタイルシートを適用した形で進めていきました。今回は Storybook をプロジェクトに追加します。

Storybookは、フロントエンド開発のためのオープンソースツールです。特にUIコンポーネントの開発、テスト、ドキュメント化に用いられます。詳しくは公式サイトをご覧ください。

Storybook をインストールする

Next.js に Storybook をインストールする手順は、以下に記載されています。

手順通りに進めていきましょう。まず、以下のコマンドを実行します。

PowerShell 
npx storybook@latest init

実行をすると、インストーラーが Storybook をプロジェクトに追加していきます。しばらくすると、Storybook が起動します。

xmc-components03.png

実際に追加された内容を確認すると、以下のフォルダが追加、またファイルが更新されています。

  • .storybook
  • src\stories
  • .eslintrc.json
  • .gitignore
  • package.json

起動している環境を一度止めます。今回は src/stories の下でコンポーネントを動かすため、Tailwind CSS の content に１行追加します。

TypeScript 
import type { Config } from "tailwindcss";

const config: Config = {
  content: [
    "./src/pages/**/*.{js,ts,jsx,tsx,mdx}",
    "./src/components/**/*.{js,ts,jsx,tsx,mdx}",
    "./src/app/**/*.{js,ts,jsx,tsx,mdx}",
    "./src/stories/**/*.{js,ts,jsx,tsx,mdx}",
  ],
  theme: {},
  plugins: [],
};
export default config;

Storybook を起動する際は、以下のコマンドで起動します。

PowerShell 
npm run storybook

新しいコンポーネントを追加する

サンプルで表示されている Button のように、RichText のコンポーネントを表示できるように作業を進めていきます。Button のコンポーネントをコピーして作業を進めていきます。

RichText.stories.ts の作成

src\stories\Button.stories.ts のファイルをコピーして、src\stories\RichText.stories.ts を作成します。

RichText.tsx の作成

同様に src\stories\Button.tsx のファイルをコピーして、src\stories\RichText.tsx にファイルを作成します。

src\stories\RichText.tsx のファイルに関して、以下の点を変更します。まず、スタイルシートおよび Props の名前を変更します。

TypeScript 
import React from 'react';
import './button.css';

interface ButtonProps {


export const Button = ({
  primary = false,
  size = 'medium',
  backgroundColor,
  label,
  ...props
}: ButtonProps) => {

これを以下のように書き換えます。

TypeScript 
import React from 'react';
import './button.css';

interface RichTextProps {


export const RichText = ({
  primary = false,
  size = 'medium',
  backgroundColor,
  label,
  ...props
}: RichTextProps) => {

RichText.stories.ts を更新する

stories ファイルに関して、以下のように更新をします。

TypeScript 
import { RichText } from './RichText';

const meta = {
  title: 'XMCloud/RichText',
  component: RichText,

} satisfies Meta<typeof RichText>;

上記の変更ができていれば、以下のように左側のメニューに RichText が追加されます。

xmc-components05.png

XM Cloud で取得するデータの確認

XM Cloud の RichText コンポーネントは Sitecore からどういうデータを取得しているのでしょうか？これを確認するために、XM Cloud の src\tailwindcss\src\components\RichText.tsx に対して以下のコードを追加して確認します。

TypeScript 
  console.log(props);

Docker で起動している XM Cloud の環境で上記のデータは tailwindcss-rendering のコンテナでログとして表示されています。Visual Studio で該当するコンテナを右クリックして、View logs を選択すると、ターミナルのログが表示されます。

xmc-components04.png

出力されたデータに関して、今回は以下のようになります。

JSON 
{
  rendering: {
    uid: 'df81e62c-4d5d-4301-a24c-d90f76a81e20',
    componentName: 'RichText',
    dataSource: '/sitecore/content/Tailwindcss/Tailwindcss/Home/Data/Text 1',
    params: {
      GridParameters: 'basis-full',
      FieldNames: 'Default',
      DynamicPlaceholderId: '2'
    },
    fields: { Text: [Object] }
  },
  modifyComponentProps: [Function: modifyComponentProps],
  componentFactory: [Function (anonymous)],
  fields: {
    Text: {
      value: '<h1>Heading 1</h1>\n' +
        '<p>paragraph</p>\n' +
        '<h2>Heading 2</h2>\n' +
        '<p>paragraph</p>'
    }
  },
  params: {
    GridParameters: 'basis-full',
    FieldNames: 'Default',
    DynamicPlaceholderId: '2',
    styles: 'basis-full '
  }
}

プロジェクトの微調整

上記の XM Cloud から取得するデータを扱うことができるように、sitecore-jss のパッケージを Next.js のプロジェクトに追加します。

PowerShell 
npm install -D @sitecore-jss/sitecore-jss-nextjs

これで Sitecore JSS のパッケージを利用してコードを記述することができます。src\stories\RichText.tsx のファイルに関しては、SXA のコンポーネントの RichText.tsx のファイルに入れ替えてください。

続いて src\stories\RichText.stories.ts のファイルですが、XM Cloud から取得したデータをサンプルとして用意をして、以下のように書き換えます。

TypeScript 
import type { Meta, StoryObj } from "@storybook/react";
import { Default as RichText } from "./RichText";

const meta = {
  title: "SXAStarter/RichText",
  component: RichText,
  tags: ["autodocs"],
  argTypes: {
    fields: { control: 'object' },
    params: { control: 'object' },
  },
} satisfies Meta<typeof RichText>;

export default meta;
type Story = StoryObj<typeof meta>;

export const Default: Story = {
  args: {
    fields: {
      Text: {
        value: '<h1>Heading 1</h1>\n<p>Paragraph</p>\n<h2>Heading 2</h2>\n<p>Paragraph</p>',
      },
    },
    params: {
      styles: 'basis-full'
    },
  },
};

この状態ではコンポーネントは Tailwind CSS のスタイルシートを読み込んでいない形となります。これに関しては、 .storybook\preview.ts で以下のコードを追加します。

TypeScript 
import "../src/assets/globals.css";

これで準備が完了です。設定後は、以下のように動作していることを確認できました。

xmc-components05.png

まとめ

XM Cloud で作成する Next.js のコンポーネントを XM Cloud の環境をなしに表示することができました。また、Storybook を利用することで、パラメーターの値を変更したらどのように画面の変更があるのか？というのも確認することができました。

今回は別の Next.js のプロジェクトにおいて、Headless SXA のコンポーネントを Storybook を利用して表示できるようにしてみました。このサンプルは、以下のリポジトリで公開しています。

関連タグ