Add Bootstrap to Next.js App
Tags: nextjs, react, bootstrap, javascript
Published: 2020-11-24 16:14:35

If you are familiar with bootstrap, you can agree that it is one of the fastest and easiest ways of developing the frontend of a web application, as it saves time on styling and responsive adaptation.

In this article, I will go over how you can configure your Next JS application to use bootstrap.

First set up your next js application
```
yarn create next-app next-strap
```

Next we install the desired packages
```
yarn add @zeit/next-css @zeit/next-less @zeit/next-sass next-images bootstrap react-bootstrap 
```

These packages will allow us configure image, css, less and sass support for our next app, bootstrap and react-bootstrap are however needed to use bootstrap in our app.

To read more on `react-bootstrap`, visit [React Bootstrap](https://react-bootstrap.github.io/).

Now we create our next config file which will our asset support  packages, create this file in the root of your app named "next.config.js"

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/0s2bd1khmx9u676ssf5d.JPG)

Fill it with the code below;
```js
const withSass = require('@zeit/next-sass');
const withImages = require('next-images');
const withLess = require('@zeit/next-less')
const withCSS = require('@zeit/next-css')

module.exports = withCSS(withLess(withImages(withSass({
  env: {
    ANY_ENV_KEY: "ANY_ENV_VARIABLE"
  }
}))));
```

Inside our config, I added an env object which will contain any environment variable you wish to include in your Next JS app.

Now add the following imports to the `pages/_app.js` file
```js
import 'bootstrap/dist/css/bootstrap.min.css'
```

New `_app.js` should look like
```js
import '../styles/globals.css'
import 'bootstrap/dist/css/bootstrap.min.css'

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

export default MyApp
```

In our `pages/index` file, I'll clear the content leaving only the head;
```js
import Head from 'next/head'
import styles from '../styles/Home.module.css'

export default function Home() {
  return (
    <div className={styles.container}>
      <Head>
        <title>Create Next App</title>
        <link rel="icon" href="/favicon.ico" />
      </Head>

      
    </div>
  )
}
```

I will proceed to attach a bootstrap component to this page, go over to the [React Bootstrap Carousel Component](https://react-bootstrap.github.io/components/carousel/).

Copy the first sample code into your `pages/index` file, also import the Carousel from `react-bootstrap`, thus making the code;

```js
import Head from 'next/head'
import styles from '../styles/Home.module.css'
import { Carousel } from 'react-bootstrap'

export default function Home() {
  return (
    <div className={styles.container}>
      <Head>
        <title>Create Next App</title>
        <link rel="icon" href="/favicon.ico" />
      </Head>

      <Carousel>
        <Carousel.Item>
          <img
            className="d-block w-100"
            src="holder.js/800x400?text=First slide&bg=373940"
            alt="First slide"
          />
          <Carousel.Caption>
            <h3>First slide label</h3>
            <p>Nulla vitae elit libero, a pharetra augue mollis interdum.</p>
          </Carousel.Caption>
        </Carousel.Item>
        <Carousel.Item>
          <img
            className="d-block w-100"
            src="holder.js/800x400?text=Second slide&bg=282c34"
            alt="Third slide"
          />

          <Carousel.Caption>
            <h3>Second slide label</h3>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
          </Carousel.Caption>
        </Carousel.Item>
        <Carousel.Item>
          <img
            className="d-block w-100"
            src="holder.js/800x400?text=Third slide&bg=20232a"
            alt="Third slide"
          />

          <Carousel.Caption>
            <h3>Third slide label</h3>
            <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur.</p>
          </Carousel.Caption>
        </Carousel.Item>
      </Carousel>
    </div>
  )
}

```
Now add some background image for your carousel slider, I'll be using a placeholder; `https://placehold.it/800x400?text=800x400` for my background, feel free to use whatever you prefer.

My final code would look like;
```js
import Head from 'next/head'
import styles from '../styles/Home.module.css'
import { Carousel } from 'react-bootstrap'

export default function Home() {
  return (
    <div className={styles.container}>
      <Head>
        <title>Create Next App</title>
        <link rel="icon" href="/favicon.ico" />
      </Head>
      
      <Carousel>
        <Carousel.Item>
          <img
            className="d-block w-100"
            src="https://placehold.it/800x400?text=800x400"
            alt="First slide"
          />
          <Carousel.Caption>
            <h3>First slide label</h3>
            <p>Nulla vitae elit libero, a pharetra augue mollis interdum.</p>
          </Carousel.Caption>
        </Carousel.Item>
        <Carousel.Item>
          <img
            className="d-block w-100"
            src="https://placehold.it/800x400?text=800x400"
            alt="Third slide"
          />

          <Carousel.Caption>
            <h3>Second slide label</h3>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
          </Carousel.Caption>
        </Carousel.Item>
        <Carousel.Item>
          <img
            className="d-block w-100"
            src="https://placehold.it/800x400?text=800x400"
            alt="Third slide"
          />

          <Carousel.Caption>
            <h3>Third slide label</h3>
            <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur.</p>
          </Carousel.Caption>
        </Carousel.Item>
      </Carousel>
    </div>
  )
}

```

Now you can run your app by typing `yarn run dev` in your terminal, you should get the below behavior on your app homepage.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/g42pudv3cmltc315sv0d.gif)

If you find this article helpful, you can also checkout other Next JS videos on [Youtube](https://www.youtube.com/watch?v=Vu3g4UHdCrQ&list=PLdyQLyByx6i2xprAWh2_AtMqp9zHQNN1U) or the [Full Stack Next JS Course on Udemy](https://www.udemy.com/course/full-stack-nextjs-with-redux-express-mongodb/?couponCode=9DAA0446C06878756A4B)