Creating a project with NextJS, Typescript and ChakraUI in 3 steps.

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)

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.

Step Two- Install ChakraUI: (Docs)

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.

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:

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:

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;

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.

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!