Speedy and Stylish - How to style NextJS with Bootstrap 5, SASS, and PurgeCSS
Tags: webdev, tutorial, css, nextjs
Published: 2021-06-10 15:33:05

---
title: Speedy and Stylish - How to style NextJS with Bootstrap 5, SASS, and PurgeCSS
published: true
description: A quick and easy how-to for styling Next apps in 2021
tags: webdev,tutorial,css,nextjs
cover_image: https://cdn.hashnode.com/res/hashnode/image/upload/v1623324387302/wOSYm3X6E.jpeg?w=1600&h=840&fit=crop&crop=entropy&auto=compress
canonical_url: https://blog.zack.computer/style-nextjs-with-bootstrap-5-sass-and-purgecss
---

Quick how-to for you today. I'm setting up a new web app project with these parameters:
- I want it to be based on [Next.JS](https://nextjs.org) because it's my favorite React framework.
- I want to style it with [Bootstrap 5](https://getbootstrap.com) because I need more help setting up a consistent theme than Tailwind would give me.
- I want to write the styles in [SASS](https://sass-lang.com) because that's what Bootstrap uses under the hood, which makes customizing the Bootstrap theme easier.
- I want to run the styling through [PurgeCSS](https://purgecss.com) to avoid shipping unnecessary Bootstrap bloat.

# So how do you do that?

## 1. NextJS

Setting up a new NextJS project is foolishly easy. First, pick an [example](https://github.com/vercel/next.js/tree/canary/examples) to base your project on. I personally chose `with-typescript-eslint-jest` because I like writing in Typescript much more than vanilla JS and I like having ESLint in VSCode to automatically style my files when I hit save.

Second, run one of these (depending on whether you want to use npm or yarn), substituting in your chosen example template and replacing `your-project` with the name for your project:
```sh
npx create-next-app -e with-typescript-eslint-jest your-project
```

```sh
yarn create next-app -e with-typescript-eslint-jest your-project
```

> Note that from here onward I'll be writing everything in `yarn` commands, so be sure to substitute `npm` if that's what you're using.

And that's it, you're done. You have a basic Next.JS app ready to go. Start it up with `yarn dev` and see your site running at `http://localhost:3000`.

## 2. Bootstrap 5 in SASS

Next, let's add Bootstrap 5. If you want just a few Bootstrap elements, you can get away with using the [react-bootstrap](https://github.com/react-bootstrap/react-bootstrap) package. Their 2.0 build (based on Bootstrap 5) is in beta release right now. But, I want to build larger, more personalized themes, so I'm going to install Bootstrap directly.

```sh
yarn add bootstrap@^5.0.1
```

This will add Bootstrap's raw source to your node_modules. Now Bootstrap has two parts to it - the styling and the javascript - that combine to create the pretty and pretty functional components.

First, let's add the styling. We're going to write our styles in SASS because it allows us to extend and override values in Bootstrap's themes. You can read more about  [customizing Bootstrap in SASS here](https://getbootstrap.com/docs/5.0/customize/sass/).

Luckily, NextJS ships with built-in support for SASS. So it's as easy as adding the `sass` package and creating `styles/index.scss`:

```sh
yarn add sass
```

```sass
// Example: override to give us a salmon body background
$body-bg: #ffbbbb;

@import "../node_modules/bootstrap/scss/bootstrap";
```

and then importing it in `pages/_app.tsx`:

```typescript
import type { AppProps } from "next/app";
import "../../styles/index.scss";

export default function MyApp({ Component, pageProps }: AppProps) {
  return <Component {...pageProps} />;
}
```

Refresh your development site and you should find the basic Bootstrap "reboot" styles are applied and the background is now a nice salmon color.

Next, the Javascript. We only have to do this if we use one of the dynamic components like `Alert`. If so, we first have to install the `popper` dependency:
```sh
yarn add @popperjs/core
```

Then, we use [Bootstrap's recommendations](https://getbootstrap.com/docs/5.0/getting-started/webpack/#importing-javascript) on importing their JS into a Webpack environment. In `_app.tsx` pick one of these:
```typescript
// If you want to pull in the whole Bootstrap JS library:
import "bootstrap";

// If you only need a single component:
import Alert from "bootstrap/js/dist/alert";
```

These each tell Webpack to include the relevant source file(s) in the final bundle it makes when we build our app for production or export.

## 3. Keep it trim with PurgeCSS

One of the advantages of TailwindCSS over Bootstrap has been that it automatically trims out the bloat of the framework that you don't use, so you don't wind up shipping styling for `<table>` elements if you don't use any on your site. It accomplishes this through  [PurgeCSS](https://purgecss.com), which is trivial for it because it is based on [PostCSS](https://github.com/postcss/postcss) and dynamic style generation in the first place.

NextJS ships with PostCSS already, so we can give Bootstrap this same superpower by adding PurgeCSS to Next. Unfortunately, as the  [PurgeCSS page on this](https://purgecss.com/guides/next.html) notes, customizing PostCSS turns off NextJS's built in optimizations, so we have to recreate them. Luckily, this isn't hard. First, install the packages we need:

```sh
yarn add -D autoprefixer postcss @fullhuman/postcss-purgecss postcss-flexbugs-fixes postcss-preset-env
```

Now that the pieces are in place, we put them all into our build pipeline by creating a custom `postcss.config.js` file in our project's root folder:

```javascript
module.exports = {
  plugins: [
    "postcss-flexbugs-fixes",
    [
      "postcss-preset-env",
      {
        autoprefixer: { flexbox: "no-2009" },
        stage: 3,
        features: { "custom-properties": false }
      }
    ],
    [
      "@fullhuman/postcss-purgecss",
      {
        content: ["./src/**/*.{js,jsx,ts,tsx}", "./pages/**/*.{js,jsx,ts,tsx}"],
        defaultExtractor: (content) => content.match(/[\w-/:]+(?<!:)/g) || [],
        safelist: ["html", "body"]
      }
    ]
  ]
};
```

The first half of this file is pulled directly from [NextJS's documentation](https://nextjs.org/docs/advanced-features/customizing-postcss-config#customizing-plugins) on customizing PostCSS. The second half adds in PurgeCSS and configures it to remove all classes whose names do not appear in the `src` or `pages` directories. It also tells it to manually to leave any `html` or `body` styles alone, since those two elements are rendered outside of the scope of our Next project's source files.

Ok, so refresh your local dev build again and... nothing changes! This is intentional - PurgeCSS *shouldn't* be purging any classes that are used. This also includes the styles we need in Reboot - Bootstrap's cross-browser standardizing stylesheet. If we use an element type that Reboot standardizes, then PurgeCSS will recognize that and won't touch the corresponding style.

# That's it

There you go - an easy 1, 2, 3 and now you have a new NextJS project set up with efficiently and intelligently trimmed-down Bootstrap 5 styling. Hope this is helpful for you while you're setting up a project.