Getting Started with Next.js, Storybook, Tailwind CSS, and Playwright: A Beginner's Guide.
Tags: webdev, nextjs, typescript, tailwindcss
Published: 2023-03-30 08:53:56

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**

1. Node.js installed in you machine
2. Package management tool like pnpm, yarn or npm
3. 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](https://tailwindcss.com/docs/installation/using-postcss), 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](https://nextjs.org/docs/getting-started)
[Tailwind CSS Docs](https://tailwindcss.com/docs/installation)
[Storybook/next docs](https://www.npmjs.com/package/@storybook/nextjs?activeTab=readme)
[Playwright](https://www.npmjs.com/package/@playwright/test)