Setting up your first Next.js project with Tailwind and Jest
Tags: javascript, react, beginners, testing
Published: 2021-09-06 13:53:55

## Introduction

[Next.js](https://nextjs.org/) is a React framework from Vercel that makes creating high-quality apps incredibly simple. With built-in support for server-side rendering, file-based routing and a huge store of examples [on GitHub](https://github.com/vercel/next.js/tree/canary/examples), it's a great way to start building your first JavaScript website.

[Tailwind CSS](https://tailwindcss.com/) is a specialised framework for styling websites. When I started developing web apps, I wondered how I would turn my designs into interactive components. Then I discovered Tailwind, a utility-first tool that provides a number of preset CSS classes that can be used to style your app. It adds a bit of quality to your app and integrates easily with Next.js.

[Jest](https://jestjs.io/) is a testing tool for JavaScript. If you've never tested your code before, Jest is one of the best ways to get started. Testing is definitely worthwhile, as it enforces stability and confidence in your code, and Jest's prevalence in web development makes it a popular topic on Stack Overflow. Which always helps.

By combining these three frameworks, you're starting your project the right way: using great tools, with great communities and great documentation.

For this how-to guide, I'll assume you have your development environment set up. This means you've installed Node.js and Yarn, and you have a code editor ready to go.

Let's get started.

## Setting up Next.js

Next.js is made by [Vercel](https://vercel.com), a team of developers who pride themselves on making easy-to-use, open-source tools, and their flagship framework could not be easier to set up.

Using your preferred terminal (I use [iTerm2](https://iterm2.com/)), navigate to the place you store your projects and type the following command:

```console
$ yarn create next-app
```

This will launch an interactive installation in your terminal where you'll be asked a couple of setup questions.

When prompted, type in your project name, using only [URL-friendly characters](https://stackoverflow.com/questions/695438/what-are-the-safe-characters-for-making-urls):

```console
$ yarn create next-app
? What is your project named? my-first-project
```

Your project name will also double up as name of a new directory the Next installer will create, if it doesn't already exist.

That's all. Next's handy installer will deal with creating your files, setting up your dependencies and creating a `package.json` and you should shortly see `Success`.

Congratulations – you've just created your first Next.js app!

## Integrating Tailwind

Once you've set up Next.js, you're ready to start setting up the styles for your app.

Installing Tailwind is just the same as setting up any other Node package. Navigate to your project's root folder in your terminal and run the following command:

```console
$ yarn add tailwindcss postcss autoprefixer
```

This will install Tailwind and two dependencies that will add extra functionality to your project.

[PostCSS](https://github.com/postcss/postcss) is a tool that exposes your CSS styles as an API for manipulation by a vast array of specially-designed plugins.

One such plugin is [Autoprefixer](https://github.com/postcss/autoprefixer), which handles the addition of browser prefixes to your stylesheets. While browsers largely follow the same CSS standards, there are still variations in the implementation of those standards, particularly if they are experimental. You may have seen code such as the below before:

```css
-webkit-transition: all 5s ease;
-moz-transition: all 5s ease;
-ms-transition: all 5s ease;
-o-transition: all 5s ease;
transition: all 5s ease; 
```

This code defines the length of time animations should take on an element's style changes. This transition API has long been a part of accepted CSS usage but it has not yet been standardized, which means each browser has its own implementation. The prefix indicates that the API is considered experimental, and is intended to give developers access to this API without creating a hard dependency on it.

In reality, features such as CSS animation are now expected in a modern website, and Autoprefixer makes it easier to implement them. The tool, as the name suggests, automatically adds prefixes for your styles to your stylesheets, which means instead of the code above you can simply write the following:

```css
transition: all 5s ease;
```

Autoprefixer will handle the rest.

Now we've added Tailwind, PostCSS and Autoprefixer, it's time to integrate them with Next.js.

Like Vercel, the team at Tailwind is dedicated to making setup as painless as possible, and they've created a specialised tool for that.

Head to your terminal again and run the following command:

```console
$ npx tailwind init -p
```

The command `npx tailwind init` creates a new file, `tailwind.config.js`, in the root of your project folder. Adding the `-p` parameter tells the setup tool to add another file, `postcss.config.js`, which will have Tailwind and Autoprefixer preconfigured.

In your `tailwind.config.js` file, which will look something like the below, you'll see a series of options you can configure to extend the base setup of Tailwind. Check out the [Tailwind docs](https://tailwindcss.com/docs/configuration) for more information on how to do that.

```javascript
// tailwind.config.js
module.exports = {
  purge: [],
  darkMode: false, // or 'media' or 'class'
  theme: {
    extend: {},
  },
  variants: {
    extend: {},
  },
  plugins: [],
}
```

One option we want to edit is `purge`, which will help Tailwind remove unused styles from your stylesheets which will speed up your website. This is a great feature to implement because Tailwind's API is vast and it's unlikely you'll be using all of it in your app.

Add the `pages` folder that has been created by `yarn create next-app` to the `purge` array, using a wildcard to pick up any files it contains:

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

Now head to the `globals.css` file, which has been created by `yarn create next-app` in the `styles` folder. You'll see a number of preconfigured styles which relate to the example page that has been set up, but we won't be needing them so you can replace the entire contents of the `globals.css` file with the following code:

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

These three lines will be converted by Tailwind into full stylesheet definitions, based on your usage and setup.

Double-check that your newly-edited `globals.css` file is being imported into the `pages/_app.js` file, which should look something like the below:

```javascript
// pages/_app.js
import '../styles/globals.css'

function MyApp({ Component, pageProps }) {
  return <Component {...pageProps} />
}

export default MyApp
```

This file defines the base component of your Next.js app. For more information on the App component and how to customise it, check out [Next.js docs](https://nextjs.org/docs/advanced-features/custom-app).

You've now successfully set up Tailwind with Next.js!

## Setting up Jest
Finally, we're going to add testing to your project. While Jest's website claims setup requires ["zero config"](https://jestjs.io/#:~:text=zero%20config), that's not entirely correct when it comes to Next.js.

First, install Jest via your terminal, using `-D` to specify that you're installing a developer dependency:

```console
$ yarn add -D jest babel-jest
```

We're also adding an extra tool, `babel-jest`, which will help to ensure our testing library integrates correctly with Next.js.

Open your `package.json` and add a script for running tests:

```json
// package.json
...
"scripts": {
  "dev": "next dev",
  "build": "next build"
  "start": "next start",
+ "test": "yarn jest --watch",  
}
...
```

Once you've saved your `package.json`, you'll be able to run `yarn test` in your terminal and it will automatically run `jest` in `watch` mode, where it will continually run your tests in the background while you update your code.

Having installed Jest, you need to create a new file called `.babelrc` to configure the `babel-jest` tool you installed earlier.

Inside the file, add the following code:

```json
{
  "presets": ["next/babel"]
}
```

You've now successfully configured Jest to work with Next.js. All you need to do now is start [writing tests](https://jestjs.io/docs/en/getting-started)!

## Conclusion

Congratulations – you've successfully set up your first Next.js project, with a utility-first style system and a testing library!

You're giving your React project the best start in life by using these frameworks, and I hope you'll find them as easy to use as I have.

Here are the links to the documentation of each framework to learn more about them:

- [Next.js docs](https://nextjs.org/docs/getting-started)
- [Tailwind docs](https://tailwindcss.com/docs)
- [Jest docs](https://jestjs.io/docs/en/getting-started)

## One more thing...

Setting up your own project is one of the most enjoyable parts of software development, like unwrapping presents or opening a new book for the first time.

If, however, you want to skip that part and simply head straight to the coding, you can use my [template project](https://github.com/jayhoogle/my-first-project) with Next.js, Tailwind and Jest already set up to hit the ground running.

Enjoy!

Originally written by [James Calmus](https://javascript.works-hub.com/users/5d7362aa-3c4f-4d00-a474-3ca68e1e696e?utm_source=dev_to&utm_medium=blog_xpost) for [JavaScript Works](https://javascript.works-hub.com/learn/setting-up-your-first-next-dot-js-project-with-tailwind-and-jest-96018?utm_source=dev_to&utm_medium=blog_xpost)