Sitecore の製品で採用されている Web フレームワークが公開されており、このフレームワークを Sitecore Blok という形で誰でも利用できるようにパッケージを提供しています。今回はこの Sitecore Blok を Next.js で利用したいと思います。
Sitecore Blok とは？
改めて Sitecore Blok を簡単に説明をすると、Sitecore の各製品、例えば Content Hub ONE などで採用されいる UI を利用することができるように、Sitecore が提供しているフレームワークとなります。
以下のサイトが公式サイトになります。
これを利用することで、Sitecore と連携するようなツールを作るときに、一貫性を保つ形で Web サイトを立ち上げたりすることができます。今回は、サンプルを動かすところまで進めていきます。
新しいプロジェクトを作成する
Next.js のプロジェクト作成
今回は Next.js をベースにして開発を進めていきますが、スタイルシートとしては Next.js で標準的に利用される Tailwind CSS ではなく Chakra UI を採用しているため、tailwind.css の部分は No としてプロジェクトを作成します。
Bash
npx create-next-app
Blok で利用するパッケージを適用する
ここからは Blok の公式サイトの手順に沿って進めていきます。まず、Chakra のコンポーネントライブラリをインストールします。
Bash
npm i @chakra-ui/react @chakra-ui/next-js @emotion/react @emotion/styled framer-motion 続いて Blok のテーマパッケージを適用します。
Bash
npm i @sitecore/blok-theme最後に、Material Design Icons を利用しているので、このアイコンもインストールします。
Bash
npm install @mdi/jsこれで必要なパッケージの追加が完了しました。
Blok のコンポーネントを利用する
まずは Chakra UI および Blok を利用できるようにするため、src\app\providers.tsx のファイルを作成して、以下のコードを設定します。
TypeScript
// app/providers.tsx
"use client";
import sitecoreTheme from "@sitecore/blok-theme";
import { ChakraProvider } from "@chakra-ui/react";
export function Providers({ children }: { children: React.ReactNode }) {
return (
<ChakraProvider
theme={sitecoreTheme}
toastOptions={{
defaultOptions: {
position: "bottom-left",
variant: "subtle",
containerStyle: {
mt: "0",
mb: "4",
mx: "4",
},
},
}}
>
{children}
</ChakraProvider>
);
}この際、@sitecore/blok-theme のところがエラーとして表示されます。
これは、typescript の設定に関するファイル、tsconfig.json の moduleResolution の値を bundler から node に変更することで解消できます。
JSON
{
"compilerOptions": {
"lib": ["dom", "dom.iterable", "esnext"],
"allowJs": true,
"skipLibCheck": true,
"strict": true,
"noEmit": true,
"esModuleInterop": true,
"module": "esnext",
"moduleResolution": "node",
"resolveJsonModule": true,
"isolatedModules": true,作成した providers.tsx を layout.tsx で読み込みます。
TypeScript
import type { Metadata } from "next";
import { Providers } from "./providers";
export const metadata: Metadata = {
title: "Create Next App",
description: "Generated by create next app",
};
export default function RootLayout({
children,
}: Readonly<{
children: React.ReactNode;
}>) {
return (
<html lang="en">
<body>
<Providers>{children}</Providers>
</body>
</html>
);
}これで準備が完了しました。
ページの更新
最後にトップページを表示する src\app\page.tsx のファイルを以下のコードに変更します。
TypeScript
"use client";
import {
Container,
Flex,
Heading,
Image,
Stack,
Text,
Button,
useColorModeValue,
} from "@chakra-ui/react";
import NextLink from "next/link";
export default function Home() {
return (
<Flex as="main" height="calc(100vh)" background={"chakra-body-bg"}>
<Flex w="full" alignItems="center" my="16">
<Container>
<Image
mb="8"
h="24"
src={useColorModeValue(
"https://sitecorecontenthub.stylelabs.cloud/api/public/content/37768281ce944bafb141bc1d4741fae1",
"https://sitecorecontenthub.stylelabs.cloud/api/public/content/507bd1b6eaa04385b07cfe44a424e053"
)}
alt="Sitecore Blok logo"
/>
<Stack spacing="6" align="start">
<Heading as="h1" size="xl">
Build better products faster
</Heading>
<Text variant="subtle" maxW="prose">
Blok is{" "}
<NextLink href="https://www.sitecore.com">Sitecore’s</NextLink>{" "}
product design system: the UI framework and style guide we use to
build great apps. It’s publicly available, so that anyone can
easily build software in the Sitecore design language.
</Text>
<Button as={NextLink} href="https://blok.sitecore.com/get-started">
Get started
</Button>
</Stack>
</Container>
</Flex>
<NextLink href="https://www.sitecore.com">
<Image
m="8"
h="10"
src="https://delivery-sitecore.sitecorecontenthub.cloud/api/public/content/logo-sitecore"
alt="Sitecore logo"
position={"absolute"}
bottom={"0"}
right={"0"}
/>
</NextLink>
</Flex>
);
}これで準備完了です。npm run dev で実行すると、以下のようなサンプル画面が表示されます。
まとめ
Sitecore Blok を Next.js で動かすことができました。この UI を利用して Sitecore Content Hub DAM との連携するデモを作ってみたいと考えています。
今回のコードは以下の URL に共有しています。