Setting up your first Next.js project with Tailwind and Jest

Introduction

Next.js 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, it's a great way to start building your first JavaScript website.

Tailwind CSS 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 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, 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), navigate to the place you store your projects and type the following command:

$ 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:

$ 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:

$ yarn add tailwindcss postcss autoprefixer

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

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, 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:

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

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:

$ 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 for more information on how to do that.

// 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:

// 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:

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

// 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.

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", 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:

$ 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:

// 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:

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

You've now successfully configured Jest to work with Next.js. All you need to do now is start writing tests!

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
• Tailwind docs
• Jest docs

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 with Next.js, Tailwind and Jest already set up to hit the ground running.

Enjoy!