Creating a project with NextJS, Typescript and ChakraUI in 3 steps.
Tags: chakra, typescript, nextjs, yarn
Published: 2022-03-08 14:38:24

In modern times speed, efficiency and functionality are one of the many elements that makes a web application “super”.  One way we can achieve this gem is by using quality web-building tools like NextJS- to enhance web performance such as lazy-image loading, Typescript- to keep code quality and avoid future spills and ChakraUI- to build accessibly user-friend interfaces. 

This article will be working us through how we can combine these “powers” to build a “superpowered” web application

**Step One- Initiate NextJS with Typescript: ([Docs](https://nextjs.org/docs/basic-features/typescript#create-next-app-support))**

In our terminal, navigate to a directory to create a new project. Using your preferred package manager, let’s create a `React` project powered with `NextJS` and `Typescript` using this command: 
`yarn create next-app --typescript` or `npx create-next-app@latest --ts`. 

In the process of running this command, the terminal will pop up a dialog asking us to name our new project. Let’s call it `doggies` (A Dog-interest website) and we are golden! 

PS: *The `--ts` or `--typescript` is a flag to tell the package manager to initiate a React project with Typescript*.
![Initiating Nextjs with Typescript](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jft850496cvkr7lsjtal.png)

---


**Step Two- Install ChakraUI: ([Docs](https://chakra-ui.com/guides/getting-started/nextjs-guide))**

After successfully creating our project that is powered with NextJS and Typescript, let’s now install ChakraUI. Before running the command to install ChakraUI, navigate to the root of the project, then go ahead to install ChakraUI using this command: 

`yarn add @chakra-ui/react @emotion/react@^11 @emotion/styled@^11 framer-motion@^6`

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

And that’s it! ChakraUI is now available on our project. To have full access to the goodies that comes with `ChakraUI` we need to do one last thing and that takes us to step number 3.


![Installing Chakra](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rxabw0m8wxwfei2qi1la.png)

---

**Step Three- Activate the power of ChakraUI.**

To do this, we need to access the `_app.tsx` file inside our `Pages` folder of our project and `wrap` its return components in a `ChakraProvider` Component. 

This is what the file looks like by default:

```jsx
import type { AppProps } from 'next/app'

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

export default MyApp
```

So now let’s import `ChakraProvider` and use it as a wrapper before returning the `Components`. Our file should now look like this: 

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

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

export default MyApp;
```


![Initiating ChakraProvider](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hphw5vnvvdfax1lu2xp4.png)

And there it is! Our application is now powered with NextJS, Typescript and ChakraUI. 

To see the smooth user interfaces your can create with ChakraUI you can check the [documentation of all its components here.](https://chakra-ui.com/docs/components/overview) 

I’ll be writing an article about why this setup is my favourite and what opportunities this gives us, until then, have a good day and stay well!