Next.js Workspaces Plugin
This plugin makes using Yarn workspaces with Next.js dead simple.
The new externalDir
and other solutions never seem to give the
desired results when using a monorepo with Yarn workspaces.
Install
yarn add @saas-ui/next-workspaces
Usage
Edit your next.config.js
file
const withWorkspaces = require('@saas-ui/next-workspaces')
module.exports = withWorkspaces({
workspaces: ['packages'],
basePath: '../', // The root folder of your monorepo relative to your Next.js app.
})({
// your next config
})
Q&A
If your workspace contains public packages, you may need to make some changes to the package.json of the local package(s). Webpack needs to know where your source files are located, otherwise it'll fail to find your package if they aren't build yet.
Assuming you are using Typescript, it will look something like this:
{
"name": "@org/package",
"source": "src/index.ts",
"exports": {
"require": "./dist/index.cjs",
"development": "./src/index.ts", // This tells webpack to import the source files
"import": "./dist/index.esm.mjs"
},
"main": "./dist/index.cjs",
"module": "./dist/index.esm.js",
"types": "./dist/index.d.ts",
// ...
}
License
MIT