Sitecore Search のサンプルで Tailwind.css を適用する : Haramizu.com

Sitecore Search のサンプルに関しては、まだサンプルのコード、および見た目は何も制御していません。今回は、このプロジェクトに Tailwind.css および NextUI を利用できるように変更していきます。

Tailwind.css の適用

最近は Next.js のプロジェクトを作成する時に on にできるのですが、今回はまず最初の段階で off にしていました。すでにこれを on にしているのであればこの部分の作業は不要です。

インストールの手順は以下のように記載されています。

Install Tailwind CSS with Next.js

以下のコマンドを実行します。

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

これで、必要なモジュールのインストール、および tailwind.config.js と postcss.config.js が追加されます。tailwind.config.js に関しては以下のように対象となるパスを記載してください。

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["./src/**/*.{js,ts,jsx,tsx,mdx}"],
  theme: {
    extend: {},
  },
  plugins: [],
};

src/styles/globals.css のファイルを以下のコードに書き換えます。

@tailwind base;
@tailwind components;
@tailwind utilities;

続いて、このスタイルシートを読み込むように、src/pages/_app.tsx でインポートをするように指定します。

import "@/styles/globals.css";

最後に、適用できているのか確認ができるように、src/pages/index.tsx のファイルのタイトルを以下のように書き換えます。

      <main>
        <h1 className="text-3xl font-bold underline">Hello Sitecore Search</h1>
      </main>

実行した結果は以下のようになります。

H1 のタイトルに下線が入り、適用できていることがわかります。

NextUI の適用

インストールの手順は、以前に以下の記事で紹介をしていた内容で、tailwind.config.js の変更まで進めてください。

NextUI を利用する

上記の手順は App Router 向けの記事となるため、今回は後半のステップが異なります。src/pages/_app.tsx のページに関して、以下のコードを追加します（NextUIProvider を追加しています）。

import { NextUIProvider } from "@nextui-org/react";

      <NextUIProvider>
        <WidgetsProvider
          env={SEARCH_ENV as Environment}
          customerKey={SEARCH_CUSTOMER_KEY}
          apiKey={SEARCH_API_KEY}
        >
          <Header />
          <Component {...pageProps} />
        </WidgetsProvider>
      </NextUIProvider>

正しく動作するか確認をするために、src/pages/index.tsx に対して以下のコードを追加してください。

import {Button} from '@nextui-org/react'

          <Button>Click me</Button> // 任意の場所に

これで準備ができました。アクセスをするとボタンが有効になっています。

ダークモードを有効にする

以前紹介をしたのは App Router の際でした。今回は Pages Directory での実装となるため、以下のページで記載されている手順で進めていきます。

Dark Mode - Next.js Pages Directory Setup

スイッチする時のアイコンとして react-icons を利用するため、今回は以下の２つのモジュールをインストールしました。

npm install next-themes
npm install react-icons

続いて src/pages/_app.tsx のファイルに以下のコードの変更を加えます。

import { ThemeProvider as NextThemesProvider } from "next-themes";

      <NextUIProvider>
        <NextThemesProvider attribute="class" defaultTheme="dark">
        // 既存のコードを記述
        </NextThemesProvider>
      </NextUIProvider>

テーマを切り替えるボタンを作成します。これは以前作成をしたボタンを流用して作成しました。

https://github.com/SitecoreJapan/Sitecore-Search-Nextjs-Sample/blob/main/src/components/Button/ThemeSwitcher.tsx

最後に src/components/Header/index.tsx のファイルに追加します。

import HeaderInput from "@/components/HeaderInput";
import LocaleSelector from "@/components/LocaleSelector";
import ThemeSwitcher from "@/components/Button/ThemeSwitcher";

export default function Header() {
  return (
    <div>
      <HeaderInput />
      <ThemeSwitcher />
      <LocaleSelector />
    </div>
  );
}

これでダークモードも実装できました。

ヘッダーの変更

まだコンポーネントを並べているだけで、何も調整していない状況です。そこで、左側にロゴ、真ん中に検索ボックス、右側に言語の切り替えとダークモードの切り替えのボタンを配置するデザインにします。コードは以下のように変更しました。

https://github.com/SitecoreJapan/Sitecore-Search-Nextjs-Sample/blob/development/src/components/Header/index.tsx

ヘッダーは以下のように出来上がりました。

まとめ

今回は Tailwind.css の仕組みを導入して、ヘッダーの部分を仕上げるという形までとなりました。今の所、まだ検索ボックスは配置しているだけのため、この部分を制御する必要が出てきます。次回はこの検索結果の表示に関して、見た目を直していきます。