DEV Community: James A.

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

James A. — Tue, 08 Mar 2022 14:38:24 +0000

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!

Responsive spacing with ChakraUI (React)

James A. — Mon, 21 Feb 2022 19:07:35 +0000

ChakraUI is a React based user interface library. Basically it helps you build more user friendly interfaces while still opting for optimal functionality. The creators of ChakraUI put in a lot of work to ensure that components built with ChakraUI can be made responsive as possible.

In this article we will be exploring how to make responsive elements/components. We all agree that right spacing makes user interfaces more easy to navigate and also tender to the eyes.

ChakraUI makes it easy to add spacing to our components. We will now look at some options:

When creating components with Flex / Grid we are giving the option of adding a gap attribute. This attribute typically expects a number value ie: {4} or a string ie: 4rem and also an object which we will see in the code sample below.

Referencing image: We can pass in a singular value for the gap attribute but whatever happened to responsive code?

On the left image we have passed in a value for the gap attribute. This works but it isn’t optimal and doesn’t gives us the opportunity to make our components as responsive as we want.

On the right, we are not introduced to a more optimal way of adding spacing to our component. The gap attribute accepts an object that also accepts specific attribute which value will represent spacing values at each breakpoint. Let’s see this more extensively!:

lg: Screens not larger than 60em (Default: 992px). Macbook Pros Laptops

md: Screens not larger than 48em (Default: (768px) ie:Tablets,IPads`

base: This is default for all screen if we do not specify others.

Please read the full documentation of how ChakraUI specifies their spacing here

One more interesting thing is this principle can also be applied to fontsizes, colors, display toggle.

I hope you found this article helpful in some way.
Enjoy the rest of your day!

Best regards.