nextjs monorepo example
1.0.0
Концепции, монорепо, советы и хитрости, ориентированные вокруг NextJs
Howtos для Monorepo. Новичок в Monorepos? Проверьте этот FAQ. Этот пример управляется Turborepo и Yarn 4 с подходом A / TypeScript Path -Aliases. Не единственный способ сделать.
Полезно для
Если вы наслаждаетесь некоторыми из моих работ OSS в вашей компании, я бы очень признателен о спонсорстве, кофе или сброшенной звезде. Это дает мне больше времени, чтобы улучшить его до следующего уровня.
| Спеля | Embie.be | Вертел |
corepack enable
yarn install .
├── apps
│ ├── nextjs-app (i18n, ssr, api, vitest)
│ └── vite-app
└── packages
├── common-i18n (locales...)
├── core-lib
├── db-main-prisma
├── eslint-config-bases (to shared eslint configs)
└── ui-lib (emotion, storybook)
Приложения не должны зависеть от приложений, они могут зависеть от пакетов
Приложения могут зависеть от пакетов, пакеты могут зависеть друг от друга ...
.
├── apps
│ ├── vite-app (Vite app as an example)
│ │ ├── src/
│ │ ├── package.json (define package workspace:package deps)
│ │ └── tsconfig.json (define path to packages)
│ │
│ └── nextjs-app (NextJS app with api-routes)
│ ├── e2e/ (E2E tests with playwright)
│ ├── public/
│ ├── src/
│ │ └── pages/api (api routes)
│ ├── CHANGELOG.md
│ ├── next.config.mjs
│ ├── package.json (define package workspace:package deps)
│ ├── tsconfig.json (define path to packages)
│ └── vitest.config.ts
│
├── packages
│ ├── core-lib (basic ts libs)
│ │ ├── src/
│ │ ├── CHANGELOG.md
│ │ ├── package.json
│ │ └── tsconfig.json
│ │
│ ├── db-main-prisma (basic db layer with prisma)
│ │ ├── e2e/ (E2E tests)
│ │ ├── prisma/
│ │ ├── src/
│ │ ├── CHANGELOG.md
│ │ ├── package.json
│ │ └── tsconfig.json
│ │
│ ├── eslint-config-bases
│ │ ├── src/
│ │ ├── CHANGELOG.md
│ │ ├── package.json
│ │ └── tsconfig.json
│ │
│ └── ui-lib (basic design-system in react)
│ ├── src/
│ ├── CHANGELOG.md
│ ├── package.json
│ └── tsconfig.json
│
├── static (no code: images, json, locales,...)
│ ├── assets
│ └── locales
├── docker (docker...)
│ ├── .dockerignore
│ ├── docker-compose.yml (compose specific for nextjs-app)
│ ├── docker-compose.db.yml (general services like postgresql...)
│ └── Dockerfile (multistage build for nextjs-app)
├── .yarnrc.yml
├── package.json (the workspace config)
└── tsconfig.base.json (base typescript config)
{
"name" : "nextjs-monorepo-example" ,
// Set the directories where your apps, packages will be placed
"workspaces" : [ "apps/*" , "packages/*" ] ,
//...
} Менеджер пакетов сканирует эти каталоги и будет искать package.json . Их контент используется для определения топологии рабочей области (приложения, LIBS, зависимости ...).
Создайте папку в каталоге ./packages/ с именем вашего пакета.
mkdir packages/magnificent-poney
mkdir packages/magnificent-poney/src
cd packages/magnificent-poneyИнициализируйте Package.json с именем вашего пакета.
Вместо того, чтобы набирать
yarn init, предпочитайте взять в качестве рабочего примера.
{
"name" : "@your-org/magnificent-poney" ,
"version" : "0.0.0" ,
"private" : true ,
"scripts" : {
"clean" : "rimraf ./tsconfig.tsbuildinfo" ,
"lint" : "eslint . --ext .ts,.tsx,.js,.jsx" ,
"typecheck" : "tsc --project ./tsconfig.json --noEmit" ,
"test" : "run-s 'test:*'" ,
"test:unit" : "echo "No tests yet"" ,
"fix:staged-files" : "lint-staged --allow-empty" ,
"fix:all-files" : "eslint . --ext .ts,.tsx,.js,.jsx --fix" ,
} ,
"devDependencies" : {
"@your-org/eslint-config-bases" : "workspace:^" ,
} ,
}Сначала добавьте пакет в пакет приложения. Рекомендуемый способ состоит в том, чтобы использовать протокол рабочей области, поддерживаемый пряжей и PNPM.
cd apps/my-app
yarn add @your-org/magnificent-poney@ ' workspace:^ 'Вдохновение можно найти в приложениях/nextjs-app/package.json.
{
"name" : "my-app" ,
"dependencies" : {
"@your-org/magnificient-poney" : "workspace:^" ,
} ,
} Затем добавьте псевдоним пута TypeScript в приложение tsconfig.json. Это позволит вам импортировать его напрямую (не требуется сборка)
Вдохновение можно найти в приложениях/nextjs-app/tsconfig.json.
{
"compilerOptions" : {
"baseUrl" : "./src" ,
"paths" : {
// regular app aliases
"@/components/*" : [ "./components/*" ] ,
// packages aliases, relative to app_directory/baseUrl
"@your-org/magnificent-poney/*" : [
"../../../packages/magnificent-poney/src/*" ,
] ,
"@your-org/magnificent-poney" : [
"../../../packages/magnificent-poney/src/index" ,
] ,
} ,
} ,
}PS:
- Не пытайтесь устанавливать псевдонимы в глобальном Tsonfig.base.json, чтобы сохранить строгие с графическими зависимостями.
- Звезда в
@your-org/magnificent-poney/*позволяет импортировать подпапки. Если вы используете файл ствола (index.ts), псевдоним со звездой можно удалить.
Отредактируйте свой next.config.mjs и включите вариант Experimental.externaldir. Отзывы здесь.
const nextConfig = {
experimental : {
externalDir : true ,
} ,
} ;Если вы используете более старую версию NextJS и у вас нет экспериментального флага, вы можете просто переопределить конфигурацию WebPack.
const nextConfig = {
webpack : ( config , { defaultLoaders } ) => {
// Will allow transpilation of shared packages through tsonfig paths
// @link https://github.com/vercel/next.js/pull/13542
const resolvedBaseUrl = path . resolve ( config . context , "../../" ) ;
config . module . rules = [
... config . module . rules ,
{
test : / .(tsx|ts|js|jsx|json)$ / ,
include : [ resolvedBaseUrl ] ,
use : defaultLoaders . babel ,
exclude : ( excludePath ) => {
return / node_modules / . test ( excludePath ) ;
} ,
} ,
] ;
return config ;
} ,
} ;PS: Если ваш общий пакет использует Bundler SCSS ... Пользовательская конфигурация WebPack будет необходима или использовать следующие модулы, см. FAQ ниже.
Пакеты теперь связаны с вашим приложением, просто импортируйте их как обычные пакеты: import { poney } from '@your-org/magnificent-poney' .
Необязательный
Если вам нужно поделиться некоторыми пакетами за пределами Monorepo, вы можете опубликовать их в NPM или частных репозиториях. Пример, основанный на Microbundle, присутствует в каждом пакете. Управление версиями и публикациями можно сделать с помощью Atlassian/ChangeSet, и это просто, как печатать:
$ yarn g:changesetСледуйте инструкциям ... и совершите файл изменений. «Пакеты версий» P/R появится после проверки CI. При его слиянии, действие GitHub опубликует пакеты с полученной версией SEMVER и генерирует вас.
PS:
- Даже если вам не нужно публиковать, изменения в изменениях могут поддерживать автоматизированный изменение изменений для ваших приложений. Хороший !
- Чтобы отключить автоматическую публикацию некоторых пакетов, просто установите
"private": "true"в их package.json.- Хотите настроить поведение, см. Cangeset/config.json.
Некоторые удобные сценарии могут быть запущены в любой папке этого репо, и будут вызывать их аналоги, определенные в пакетах и приложениях.
| Имя | Описание |
|---|---|
yarn g:changeset | Добавить смену, чтобы объявить новую версию |
yarn g:codegen | Запустите CodeGen во всех рабочих пространствах |
yarn g:typecheck | Запустите Typechecks во всех рабочих пространствах |
yarn g:lint | Отображать проблемы с линтера во всех рабочих областях |
yarn g:lint --fix | Попытка запустить Auto-Fix Linter во всех рабочих пространствах |
yarn g:lint-styles | Отображение проблем CSS StyleLint во всех рабочих областях |
yarn g:lint-styles --fix | Попытка запустить Auto-Fix Assure StyleLint во всех рабочих пространствах |
yarn g:test | Запустить блок и E2E тесты во всех рабочих областях |
yarn g:test-unit | Запустите модульные тесты во всех рабочих пространствах |
yarn g:test-e2e | Запустите тесты E2E во всех рабочих пространствах |
yarn g:build | Запустите сборку во всех рабочих пространствах |
yarn g:clean | Чистые сборки во всех рабочих областях |
yarn g:check-dist | Убедитесь, что Fult Dist Files проходит ES2017 (запустите g:build First). |
yarn g:check-size | Убедитесь, что файлы браузера DIST находятся в пределах размера (запустите g:build First). |
yarn clean:global-cache | Чистые кэши для инструментов (Eslint, Jest ...) |
yarn deps:check --dep dev | Печатать, какие пакеты можно обновить во всем мире (см. Также .ncurc.yml) |
yarn deps:update --dep dev | Применить возможные обновления (запустить yarn install && yarn dedupe после) |
yarn install:playwright | Установите драматург для E2E |
yarn dedupe | Встроенная пряжа дедупликации файла блокировки |
Зачем использовать
:для префикса имен сценариев? Это удобно в пряже 3+, мы можем назвать эти сценарии из любой папки в Monorepo.g:это ярлык дляglobal:. См. Полный список в root package.json.
Global Commands yarn deps:check и yarn deps:update поможет сохранить те же версии по всему монорепо. Они основаны на превосходных обновлениях NPM-проверки (см. Параметры, yarn check:deps -t minor
После запуска
yarn deps:updateтребуетсяyarn install. Чтобы предотвратить наличие дубликатов в пряже, вы можете запуститьyarn dedupe --checkиyarn dedupeдля применения дедупликации. Четверка дубликата применяется в примере действий GitHub.
См. Пример в ./apps/nextjs-app/.eslintrc.js и наши Eslint-config-bases.
Проверьте содержание папки .husky, чтобы увидеть, какие крючки включены. LINT-CENTERE используется для гарантирования того, что Lint и Creatier применяются автоматически на коммит и/или толкают.
Тесты опираются на TS-----в зависимости от приложения. Все настройки поддерживают псевдонимов путей типографии. React-testing-library включена всякий раз, когда задействует React.
Конфигурация живет в корневой папке каждого приложений/пакетов. В качестве примера см.
Вы найдете несколько примеров рабочих процессов для действий GitHub в .github/Workflows. По умолчанию они обеспечат, чтобы
Каждое из этих шагов может быть выбрано.
Чтобы обеспечить достойную производительность, эти функции присутствуют в примере действий:
Кэширование пакетов (node_modules ...) - установить около 25 с
Кэширование NextJS предыдущей сборки - построено около 20 лет
Запускается при изменении пути действий, т.е.
paths: - "apps/nextjs-app/**" - "packages/**" - "package.json" - "tsconfig.base.json" - "yarn.lock" - ".yarnrc.yml" - ".github/workflows/**" - ".eslintrc.base.json" - ".eslintignore"
Плагин Eslint требует, чтобы настройка eslint.workingDirectories устанавливалась:
"eslint.workingDirectories": [
{
"pattern": "./apps/*/"
},
{
"pattern": "./packages/*/"
}
],
Больше информации здесь
Поддержка Vercel NangyPos, см. Верце-монорепо-депломный документ.
Есть основной пример для создания изображения Docker, прочитайте Docker Doc.
NetLify, AWS-Amplify, K8S-Docker, Serverless-Nextjs Рецепты могут быть добавлены в будущем. PR тоже приветствуется.
Зависимости приложений и DevDependencies прикрепляются к точным версиям. Packages DEPS будут использовать SEMVER, совместимые. Для получения дополнительной информации об этом изменении см. Рассудок здесь и наш файл конфигурации Renovabot.json5.
Чтобы помочь поддерживать актуальные DEPS, см yarn deps:check && yarn deps:update сценарии и / или используйте Renovatebot.
При добавлении DEP через пряжу CLI (то есть: пряжа добавить что-то), можно автоматически установить поведение сохранения-эксплуата, установив по
defaultSemverRangePrefix: ""В yarnrc.yml. Но это также сделало бы по умолчанию для пакетов/*. Лучше обрабатыватьyarn add something --exactна основе.
