Add Bootstrap to Next.js App

#nextjs #react #bootstrap #javascript

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.

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"

Fill it with the code below;

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

import 'bootstrap/dist/css/bootstrap.min.css'

New _app.js should look like

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;

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.

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

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;

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>
  )
}