Introducing the Next.js 12 and Chakra UI Starter Kit

Next.js is a very popularly used React framework, and to help support developers using Next, This Dot Labs has just created a new starter kit that they can use to bootstrap their next projects. This Next.js 12 starter kit comes with formatting, linting, example components, unit testing and styling with Chakra UI.

In this article, we will take a deeper look into what this kit has to offer.

Table of Contents

• How to initialize a new project
• Technologies and tools included with the kit
  • Next.js v.12
  • Chakra UI
  • Jest
  • Storybook
  • ESLint and Prettier
• A note about state management
• Deployment options
• Reasons for using this kit
• Conclusion

How to initialize a new project

1. Run npm create @this-dot/starter -- --kit next12-chakra-ui or yarn create @this-dot/starter --kit next12-chakra-ui
2. Follow the prompts to select the next12-chakra-ui starter kit, and name your new project.
3. cd into your project directory and run npm install or yarn install .
4. Run npm run dev or yarn run dev to start the development server.
5. Open your browser to http://localhost:3000 to see the included example code running.

Technologies and tools included with the kit

Next.js v.12

This starter kit uses version 12 of Next.js with the TypeScript configuration. We have also included an example inside the src/pages/api/hello.ts file on how to work with the built-in types for API routes.

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" });
}

Chakra UI

This starter kit uses Chakra UI for all of the styling. We have already setup the ChakraProvider inside the src/pages/_app.tsx file, which includes extended theme objects for colors, font weights, and breakpoints that you can customize to your liking.

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 });

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

You can take a look at any of the example components inside of the src/components folder on how to best use Chakra's components.

Jest

This starter kit uses the Jest testing framework for its unit tests.

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

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

Storybook

This starter kit comes with Storybook so you can test out your UI components in isolation. We have also included the @storybook/addon-a11y addon, which is used to check for common accessibility errors in your components. When you run Storybook, each story will show detailed explanations with suggested fixes if errors are found. Examples of stories can be found in the components directory.

ESLint and Prettier

This start kit uses ESLint for linting and Prettier for formatting. All of the configurations have been setup for you so you can get to building out your project faster.

A note about state management

This starter kit does not use a global state management library. Instead we are managing state within the routing system. For examples, please look at the /src/pages/counter-example.tsx and src/pages/fetch-example.tsx files.

Deployment options

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.

Reasons for using this kit

Next.js is a versatile framework, and can be used for a variety of situations. Here are some examples of what you can use our starter kit for.

• personal blog
• e commerce application
• user dashboard application
• MVP (Minimum Viable Product)

Conclusion

Next.js has a lot to offer, and this new starter kit will help you bootstrap your next project. Study the example components to learn about best practices with Next.js and Chakra UI. Get started building out new features for your project with our new starter kit!