The web framework used in Sitecore's products is publicly available, and the company provides a package for anyone to use this framework in the form of Sitecore Blok. In this article, we would like to use Sitecore Blok with Next.js.
What is Sitecore Blok?
Sitecore Blok is a framework provided by Sitecore that enables the use of the UI used in Sitecore products, such as Content Hub ONE.
The following is the official website
This allows you to launch a website in a consistent manner when creating a tool that works with Sitecore. In this article, we will proceed to the point of running a sample.
Create a new project
Next.js project creation
This time, we will proceed with development based on Next.js, but since Chakra UI is adopted as the style sheet instead of Tailwind CSS, which is used as standard in Next.js, the tailwind.css part of the project will be created as No.
Bash
npx create-next-app
Applying packages for use with Blok
From here, we will follow the instructions on Blok's official website. First, install the Chakra component library.
Bash
npm i @chakra-ui/react @chakra-ui/next-js @emotion/react @emotion/styled framer-motion Then apply the Blok theme package.
Bash
npm i @sitecore/blok-themeFinally, since we are using Material Design Icons, we will also install these icons.
Bash
npm install @mdi/jsThis completes the addition of the required packages.
Using Blok components
First, to make Chakra UI and Blok available, create the file src\appProviders.tsx and set the following code.
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>
);
}In this case, the @sitecore/blok-theme area is displayed as an error.
This can be resolved by changing the value of moduleResolution in the typescript configuration file, tsconfig.json, from bundler to 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,Load the created providers.tsx in srcЈappЈ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>
);
}This completes the preparation.
Page Updates
Finally, change the file srcЈappЈpage.tsx, which displays the top page, to the following code
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>
);
}Now you are ready. npm run dev to run it, and you will see the following sample screen.
Summary
I was able to get Sitecore Blok working with Next.js. We would like to make a demo of Sitecore Content Hub DAM integration using this UI.
This time the code is shared at the following URL