Search on this site

Blog ✌️

A boilerplate for NextJS with TypeScript, ESLint, Prettier and TailwindCSS
@danestves
--- views

A boilerplate for NextJS with TypeScript, ESLint, Prettier and TailwindCSS

Published

We will see how to configure NextJS with TypeScript, ESLint, Prettier and TailwindCSS to generate a boilerplate ready to be used in any project. To use Next.js with TypeScript, ESLint, Prettier and TailwindCSS you have to go through several pages of documentation on various websites. But in this post I will guide you how you can do it in simple steps.

To use Next.js with TypeScript, ESLint, Prettier and TailwindCSS you have to go through several pages of documentation on various websites. To get your development environment up and running, this post will save you time and give you all the code and choices you need to make to get it working properly.

  1. First of all let's start a new project with Next
npm
1npx create-next-app tailwind-typescript
yarn
1yarn create next-app tailwind-typescript

After the process is complete we go to our folder with cd tailwind-typescript and open it with our favorite code editor.

  1. TypeScript configuration
npm
1npm install -D typescript @types/react @types/node
yarn
1yarn add --dev typescript @types/react @types/node

After installation we will create a next-env.d.ts and tsconfig.json file in the root of our project in which we will have the following configuration:

next-env.d.ts
1/// <reference types="next" />
2/// <reference types="next/types/global" />
tsconfig.json
1{
2 "compilerOptions": {
3 "target": "es5",
4 "lib": ["dom", "dom.iterable", "esnext"],
5 "allowJs": true,
6 "skipLibCheck": true,
7 "strict": false,
8 "forceConsistentCasingInFileNames": true,
9 "noEmit": true,
10 "esModuleInterop": true,
11 "module": "esnext",
12 "moduleResolution": "node",
13 "resolveJsonModule": true,
14 "isolatedModules": true,
15 "jsx": "preserve",
16 "baseUrl": ".",
17 "paths": {
18 "@/*": ["src/*"]
19 }
20 },
21 "exclude": ["node_modules", ".next", "out"],
22 "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", "**/*.js"]
23}

Now we must change files from JavaScript to TypeScript:

1./pages/_app.js # a ./pages/_app.tsx
2./pages/index.js # a ./pages/index.tsx
3./pages/api/hello.js # a ./pages/api/hello.ts
  1. Configuring ESLint with Prettier and Husky
npm
1npm install -D eslint eslint-config-prettier eslint-plugin-prettier prettier husky lint-staged
yarn
1yarn add --dev eslint eslint-config-prettier eslint-plugin-prettier prettier husky lint-staged

We create a .prettierrc file in the root of our project with the following content:

1{
2 "semi": false,
3 "singleQuote": true
4}

We create an .eslintrc file in the root of our project with the following content:

1{
2 "parser": "@typescript-eslint/parser",
3 "plugins": ["@typescript-eslint"],
4 "extends": [
5 "eslint:recommended",
6 "plugin:react/recommended",
7 "plugin:@typescript-eslint/recommended",
8 "prettier",
9 "prettier/@typescript-eslint"
10 ],
11 "env": {
12 "es6": true,
13 "browser": true,
14 "jest": true,
15 "node": true
16 },
17 "settings": {
18 "react": {
19 "version": "detect"
20 }
21 },
22 "rules": {
23 "react/react-in-jsx-scope": 0,
24 "react/display-name": 0,
25 "react/prop-types": 0,
26 "@typescript-eslint/explicit-function-return-type": 0,
27 "@typescript-eslint/explicit-member-accessibility": 0,
28 "@typescript-eslint/indent": 0,
29 "@typescript-eslint/member-delimiter-style": 0,
30 "@typescript-eslint/no-explicit-any": 0,
31 "@typescript-eslint/no-var-requires": 0,
32 "@typescript-eslint/no-use-before-define": 0,
33 "@typescript-eslint/no-unused-vars": [
34 2,
35 {
36 "argsIgnorePattern": "^_"
37 }
38 ],
39 "no-console": [
40 2,
41 {
42 "allow": ["warn", "error"]
43 }
44 ]
45 }
46}

Now in our package.json we add new scripts and the husky and lint-staged configuration:

1{
2 // ...
3 "scripts": {
4 // ...
5 "type-check": "tsc --pretty --noEmit",
6 "format": "prettier --write .",
7 "lint": "eslint . --ext ts --ext tsx --ext js"
8 },
9 "husky": {
10 "hooks": {
11 "pre-commit": "lint-staged",
12 "pre-push": "yarn run type-check"
13 }
14 },
15 "lint-staged": {
16 "*.@(ts|tsx)": ["yarn lint", "yarn format"]
17 }
18 // ...
19}
  1. Proceed to install Tailwind
npm
1npm install tailwindcss@latest postcss@latest autoprefixer@latest
yarn
1yarn add tailwindcss@latest postcss@latest autoprefixer@latest

After we have everything installed, we are going to generate an initial configuration of TailwindCSS with PostCSS:

1npx tailwindcss init -p

Now we use one of the core features of Tailwind that is to remove classes not used in production, for that in the root of our project is the file tailwind.config.js and we will change it to the following code:

tailwind.config.js
1module.exports = {
2 purge: ["./components/**/*.{js,jsx,ts,tsx}", "./pages/**/*.{js,jsx,ts,tsx}"],
3 darkMode: false,
4 theme: {
5 extend: {}
6 },
7 variants: {
8 extend: {}
9 },
10 plugins: []
11}

The final step is to import Tailwind into our CSS and add inside our _app.tsx the import to the styles:

./styles/main.css
1@tailwind base;
2@tailwind components;
3@tailwind utilities;
./pages/_app.tsx
1// Add this line
2import "../styles/main.css";

That's all 🀯

npm
1npm run dev
yarn
1yarn dev

Now at http://localhost:3000 you have a fully functional runtime environment. Throughout this entire post we learned how to configure NextJS with TypeScript, ESLint, Prettier and TailwindCSS. All this to generate a boilerplate ready to be used in any project and create amazing products for our users πŸš€.

- See you at code πŸ‘¨β€πŸ’»