DEV Community

Cover image for Creating a project with NextJS, Typescript and ChakraUI in 3 steps.
James A.
James A.

Posted on • Updated on

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.
Initiating Nextjs 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

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

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
Enter fullscreen mode Exit fullscreen mode

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 (
      <Component {...pageProps} />

export default MyApp;
Enter fullscreen mode Exit fullscreen mode

Initiating ChakraProvider

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!

Top comments (1)

dustinseals profile image
Info Comment hidden by post author - thread only accessible via permalink

You can easily make use of the best source that you find here. Not only that it is easy to understand their way of teaching.making someone obsessed with you Spells to end a friendship

Some comments have been hidden by the post's author - find out more