Using Next.JS with BulmaCSS

Using BulmaCSS together with Next.JS is quite simple and just requires a few simple configuration steps:

Create a new Next.JS app

npx create-next-app@latest --typescript

Install Bulma via NPM

npm install bulma

Install sass via NPM

We need to enable Next.js built-in Sass support, and for that, we will need to install sass in our app.

npm install sass

Modify your global.css file

Since BulmaCSS mainly works with scss, we can modify the extension of our global.css file to global.scss .

Add Bulma to your new globals.css file

@import '../node_modules/bulma/bulma.sass';

You can add to the top of the file and delete the rest of the content as you will most likely not need it.

Modify your _app.tsx file

Now we modify our _app.tsx to load globals.scss instead of globals.css

Your app is now fully working with BulmaCSS. 🚀