How to use Bulma with Next.js

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

TLDR;

Here is the repo to get you started fast:

Conclusion

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.