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.

human hand rising from the ocean
Photo by nikko macaspac on Unsplash

0. Nextjs Starter Templates Example’s Directory

Examples:

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

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.jsmodule.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.tsximport '../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.

A student of the world ; My brain has too many tabs open ; 🇰🇪; www.muguku.co.ke