Setting up your Next.js Chakra Project

Step by step instruction to set up your project

Setting up a Next.js project with Chakra UI involves several steps, including installing the necessary dependencies, configuring your project, and adding basic components.

If you followed the instructions from the Learn Javascript section, you can skip to the Change Project Directory Section.

Follow these step-by-step instructions to get started:

Install Node.js and npm

Ensure that you have Node.js (version 12 or higher) and npm (version 6 or higher) installed on your system. You can check the installed versions by running the following commands in your terminal or command prompt:

node -v
npm -v

Create a new Next.js project

Run the following command to create a new Next.js application using the default starter template:

npx create-next-app your-app-name

Replace your-app-name with your desired application name.

Change to the project directory

Navigate to the newly created project directory by running:

cd your-app-name

You can check which project directory you are in by looking at your terminal in VS Code or other IDE.

Install Chakra UI dependencies

In the project directory, run the following command to install Chakra UI and its peer dependencies:

npm install @chakra-ui/react @emotion/react @emotion/styled framer-motion

Install Chakra UI icons (optional)

If you want to use Chakra UI's icon library, run the following command to install:

npm install @chakra-ui/icons

Set up a custom _app.js file

In the "pages" directory of your project, create or edit the _app.js file to include the ChakraProvider. Replace the existing content with the following code:

import * as React from 'react';
import { ChakraProvider } from '@chakra-ui/react';

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

export default MyApp;

Start using Chakra UI components

Now, you can start using Chakra UI components in your Next.js project. As an example, open the "pages/index.js" file and replace its content with the following code:

import * as React from 'react';
import { Box, Heading, Button } from '@chakra-ui/react';

export default function Home() {
  return (
    <Box p={4}>
      <Heading as="h1" mb={4}>
        Welcome to Next.js with Chakra UI
      </Heading>
      <Button colorScheme="blue">Get Started</Button>
    </Box>
  );
}

Run the development server

In the terminal or command prompt, run the following command to start the development server:

npm run dev

Open your browser and navigate to http://localhost:3000 to see your Next.js project with Chakra UI up and running.