nextjs12-chakra-ui starter kit

Table of Contents

• Overview
• Installation
  • CLI (Recommended)
  • Manual
• Commands
• State management
• Testing
  • Unit testing
  • Storybook’s Accessibility testing
• Chakra UI’s Customizable theme
• Example Components
  • API routes example
  • Counter Example
  • Fetch example
• Kit Organization / Architecture
• How to deploy your project

Overview

This Next.js 12 starter kit comes with formatting, linting, example components, testing and styling. Here is the complete list of technologies and tooling used in this kit:

• Next.js 12
• Chakra UI
• Jest - Test runner
• TypeScript - Type checking
• Storybook - Component library
• ESLint - Code linting
• Prettier - Code formatting

Installation

CLI (Recommended)

npm create @this-dot/starter -- --kit next12-chakra-ui

or

yarn create @this-dot/starter --kit next12-chakra-ui

• Follow the prompts to select the next12-chakra-ui starter kit and name your new project.
• cd into your project directory and run yarn install.
• Run yarn run dev to start the development server.
• Open your browser to http://localhost:3000 to see the included example code running.

Manual

This requires a download of the entire starter.dev repository and extraction of the next12-chakra-ui kit from the starters directory.

git clone https://github.com/thisdot/starter.dev.git

• Copy and rename the starters/next12-chakra-ui directory to the name of your new project.
• cd into your project directory and run yarn install.
• Run yarn run dev to start the development server.
• Open your browser to http://localhost:3000 to see the included example code running.

Commands

• yarn run dev - Starts the development server.
• yarn run test - Runs the unit tests.
• yarn run storybook - Starts the Storybook UI.
• yarn run lint - Runs ESLint on the project.
• yarn run format:fix - Formats code for the entire project

State management

For this starter kit we are not using a global state manager but instead storing state inside the routes for Next.js. For example, please look at the /src/pages/counter-example.tsx and src/pages/fetch-example.tsx files.

Testing

Unit testing

The unit tests for the home page can be found in the __tests__ directory.

.
├── Counter.test.tsx
├── Greeting.test.tsx
└── index.test.tsx

Storybook’s Accessibility testing

This starter kit comes with the @storybook/addon-a11y which is used to check for common accessibility errors in your components. When you run yarn run storybook, each story will show detailed explanations with suggested fixes if errors are found.

Chakra UI’s Customizable theme

Inside the src/pages/_app.tsx directory, you will find the basic setup for customizing your theme, colors, and font styles using Chakra UI.

const colors = {
  brand: {
    50: "#1a365d",
    100: "#153e75",
    500: "#2464ec",
  },
};

const fontWeights = {
  normal: 400,
  medium: 600,
  bold: 800,
};

const breakpoints = {
  sm: "320px",
  md: "768px",
  lg: "960px",
  xl: "1200px",
};

export const theme = extendTheme({ colors, fontWeights, breakpoints });

Example Components

API routes example

Inside the src/pages/api directory, you will find a hello.ts file which includes an example on how to create your own API’s with Next.js 12.

import type { NextApiRequest, NextApiResponse } from "next";

type Data = {
  name: string,
};

export default function handler(
  req: NextApiRequest,
  res: NextApiResponse<Data>
) {
  res.status(200).json({ name: "This Dot Labs" });
}

Counter Example

Inside the src/components/Counter directory, you will find the Counter.tsx and Counter.stories.tsx files. In this example, you will see how to work with Chakra UI components in Next.js 12. You will also see examples on how to write stories for your components using Storybook.

Fetch example

Inside the src/pages directory, you will find the fetch-example.tsx which demonstrates how to fetch data using Next.js 12. Inside the src/components/Greeting directory, the Greeting.stories.tsx provides examples on how to write stories for your components using Storybook.

Kit Organization / Architecture

At the root level, you will find all of the testing, linting, Prettier formatting, Storybook and TypeScript configurations along with the src and public directories.

Inside the src directory, you will find the following structure:

.
├── components
│   ├── Counter
│   │   ├── Counter.stories.tsx
│   │   ├── Counter.tsx
│   │   └── index.ts
│   ├── Greeting
│   │   ├── Greeting.stories.tsx
│   │   ├── Greeting.tsx
│   │   └── index.ts
│   └── index.ts
└── pages
    ├── api
    │   └── hello.ts
    ├── _app.tsx
    ├── counter-example.tsx
    ├── fetch-example.tsx
    └── index.tsx

How to deploy your project

You can use services like Netlify or Vercel to deploy your application. Both of these services will come with a built-in CI/CD pipeline and live previews.