Setting up NextJs with Typescript, Tailwind CSS, React Testing Library, Jest, Prettier, and ESlint

Set up your Next.js project with TypeScript, Tailwind, React Testing Library, Jest, Prettier, and ESlint.

Photo by nikko macaspac on Unsplash

TL;DR:

1. Official Next.js starter templates here
2. Github repo for this tutorial here

0. Nextjs Starter Templates Example’s Directory

There’s a directory in the nextjs GitHub repo that most people ignore, the example’s directory! It contains numerous nextjs starter templates with various partner technologies. Some of these include nextjs with: typescript, tailwind, apollo, urql, relay, redux, chakra ui, docker, react bootstrap, reactstrap, styled components, jest, testing library, etc. All you need to start a nextjs project with any of these templates is to run the create-next-app cli tool with a — example flag.

Examples:

1. NextJs with tailwind css

npx create-next-app --example with-tailwindcss name-of-your-project

2. NextJs with typescript

npx create-next-app --example with-typescript name-of-your-project

You catch the drift. To initialize a nextjs app with a partner technology:

npx create-next-app --example with-technology name-of-your-project

provided the with-technology directory exists in the nextjs repo examples directory. Pretty nifty if you ask me!

1. NextJs with Typescript, React Testing Library, Jest, ESlint, and Prettier (no Tailwind)

npx create-next-app --example with-typescript-eslint-jest name-of-your-project

2. Add tailwind

a) Change working directory to the project directory

cd name-of-your-project

b) Follow tailwind’s official documentation instructions to set up tailwind with nextjs

i. Install Tailwind and its peer-dependencies

yarn add tailwindcss@latest postcss@latest autoprefixer@latest

ii. Create tailwind config files

npx tailwindcss init -p

This will create tailwind.config.js and postcss.config.js files in the root directory. They are tailwindcss and postcss (tailwinds peer dependency) config files.

iii. Tree-shaking

Configure Tailwind to remove unused styles in production. In your tailwind.config.js file, configure the purge option with the paths to all of your pages and components so Tailwind can tree-shake unused styles in production builds. Like so:

// tailwind.config.js
module.exports = {
purge: ['./pages/**/*.{js,ts,jsx,tsx}', './components/**/*.{js,ts,jsx,tsx}'],
darkMode: false, // or 'media' or 'class'
theme: {
extend: {},
},
variants: {
extend: {},
},
plugins: [],
}

iv. Create a styles directory inside the root directory and a globals.css inside it

mkdir styles #create styles directory
touch styles/globals.css #create globals.css file

v. Include Tailwind in your CSS

Open the ./styles/globals.css file and use the @tailwind directive to include Tailwind's base, components, and utilities styles. Like so:

/* ./styles/globals.css */
@tailwind base;
@tailwind components;
@tailwind utilities;

vi. Create the _app.tsx component inside pages directory.

touch pages/_app.tsx #create _app.tsx file

vii. import your global css file in your pages/_app.tsx component. Like so:

// pages/_app.tsx
import '../styles/globals.css'
function MyApp({ Component, pageProps }) {
return <Component {...pageProps} />
}
export default MyApp

You’re done! Now when you run yarn dev, Typescript, Tailwind CSS, React Testing Library, Jest, Prettier, and ESlint will be ready to use in your Next.js project.