Published on March 8, 2025 by Richard Beermier
Introduction
Bootstrap is a powerful front-end framework that helps developers build responsive and modern websites quickly. When combined with Next.js and its App Router, you get a scalable, performant web application with server-side rendering (SSR) and static site generation (SSG) capabilities. In this guide, we'll walk you through integrating a Bootstrap template into a Next.js 15 App Router application.
Setting Up a Next.js Project
If you haven't already set up a Next.js project, you can do so using the following command:
npx create-next-app@latest my-bootstrap-appOnce the installation is complete, navigate to your project folder:
cd my-bootstrap-appInstalling Bootstrap
To use Bootstrap in your Next.js project, install it via npm:
npm install bootstrapThen, import Bootstrap’s CSS file into your project by adding the following line in app/layout.tsx:
import 'bootstrap/dist/css/bootstrap.min.css';Adding a Bootstrap Template
Downloading the Template
First, download a Bootstrap template of your choice from the official Bootstrap site or a marketplace like ThemeForest or Start Bootstrap.
Organising Template Files
Extract the downloaded template and move the required assets (CSS, JS, images) into the public folder of your Next.js project. This ensures that Next.js serves them correctly.
Integrating Template Components
Next, open the template’s HTML file and copy the relevant sections into Next.js components. For example, create a new component called Navbar.tsx inside the components folder:
import React from 'react';
const Navbar = () => (
<nav className="navbar navbar-expand-lg navbar-light bg-light">
<a className="navbar-brand" href="#">My App</a>
</nav>
);
export default Navbar;
Updating the Layout File
Modify app/layout.tsx to include the Bootstrap components:
import Navbar from '../components/Navbar';
export default function RootLayout({ children }) {
return (
<html lang="en">
<head></head>
<body>
<Navbar />
{children}
</body>
</html>
);
}
Adding Bootstrap JavaScript
Bootstrap requires JavaScript for some components like modals and dropdowns. Import it in app/layout.tsx using:
import 'bootstrap/dist/js/bootstrap.bundle.min.js';Testing the Application
Now, start your Next.js development server to see the Bootstrap template in action:
npm run devVisit http://localhost:3000 in your browser, and you should see your Bootstrap template successfully integrated into your Next.js App Router application.
Conclusion
Integrating a Bootstrap template into a Next.js App Router application is a straightforward process. By following these steps, you can leverage the power of Bootstrap's design system while benefiting from Next.js’s performance optimisations. Happy coding!
