These days I’m building several next.js apps and want to share some libraries. In the beginning plain js file without compile just work well. But when it comes to jsx component element with sass component-level module, next.js start to fail.

After several tries, I found a solution:

1. Create shared package somewhere
2. Use yarn link to link shared library
3. Use next-transpile-module to transpile library
4. Tada!

More detail

1
2
3
4
5
6
7
8
9
10

# Shared repo
cd shared
yarn init
yarn link

# Some repo
cd some-good-app
yarn link "shared"

yard add next-transpile-modules

Then edit next.config.js

1
2
3

const withTM = require('next-transpile-modules')(['shared'])

module.exports = withTM()

You can now use

1

import awesome_component from 'shared'

in your repository!

Hope this helps you! :)

Reference

• Yarn workspaces example