I would like to preface this article, by saying that I wrote this content forCreative Guru Designs. Creative Guru Designs has many great NextJs blogs/examples, along with many other frontend/SaaS resources!
Creating a user-interphase is never a simple task, butChakra UI is a great UI library to get your Next.js application up and running fast, all while maintaining aesthetics. In this guide, you'll learn how to set up a simple Next.js app with Chakra UI.
Presequisites
- ✅ Standard knowledge of NextJS setup and usage
- ✅ Some experience with UI/UX Design
Create a NextJs Project
You can create a blank Next.js project by running:
npx create-next-app my-project# oryarn create next-app my-projectCreate a NextJs Project Using Typescript
Alternatively, Next.js provides an integrated TypeScript, similar to an IDE. You can create a TypeScript project withcreate-next-app using the--ts,--typescript flag as shown below:
npx create-next-app@latest --ts# oryarn create next-app --typescript🚨Please note that when adding Chakra UI to a TypeScript project, a minimum TypeScript version of 4.1.0 is required.
Once you've successfully created you're Typescript project, cd into the project directory and get started by creating an emptytsconfig.json file in the root folder:
touch tsconfig.jsonNext.js will automatically configure this file with default values. It is also supported to provide your owntsconfig.json with custom compiler options. To provide a relative path to atsconfig.json file, set atypescript.tsconfigPath prop inside yournext.config.js file.
After creating yourtsconfig.json file, runnext,normally npm run dev/yarn dev and Next.js will direct you through the installation of the required packages to finish the application setup:
npm run dev# You'll see instructions like these:## Please install TypeScript, @types/react, and @types/node by running:## yarn add --dev typescript @types/react @types/node## ...Once all installations are successful and complete, you're ready to start converting files from.js to.tsx and coding in TypeScript!.
🚨A file namednext-env.d.ts will be created in the root of your project. This file ensures Next.js types are picked up by the TypeScript compiler. You cannot remove it or edit it as it can change at any time.
Learn more about using Typescript with Node.js in theirDocs.
Adding Chakra UI to your Next.js Application
To get started using Chakra UI, install the core Chakra UI package by running:
npm i @chakra-ui/react @emotion/react@^11 @emotion/styled@^11 framer-motion@^4# oryarn add @chakra-ui/react @emotion/react@^11 @emotion/styled@^11 framer-motion@^4After installation, you'll need to addChakra providers.
Adding in Chakra Providers
Chakra uses the ChakraProvider component, which then wraps your website with a context containing properties such as the Chakra theme, color mode functionality, CSS reset, global styles, and more.
Incomponents/_app.js:
import{ChakraProvider,Heading}from"@chakra-ui/react"import*asReactfrom"react";import{render}from"react-dom";import"./styles.css";functionApp(){return<Heading>WelcometousingChakra+Next.Js</Heading>;}constrootElement=document.getElementById("root");render(<ChakraProvider><App/></ChakraProvider>,rootElement);If you are using Typescript, use the ChakraProvider component incomponents/_app.tsx like so:
import{ChakraProvider,Heading}from"@chakra-ui/react";import*asReactfrom"react";import{render}from"react-dom";import"./styles.css";functionApp(){return<Heading>WelcometoChakra+TypeScript</Heading>;}constrootElement=document.getElementById("root");render(<ChakraProvider><App/></ChakraProvider>,rootElement);If everything was imported successfully, once the component rerenders you should be greeted with your newly written heading.
Now that you're getting the hang of it, let's create a simple hero component! First create aHero.js orHero.tsx file. And inside try out the following example code:
import{Container,Stack,Flex,Box,Heading,Text,Image,Icon,useColorModeValue,UnorderedList,ListItem}from"@chakra-ui/react";exportconstBlob=(props)=>{return(<Iconwidth={"100%"}viewBox="0 0 578 440"fill="none"xmlns="http://www.w3.org/2000/svg"{...props}><pathfillRule="evenodd"clipRule="evenodd"d="M239.184 439.443c-55.13-5.419-110.241-21.365-151.074-58.767C42.307 338.722-7.478 282.729.938 221.217c8.433-61.644 78.896-91.048 126.871-130.712 34.337-28.388 70.198-51.348 112.004-66.78C282.34 8.024 325.382-3.369 370.518.904c54.019 5.115 112.774 10.886 150.881 49.482 39.916 40.427 49.421 100.753 53.385 157.402 4.13 59.015 11.255 128.44-30.444 170.44-41.383 41.683-111.6 19.106-169.213 30.663-46.68 9.364-88.56 35.21-135.943 30.551z"fill="currentColor"/></Icon>);};exportdefaultfunctionHero(){return(<ContainermaxW={"7xl"}><Stackalign={"center"}spacing={{base:8,md:10}}py={{base:20,md:28}}direction={{base:"column",md:"row"}}><Stackflex={1}spacing={{base:5,md:10}}><HeadinglineHeight={1.1}fontWeight={600}fontSize={{base:"3xl",sm:"4xl",lg:"6xl"}}><Textas={"span"}position={"relative"}_after={{content:"''",width:"full",height:"30%",position:"absolute",bottom:1,left:0,bg:"blue.400",zIndex:-1}}>ExampleApplication</Text><br/><Textas={"span"}color={"blue.400"}>Next.js+ChakraUI</Text></Heading><FlexjustifyContent="center"textAlign="left"><UnorderedList><ListItem>UsesNext.js/TypescriptonFront-end.</ListItem><ListItem>UsesChakraUIforUI.</ListItem></UnorderedList></Flex></Stack><Flexflex={1}justify={"center"}align={"center"}position={"relative"}w={"full"}><Blobw={"150%"}h={"150%"}position={"absolute"}top={"-20%"}left={0}zIndex={-1}color={useColorModeValue("blue.50","blue.400")}/><Boxposition={"relative"}height={"300px"}rounded={"2xl"}boxShadow={"2xl"}width={"full"}overflow={"hidden"}><Imagealt={"Hero Image"}fit={"cover"}align={"center"}w={"100%"}h={"100%"}src={"https://media.istockphoto.com/photos/ink-blue-color-paint-pouring-in-water-isolated-on-white-background-picture-id902957562?k=20&m=902957562&s=612x612&w=0&h=y_Nu9PuNq9vhnQLBgjQ9jhuSW7y9vj62WP33D8d_Z9A="}/></Box></Flex></Stack></Container>);}Once you've created your hero component, import it into yourcomponents/_app.js orcomponents/_app.tsx file like so:
import{ChakraProvider,Heading}from"@chakra-ui/react";import*asReactfrom"react";import{render}from"react-dom";import"./styles.css";importHerofrom"./hero.tsx";functionApp(){return(<div><Hero/></div>);}constrootElement=document.getElementById("root");render(<ChakraProvider><App/></ChakraProvider>,rootElement);Once your application re-renders, your landing page should resemble the following:
Congratulations! You can now create awesome user interphases in half the time, all thanks to Chakra UI. 🎉
Top comments(7)
Hi can you give source code my _app.tsx not working currectly
- LocationUK
- WorkFull stack Developer
- Joined
I'm confused by your implementation of the Chakra providers as I can't work out where you're passing through the Component and pageProps?
- LocationNew York, New York
- Education🤩 BCC & Flatiron Bootcamp 🤩
- WorkCloud Engineer
- Joined
which component are you referring to? if you are referring to the Chakra Provider component, it is being imported with the code:
import { ChakraProvider, Heading } from "@chakra-ui/react";You can look at the documentation for that also here:
chakra-ui.com/docs/getting-started
Could you specify what you meant more about not understanding the pageProps?
For further actions, you may consider blocking this person and/orreporting abuse
