engineering grouparoo next.js node.js
2021-06-03 - Originally posted at https://www.grouparoo.com/blog/distributing-nextjs-via-npm
Grouparoo uses Next.js to build our web frontend(s), and we distribute these frontend User Interfaces (UIs) via NPM as packages, e.g.
@grouparoo/ui-community. This allows Grouparoo users to choose which UI they want to use (or none) by changing their
package.json for a Grouparoo project:
Here is how we bundle up our Next.js applications so that our customers can use them out of the box.
npm run prepare
The first step in “compiling” your Next.js projects is to use the
next build command. We alias this to the “prepare” npm lifecyle command so that this command will be run automatically before
npm publish. In this way we can ensure that we always have a freshly built bundle to use when we publish our packages.
This is different from Next’s recommendation to alias
next build to
npm build because we are not “deploying” our sites - we are publishing them. Many hosting providers look for a
build script in your
pacakge.json to run when the deploy, hence Next.js’ recommendation.
The next step in bundling up a Next.js application for deployment via NPM is to include the build files. In all Next.js projects, you want to ignore the
.next folder in your
.next folder should be ignored, and rebuilt as needed from the source.
BUT… the content of
.next into our NPM bundles. However, we still want to exclude these rapidly changing files from
The solution is a
.npmignore file! By default, NPM will use a
.gitignore file to determine which files it packs up into your packages, and which files it ignores. But, you can override this behavior by placing a
.npmignore in your project. For example:
.DS_Store node_modules .next
.DS_Store node_modules # .next is included
The final thing we learned is that while the contents of the
.next directory are needed for your visitors, not everything is needed. We saw that we were shipping 300mb packages to NPM for our Next.js UIs. We dug into the
.next folder and learned that if you opt-into Webpack v5 for your Next.js site, large
.next/cache/*.pack files will be created to speed up how Webpack works. This is normal behavior, but we were inadvertently publishing these large files to NPM! We added the
.next/cache/* directory to our
.npmignore and our build sizes went down to a more reasonable 20mb.
.npmignore looks like this:
.DS_Store node_modules .next/cache/*