Bootstrap Italia Design Kit with Next.js

This guide will help you through the process of configuring Bootstrap Italia in your Next.js app.

During this process, you will probably face errors related to unrecognized static assets (CSV, SVG, fonts, etc.) that can usually be solved in a Next.js app using a specific webpack configuration and Next.js components.

Install Bootstrap-Italia

First of all, install Bootstrap Italia in your Next.js app:

1npm i -S bootstrap-italia

Configure Webpack

Now you have to install a plugin, copy-webpack-plugin, required to move static assets from the node_modules folder (bootstrap-italia) into the project build folder using webpack:

1npm i --save-dev copy-webpack-plugin

This will install a new plugin that we have to use inside our next.config.js:

 1const CopyPlugin = require("copy-webpack-plugin");
 2const path = require("path");
 3// Prepare from/to
 4const from = "node_modules/bootstrap-italia/dist/";
 5const to = path.join(
 6  __dirname,
 7  "./public/bootstrap-italia/dist"
 8);
 9const nextConfig = {
10  webpack: (config, {
11    buildId, dev, isServer, defaultLoaders, webpack
12  }) => {
13    config.plugins.push(
14      new CopyPlugin({
15        patterns: [{ from, to }],
16      })
17    );
18    return config;
19  },
20};
21module.exports = nextConfig;

The next time you run your app, you will see a new folder inside public called bootstrap-italia, with all the assets required to work with a Next.js app.

You can choose to copy these files statically by using a copy-and-paste operation, but I prefer this solution because it automatically includes updates when the bootstrap-italia package is updated.

Configure \_app.js

Import the base CSS globally in \_app.js by adding this code at the top of the file:

1import "bootstrap-italia/dist/css/bootstrap-italia.min.css";
2
3const App = ({ Component, pageProps }) => {
4  return <Component {...pageProps} />;
5};
6export default App;

Configure Script Tag

Suppose you have a common set of elements needed to display your page, and there is a file called Layout where all the UX logic starts. In that case, you have to add a link to the JavaScript bundle required by Bootstrap Italia to work correctly with your project, as in the example below:

 1import Header from "./Header";
 2import React from "react";
 3import Script from "next/script";
 4const Layout = ({ children }) => (
 5  <div>
 6    <Header />
 7    {children}
 8    <Script
 9      src="bootstrap-italia/dist/js/bootstrap-italia.bundle.min.js"
10    />
11  </div>
12);
13export default Layout;

Now you are ready to see a running Next.js app with Bootstrap Italia UX.