基礎から始めるNext.js【８Chakra Ui Setup】

基礎から始めるNext.js【８Chakra Ui Setup】

YouTube: https://youtu.be/DnJiaCGQ_HE

https://youtu.be/DnJiaCGQ_HE

今回は「Chakra UI 」のセットアップについて解説します。
こちらはスタイルドコンポーネントがベースになっていて、
スタイルをコンポーネントのpropsに渡して適用していく特徴があります。

chakra nextjs: https://chakra-ui.com/getting-started/nextjs-guide
chakra heading: https://chakra-ui.com/docs/components/heading
chakra list: https://chakra-ui.com/docs/components/list

npm i @chakra-ui/react @emotion/react@^11 @emotion/styled@^11 framer-motion@^6

package.json

  "dependencies": {
    "@chakra-ui/react": "^2.3.7",
    "@emotion/react": "^11.10.5",
    "@emotion/styled": "^11.10.5",
    "framer-motion": "^6.5.1",
  },

pages/_app.tsx

import type { AppProps } from 'next/app'
import '../styles/globals.css'
import { ChakraProvider } from '@chakra-ui/react'

function MyApp({ Component, pageProps }: AppProps) {
  return (
    <ChakraProvider>
      <Component {...pageProps} />
    </ChakraProvider>
  )
}

export default MyApp

pages/index.tsx

import Link from 'next/link'
import Layout from '../components/Layout'
import { Heading } from '@chakra-ui/react'

import { ListItem, UnorderedList } from '@chakra-ui/react'

export default function Home() {
  return (
    <Layout title="Next App TopPage" content="Generated by create next app">
      <Heading as="h1" size="4xl">
        Welcome to <a href="https://nextjs.org">Next.js!</a>
      </Heading>
      <UnorderedList>
        <ListItem>
          <Link href={'/hello/1'}>to Hellopage</Link>
        </ListItem>
      </UnorderedList>
    </Layout>
  )
}