Getting Started with Next.js, Storybook, Tailwind CSS, and Playwright: A Beginner's Guide.

musinda kadhuwa — Thu, 30 Mar 2023 08:53:56 +0000

This is a beginner's guide to the integration of these wonderful technologies.

Overview

Setup a Next.js project with typescript
Configure Tailwind CSS
Configure Storybook
Configure Playwright

Prerequisite

Node.js installed in you machine
Package management tool like pnpm, yarn or npm
Code editor like vs code.

Next.js

Next.js is a popular React-based framework that makes it easier to build server-side rendered applications. It provides routing out of the box, improved SEO, automatic code splitting(diving your code into smaller chunks that can be loaded on demand,hence reducing the load time), image optimization,built-in CSS support and most importantly Hot Module replacement which helps developers see changes immediately without refreshing the page.

On your command line run one the following:

yarn create next-app --typescript 
or
pnpm create next-app --typescript
or
npx create-next-app@latest --typescript

Follow the prompt by passing the necessary info like app-name e.t.c. this will create a pre-configured next.js application.

Tailwind CSS

This is a utility-first CSS framework that helps developers create responsive and customizable UI's quickly and efficiently.
Unlike traditional CSS framework like Bootstrap or Material-UI with pre-defined components, Tailwind CSS provides a low-level utility classes that can be used to style HTML elements.
There are several ways to add Tailwind CSS to our project as provided in the offical docs, so we will be using the PostCSS.

In the directory containing out next.js project run the following:

yarn add postcss autoprefixer tailwindcss -D
npx tailwindcss init -p

the second command will create two configuration files i.e tailwind.config.js and postcss.config.js

tailwind.config.js

module.exports = {
  content: ["./src/**/*.{ts,tsx, js, jsx}"],
  theme: {
    extend: {},
  },
  plugins: [],
}

postcss.config.js

module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
};

Now we have to add th tailwind directives to our main css file. For our project global.css located in the styles directory.

@tailwind base;
@tailwind components;
@tailwind utilities;

And you can start using tailwind in your project.

Storybook
Storybook is a tool for building and testing isolated UI components in a development environment allowing developers to showcase components visually hence making it easier to collaborate and maintain a consistent design system.

npx storybook@next init

We need to update .storybook/main.js file.

// .storybook/main.js
export default {
  addons: ['@storybook/addon-essentials'],
  framework: {
    name: '@storybook/nextjs',

    options: {},
  },
};

Playwright
Playwright is an open-source testing framework that helps you create and run automated end-to-end tests hence deploy your applications with confidence.

yarn add @playwright/test -D

Add Playwright to the package.json script field.

"scripts": {
  "dev": "next dev",
  "build": "next build",
  "start": "next start",
  "test:e2e": "playwright test",
}

Resources
Next.js Docs
Tailwind CSS Docs
Storybook/next docs
Playwright

DEV Community: musinda kadhuwa

Getting Started with Next.js, Storybook, Tailwind CSS, and Playwright: A Beginner's Guide.