Use the local components library when developing components instead of having to publish to NPM every time.

You have 2 ways to use the components library locally.

1. Put the component library and Next.js site in sibling folders:

.
├── stackbit-components
└── nextjs-site

1. edit the nextjs-site/package.json and replace the package with a localpath

"@stackbit/components": "file:../stackbit-components/dist"

1. edit the nextjs-site/next.config.js to use alias. This fixes the symlink problem.

  // next.config.js
  module.exports = {
  ...
  webpack: (config, { webpack, isServer }) => {
    config.resolve.alias['react'] = path.resolve('./node_modules/react');
    config.resolve.alias['react-dom'] = path.resolve('./node_modules/react');
    return config;
  },
    ...
  };

1. Put the component library and Next.js site in sibling folders:

.
├── stackbit-components
└── nextjs-site

1. Follow the steps above to import the component library into a Next.js site
2. Run npm run dist inside stackbit-components, this will build the component library and save the artifacts into the dist folder
3. Run npm link inside stackbit-components/dist
4. Run npm link @stackbit/components inside nextjs-site
5. Edit the webpack config in the Next.js site next.config.js to not follow symlinks:

  // next.config.js
  module.exports = {
    ...
    webpack: (config) => {
        config.resolve.symlinks = false;
        return config;
    },
    ...
  };