Project Objectives

As we move forward with XM Cloud development, it is of course possible to develop within that environment. However, we will create another Next.js project this time with the goal of increasing the portability of the developed components.

Basically, the main purpose is to test components to bring them to XM Cloud.

Create a Next.js project

Since the purpose of this project is to develop a component that works with XM Cloud, we will create a new project in the following form.

• Typescript - Yes
• Tailwind CSS - Yes
• App Router - No

We will delete data from the Next.js sample page.

First, make the file src\pages\index.tsx almost empty. The following code is the actual value returned by XM Cloud's RichText component, as is for testing purposes.

export default function Home() {
  return (
    <main>
      <div className="component rich-text basis-full">
        <div className="component-content">
          <div>
            <h1>Heading 1</h1>
            <p>paragraph</p>
            <h2>Heading 2</h2>
            <p>paragraph</p>
          </div>
        </div>
      </div>
    </main>
  );
}

Change the folder src\styles to src\assets. In this folder, place the same files as in the following folders

• https://github.com/haramizu/sitecoredemo-jp/tree/part-6/src/tailwindcss/src/assets

Operation check

Now we will actually check the operation.

npm run dev

The execution results are as follows

Summary

This time, we launched a new simple Next.js project and applied Tailwind CSS stylesheets to make it displayable.

In the next article, I would like to add Storybook and make it a component.

Tags

• Next.js