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>
)
}
Now you can run your app by typing yarn run dev in your terminal, you should get the below behavior on your app homepage.
If you find this article helpful, you can also checkout other Next JS videos on Youtube or the Full Stack Next JS Course on Udemy
Top comments (1)
For next@latest no need to add next.config.js to have withCSS, withLess, withSass. nextjs will take care of it. if we add it then we might get error.
I have faced the error so i removed the next.config.js file and then everything working fine.