https://github.com/martpie/monorepo-typescript-next-the-sane-way
A monorepo example using TypeScript and Next.js
https://github.com/martpie/monorepo-typescript-next-the-sane-way
javascript jest monorepo next nextjs tslint typescript
Last synced: about 1 month ago
JSON representation
A monorepo example using TypeScript and Next.js
- Host: GitHub
- URL: https://github.com/martpie/monorepo-typescript-next-the-sane-way
- Owner: martpie
- License: mit
- Created: 2018-08-09T09:35:14.000Z (almost 7 years ago)
- Default Branch: master
- Last Pushed: 2023-01-05T14:39:24.000Z (over 2 years ago)
- Last Synced: 2025-03-24T15:52:23.786Z (about 2 months ago)
- Topics: javascript, jest, monorepo, next, nextjs, tslint, typescript
- Language: TypeScript
- Homepage:
- Size: 721 KB
- Stars: 144
- Watchers: 4
- Forks: 20
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Monorepo + TypeScript + Next.js: The Sane Way
This repo is an experiment to set-up a monorepo for a Next.js project using modules located in other directories. Everything is not perfect and "real-world" ready, but it should be a good first step.
- **Strict TypeScript**: potential bugs are not an option
- ~~**Transpiled server-side code**: needed if you are going to re-use modules for both client and server-side~~ Not anymore, Next.js is plenty powerful now and does not need it anymore in 99% of the cases
- **Jest**
- **TypeScript**
- **ESLint** (now included in Next.js 10)
- **Transpile local packages** with Next.js on-demand + HMR
My approach completely changed after a couple of projects, I realised the previous approach of having common configuration files was a bad practice:
- Not a true monorepo where every subfolder is a separate app
- Difficult to deploy and test on CI
Now, configuration files are repeated in each sub-folders, which means you need to be more careful regarding config and dependencies versions, but things are much easier to manage for developers and text editors.
## Todos
- [ ] GitHub actions sample
- [ ] ESLint + Jest everywhere
## More in details
### TypeScript
The config is at the root of each project: `//tsconfig.json`.
### Unit-tests
Jest is used for unit tests and all test files should be put in `__tests__` folders to match the Jest philosophy and not pollute your directories too much.
The config is at the root of each project: `//jest.config.js` and all the tests can be run with `npm run test:unit` in each folder.
### Linting
`npm run test:lint`
### Root folder
Put everything you want there, a Next app, shared code, a react-native app, a CRA, even Wordpress if you want.
### Next.js and local modules
~~Next.js will transpile modules thanks to the [`next-transpile-modules`](https://github.com/martpie/next-transpile-modules) package. Transpiled modules can be changed by editing the `transpileModules` option in `website/next.config.js`.~~
Since Next.js 13.1, we can now use `next.config.js`'s `transpilePackages` option to achieve the same.
This setup works thanks to npm symlinking local dependencies in `website/`'s `node_modules` folder. Yarn workspaces would work as well (though requiring some adaptation from this bolerplate).