This guide will help you throught the process of configuring bootstrap-italia in your NextJS app
During this process you will probably face errors related to unrecognized static assets (csv, svg, fonts etc.) that can be solved quite simply in NextJS app using specific webpack config and NextJS components.
Install Bootstrap-Italia
First of all, install bootstrap-italia in your NextJS app:
npm 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 (boostrap-italia) in to the project build folder using webpack:
npm i --save-dev copy-webpack-plugin
This will install a new plugin that we have to use inside our next.config.js:
const CopyPlugin = require("copy-webpack-plugin");
const path = require("path");
// Prepare from/to
const from = "node_modules/bootstrap-italia/dist/";
const to = path.join(__dirname, "./public/bootstrap-italia/dist");
const nextConfig = {
webpack: (config, { buildId, dev, isServer, defaultLoaders, webpack }) => {
config.plugins.push(
new CopyPlugin({
patterns: [{ from, to }],
})
);
return config;
},
};
module.exports = nextConfig;
Next time you run your app you will see a new folder, inside public, called bootstrap-italia with all assets required to work with NextJS app.
You can choose to copy these files statically executing a Copy/Paste operation but I prefer this solution to automatically include updates when necessary (when the bootstrap-italia package will be updated).
Configure _app.js
Import basic CSS globally in _app.js adding this code on top of the file:
import "bootstrap-italia/dist/css/bootstrap-italia.min.css";
const App = ({ Component, pageProps }) => {
return <Component {...pageProps} />;
};
export default App;
Configure Script TAG
Supposing you have a common set of elements necessary to display your page and there exists a file called Layout where all the UX logic starts, you have to add a link to the javascript bundle required by bootstrap-italia to work correctly with you project, like in the example below:
import Header from "./Header";
import React from "react";
import Script from "next/script";
const Layout = ({ children }) => (
<div>
<Header />
{children}
<Script src="bootstrap-italia/dist/js/bootstrap-italia.bundle.min.js" />
</div>
);
export default Layout;
Now you are ready to see a running NextJS app with bootstrap-italia UX.
Top comments (0)