Also add ESLint and Prettier to the mix

Varun Rustomji

Follow

Jun 27, 2020 · 4 min read

This is a simple walkthrough on how I setup a Next.js app with Chakra UI. I’ll be using yarn as my package manger of choice so if you don’t have yarn already installed, you can find instructions to install it here.

Setup Next.js with TypeScript

Let’s start by creating a Next.js app. We will use the with-typescript example provided by the Next.js team. You can find more details about all the examples provided here.

Once all the dependencies are installed, you can jump into your project and start the dev server as shown below.

// Create a new next.js app
create-next-app my-app --example with-typescript// Jump into the app folder
cd my-app// Start the dev server
yarn dev

I’m calling the app my-app, you can replace it with whatever you’d like to name your app.

This will build your application and you can view it on http://localhost:3000/ in your browser. It should look something like this:

This is all you need to get started with Next.js and TypeScript.

Chakra UI

Chakra UI is a relatively new UI Library that I decided to use for my project. The ability to customize themes easily and dark mode compatibility were the main things that attracted me to try Chakra. You can read more about it here.

In order to add Chakra to our app we have to add all the dependencies to our app using the following command:

yarn add @chakra-ui/core @emotion/core @emotion/styled emotion-theming

Next.js uses the App component to initialize pages. We need to override the App component to integrate Chakra. To override the default App, create the file ./pages/_app.tsx and add the code below:

Make sure the file is names _app.tsx and it is placed in the ./pages folder

In the code above, we wrap the default next App with the ThemeProvider and CSSReset provided by Chakra. This allows us to import and use components from Chakra UI into our application.

To check if Chakra was setup correctly, you can restart your app to see that the default styles in Chakra are added and the home page looks like this:

Configure ESLint and Prettier

There are many different ways of setting up ESLint and Prettier for your projects. If you are working alone, you can simply download plugins and enable the linting rule that you like. If you are collaborating with other developers this method is not viable, so I prefer creating a .eslintrc.json file to allow everyone working on the project to follow the same rules. This helps maintain formatting and stylistic consistency.

To accomplish this, we will start by downloading all the dependences to our project and create the .eslintrc.json file in the root directory of the project.

// Download ESLint related dependencies
yarn add eslint @typescript-eslint/parser @typescript-eslint/eslint-plugin eslint-plugin-react --dev// Download Prettier related dependencies
yarn add prettier eslint-config-prettier eslint-plugin-prettier --dev// Create the .eslintrc.json file
touch .eslintrc.json

Once all the dependencies are downloaded, you can open your .eslintrc.json file in the editor of your choice and add the following code:

Make sure that plugin:prettier/recommended is the last configuration in the extends array.

These are my default setting that I used for my project. You can add and modify rules according to your preferences.

Fix ESLint Issues

After adding and modifying the .eslintrc.json file, you will realizes that suddenly many of your files show errors because the code in our files in not consistent with the linting rules. An efficient way to deal with this is to add the following command to your package.json scripts.

"scripts": {
  "lint": "eslint '*/**/*.{js,ts,tsx}' --quiet --fix"
}

Now you can run the command yarn lint which will fix all the ESLint errors that can be automatically fixed and any other errors will be printed out in the command line.

This is simplest way to setup your Next.js app with Chakra UI, TypeScript, ESLint and Prettier. You can find the boilerplate mentioned in this blog here.