💨
基礎から始めるNext.js【8Chakra Ui Setup】
基礎から始めるNext.js【8Chakra Ui Setup】
YouTube: 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>
)
}
Discussion