Zenn
コラボスタイル DevelopersPublicationへの投稿
💨

Next.js App RouterでChakra UIが'use client'無しで使える！

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

Chakra UIが'use client'無しで使えるようになってました！

プライベートでNext.js App Routerを使っているのですが、Chakra UIやMantineを使う場合は、'use Client'を加える必要があります。
早くServer Componentsでも使えるようにならないかなーとgithubのIssuesをチラチラみていたら、こんな一文を見つけちゃいました。


github Issues

っ！！！　こんなところに超重要な一文が隠れていた！！！

ということで、早速触ってみたのですが、
確かに'use client'なしでも機能したので、手順をメモします。

また、サンプルコードをGithubに公開しましたので、気になる方は触ってみてください。

手順

注1）現時点（'23/11/17）では、公式Docsはまだ更新されておりません。
　　　以下手順は今後更新される公式の手順と異なる可能性があります。

注2）とりあえず機能する事の確認である為、雑な見た目はご了承ください。。

１）create-next-appでインストール

npx create-next-app@latest

２）ローカルで立ち上がる事を確認する

npm run dev

３）chakra UIをインストール

npm i @chakra-ui/react @chakra-ui/next-js @emotion/react @emotion/styled framer-motion

４）layout.tsxを修正する

layout.tsx
import { ChakraProvider } from "@chakra-ui/react"

export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html lang="en">
      <body className={inter.className}>
        <ChakraProvider cssVarsRoot="body">
          {children}
        </ChakraProvider>
      </body>
    </html>
  )
}

５）page.tsxにChakra UIのコンポーネントをインポートし、実装する

例）Tabs

サンプルコード
page.tsx
import {
  Card,
  CardBody,
  Tabs,
  TabList,
  Tab,
  TabPanels,
  TabPanel,
} from '@chakra-ui/react'

export default function Home() {
  return (
    <main className="flex flex-col items-center justify-between p-24">
      <Card className="mt-4">
        <CardBody>
          <h2>Tabs</h2>
          <Tabs>
            <TabList>
              <Tab>tab1</Tab>
              <Tab>tab2</Tab>
              <Tab>tab3</Tab>
            </TabList>
            <TabPanels>
              <TabPanel>
                <p>content1</p>
              </TabPanel>
              <TabPanel>
                <p>content2</p>
              </TabPanel>
              <TabPanel>
                <p>content3</p>
              </TabPanel>
            </TabPanels>
          </Tabs>
        </CardBody>
      </Card>
    </main>
  )
}

例）Menu

サンプルコード
page.tsx
import {
  Card,
  CardBody,
  Menu,
  MenuButton,
  MenuList,
  MenuItem,
} from '@chakra-ui/react'

export default function Home() {
  return (
    <main className="flex flex-col items-center justify-between p-24">
      <Card className="mt-4">
        <CardBody>
          <h2>Menu</h2>
          <Menu>
            <MenuButton as={Button}>
              Actions
            </MenuButton>
            <MenuList>
              <MenuItem>menu1</MenuItem>
              <MenuItem>menu2</MenuItem>
              <MenuItem>menu3</MenuItem>
              <MenuItem>menu4</MenuItem>
              <MenuItem>menu5</MenuItem>
            </MenuList>
          </Menu>
        </CardBody>
      </Card>
    </main>
  )
}

例）Popover

サンプルコード
page.tsx
import {
  Button, 
  Popover,
  PopoverTrigger,
  PopoverContent,
  PopoverHeader,
  PopoverBody,
  PopoverArrow,
  PopoverCloseButton,
} from '@chakra-ui/react'

export default function Home() {
  return (
    <main className="flex flex-col items-center justify-between p-24">
      <Popover>
        <PopoverTrigger>
          <Button>Trigger</Button>
        </PopoverTrigger>
        <PopoverContent>
          <PopoverArrow />
          <PopoverCloseButton />
          <PopoverHeader>Confirmation!</PopoverHeader>
          <PopoverBody>Popover Body</PopoverBody>
        </PopoverContent>
      </Popover>
    </main>
  )
}

use client使わなくても機能してますね！！

最後に

現時点では、Server Componentsでは「component」のみ使えそうです。
Hooks系はエラーが出たので使えないようです。

それでも簡単に使えるようになったのは嬉しいですね。
ますますApp Routerが楽しみになってきますね！

それでは、Have a nice App Router !

GitHubで編集を提案
コラボスタイル Developers
コラボスタイル DevelopersPublication

私達は『ワークスタイルの未来を切り拓く』という理念のもとワークフローの本質を追求し、新しいワークスタイルを提案するとともに、コラボスタイルが率先して時代に適したワークスタイルを常にバージョンアップし発信していきます。

Discussion