Next公式Exampleの以下を参考にします。
https://github.com/vercel/next.js/tree/canary/examples/with-yarn-workspaces
How to useに記載がある以下のコマンドでプロジェクトを作成します。
yarn create next-app --example with-yarn-workspaces with-yarn-workspaces-app
yarnを実行
yarn
初期状態ではpackage.jsonの設定がnpm用になっているので、warningが出ます。
warning Missing name in workspace at "/with-yarn-workspaces-app-yarn/packages/bar", ignoring.
warning Missing name in workspace at "/with-yarn-workspaces-app-yarn/packages/foo", ignoring.
warning Missing name in workspace at "/with-yarn-workspaces-app-yarn/packages/web-app", ignoring.
yarn用に設定を追加していきます。
- packages/web-app/package.json
nameとversionを追加します。
{
"name": "@project/web-app",
"version": "1.0.0",
"private": true,
"scripts": {
割愛- packages/bar/package.json
- packages/foo/package.json
同様に、
nameとversionを追加します。
{
"name": "@project/bar",
"version": "1.0.0",
"private": true,
割愛yarnを実行
% yarn
yarn install v1.22.17
[1/4] 🔍 Resolving packages...
中略
[4/4] 🔨 Building fresh packages...
success Saved lockfile.
✨ Done in 0.56s.
yarnが問題なく完了しました。
['bar'] -> ['@project/bar'] に変更します。
const withTM = require('next-transpile-modules')(['@project/bar'])
module.exports = withTM()packages/web-app/pages/index.js
import foo from '@project/foo'
import Bar from '@project/bar'
export default function Home() {
yarnのworkspaceを使うように変更します。 （yarn --cwdのままでも動作はするようです）
"scripts": {
"dev": "yarn workspace @project/web-app dev",
"build": "yarn --cwd packages/web-app build",
"start": "yarn --cwd packages/web-app start"
}Deploy it to the cloud with Vercel (Documentation).
Choose packages/web-app as root directory when deploying.
next-transpile-modulesはNextのバージョンと対になるバージョンを選択する必要があります。
https://github.com/martpie/next-transpile-modules#compatibility-table
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent