Zenn
🎊

【朗報】Chakra UI が Next.js の App Router で使えるようになってた！！

2023/11/17に公開
Next.js
Chakra UI
tech

概要

公式ドキュメントは現在準備中の模様ですが、"use client" なしで Chakra Ui Components が Next.js のServer Components 上で動くようになったことについて解説します。

Chakra UI って何？

Chakra UI は UI component library の1つです。「Create accessible React apps with speed」 と謳っていて、爆速でデザイン・機能を構築できます。
また React, Typescriptと相性が良く、Next.js フレームワークを組み合わせた web アプリの開発体験がよく、多くのプロダクトで上記スタックが採用され使われているように感じます。

Next.js AppRouter との相性が悪かった

しかし Next.13 以降で導入された App router では Server Components を採用しており、 Chakra UI を使用する際には "use client" を宣言しないと使えない = @chakra-ui/react が含まれるファイルは 全て Client Components になってしまう致命的な問題がありました...

つまり、レイアウト用として Component部分は別ファイルで定義しないと App router で導入されたさまざまな便利機能(Data Fetch、Metadata) などが使えず、とても面倒を起こしていました。

さらに Next.14 では App router が 公式サポートされるようになり、Chakra UI の Server Component化 がより心待ちされるようになりました。

筆者も「Chakra UI...早く Server Components 対応してくれ...」と開発者のTwitterをフォローして追っていたのですが、ついに server components に対応したとの情報が！！！

X民 「"use client" を使わないと Next.jsが使えない...」
X民 「Server Componentsに対応してくれたらもっと最高なんやけど...(開発者にメンション)」(意訳)
開発者 「あ、それ数バージョン前に修正されてるで😁！！」(意訳)

"use client" 問題はすでに対応済みだった

とのことだったので、大慌てで確認しました。

page.tsx 
import type { NextPage } from "next";
import { Container, Heading, Text } from "@chakra-ui/react";
...

export async function generateMetadata({ params }) {
  return {
    title: "Chakra UI v3 が 2023年冬にも公開されるらしい...",
    description: "それを前に、'use client' 問題が解決されてて嬉しいね",
    ...
  }
}

type PageProps = { params: {} };
const Page: NextPage<PageProps> = async ({ params }) => {
  const response = await fetch(`${nextEndpoint}/api/microcms/news`, {
    method: "GET",
    next: {},
  });
  const articles: ArticleData[] = await response.json();
  return (
    <Container py={10}>
      <Heading>Chakra UI が use client を使わなくても動く！</Heading>
      {articles.map((a) => (
        <Text key={a.title}>{a.title}</Text>
      ))}
    </Container>
  );
};
export default Page;


上記のコードは上記のように問題なく表示されます

注意点

Server Components で使用しようとすると、下記のようなエラーが出ます。

Error: (0 , _chakra_ui_react__WEBPACK_IMPORTED_MODULE_4__.useColorModeValue) is not a function

Chakra UI の今後

ちなみに Chakra UI は、 2023年のQ4を目処に v3.0 を公開する と宣言しており、つい先日 Headleas UI の ark_ui をリリースしていました。

引用元: https://www.adebayosegun.com/blog/chakra-panda-ark-whats-the-plan

今後も Chakra UI から目が離せませんね🤩

皆さんも Chakra UI をアップデートして、 "use client" から解放されましょう‼️

Discussion