Though using Bulma with Next.js should be a piece of cake, it's not. It still needs few tweaks that we may need to talk in this article but it will short I swear. So let's get started with it.

Installing dependencies

yarn add bulma
Install Bulma usingΒ 

Because Bulma use SASS, you may also have to install node-sass.

yarn add node-sass
Installing node-sass

Importing bulma to global CSS

Next we have to import bulma to global sytlesheet like this.

@import '~bulma/bulma';
importing bulma to global styles

Or can either include all of it or whatever is required like this

@import '~bulma/sass/grid/columns.sass';

@import '~bulma/sass/layout/section.sass';
@import '~bulma/sass/layout/footer.sass';
Importing only components that is required

Adding Next.js Config

(not required in Next.js 10.0<)

Now next step is to add config into your next config file as we are using SASS here. I have written another article on handling component level SASS in Next.js check it out

yarn add @zeit/next-sass

Create next.config.js, If you already don't have it.

const withSass = require("@zeit/next-sass");
module.exports = withSass();

// If you already have some config

module.exports = withSass({
  target: 'serverless',
  env: {
    JWT_SECRET: process.env.JWT_SECRET
add this to next.config.js


Here is the repo to get you started fast:

Boilerplate to use Bulma with Next.js. Contribute to sarthology/next-js-bulma development by creating an account on GitHub.


Make sure you subscribe to get your knowledge about next.js up to dated. We publish a new article everyweek. See if you next time then.