Applying Tailwind.css

Recently, it is possible to turn it on when creating a Next.js project, but in this case, it was turned off at the very beginning. If you have already turned it on, you do not need to do this part.

The installation procedure is described below.

• Install Tailwind CSS with Next.js

Execute the following command

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

This will install the required modules and add tailwind.config.js and postcss.config.js. For tailwind.config.js, please include the target path as follows

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

Rewrite the file src/styles/globals.css with the following code

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

Then, specify that this style sheet should be imported in src/pages/_app.tsx.

import "@/styles/globals.css";

Finally, rewrite the title of the file src/pages/index.tsx as follows so that you can check if it has been applied.

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

The results of the execution are as follows

The title of H1 is underlined, indicating that it has been applied.

Applying NextUI

The installation procedure should proceed as previously described in the following article, up to the modification of tailwind.config.js.

• Use NextUI

Since the above procedure is for the App Router, the latter step is different this time: for the page src/pages/_app.tsx, add the following code (NextUIProvider is added)

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>

Please add the following code to src/pages/index.tsx to verify that it works correctly.

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

          <Button>Click me</Button>

You are now ready to go. When you access the site, the button is enabled.

Enable dark mode

The previous introduction was for the App Router. This time, since the implementation will be in the Pages Directory, we will follow the procedure described in the following page.

• Dark Mode - Next.js Pages Directory Setup

In order to use react-icons as icons when switching, we have installed the following two modules.

npm install next-themes
npm install react-icons

Then make the following code change to the file src/pages/_app.tsx

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

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

Create a button to switch themes. This button was created by diverting a previously created button.

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

Finally, add to the file 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>
  );
}

Now we can implement the dark mode.

Change Header

We are still just laying out the components and have not adjusted anything. So, we will design a logo on the left, a search box in the middle, and buttons to switch languages and dark mode on the right. The code has been changed as follows

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

The header was created as follows

Summary

This time, we have introduced the Tailwind.css mechanism and are up to the task of finishing the header section. For now, we have only placed the search box, so we will need to control this part of the page. In the next issue, we will fix the look and feel of the search results display.

Tags

• Search