List of Next.js monorepo starter projects (2021)
On This Page
I want to use a monorepo project setup for my personal site. It should contain these as separate packages/sub-projects:
- UI components library
- API server
- eka.fyi frontend
- misc Node packages, eg. reusable Tailwind config
questionIsn’t this overkill for a personal website? Couldn't you just put everything in a single Next.js project? Absolutely. This is for learning purposes, to gain practical experience which I would not get just from watching/reading tutorials passively.
I have bookmarked a few (well, a dozen 🙀) examples/starter repos for reference. Time to investigate and decide which setup I'm going to use.
🏅 Top 3 contenders
In alphabetical order
- https://github.com/abaltuta/monorepo-article
- docs: https://baltuta.eu/posts/typescript-lerna-monorepo-the-setup
- sample packages:
- node lib
- ui lib + sb (build with
tsc) - (frontend) react app + sb (build with
webpack) - (backend) node api
- https://github.com/belgattitude/nextjs-monorepo-example
- docs: repo readme
- tools:
- releasing:
changesets - lint:
eslint, test:jest(ts-jest, react-testing-lib) - CI/CD: gh actions
- releasing:
- sample packages:
- ui + hooks lib (compile with
microbundle) - (frontend) nextjs app
- (backend) prisma db
- ui + hooks lib (compile with
- https://github.com/Thinkmill/monorepo-starter
- docs: repo readme + https://monorepo.guide/
- additional reference: https://github.com/Thinkmill/graphql-ts
- tools:
- releasing:
changesets - linting:
eslint(no rules, must add our own), test:jest
- releasing:
- sample packages:
- ui lib (compile with
preconstructfrom root) - (frontend) nextjs app
- (backend) graphql api apollo
- ui lib (compile with
👀 Others
Not quite what i'm looking for, but these projects have well-designed, well-documented setup that can be useful as reference.
- ⭐️ https://github.com/NiGhTTraX/ts-monorepo
- (off topic) love the readme header illustration 😁
- good detailed docs (readme)
- pnpm, babel, jest
- UI & node publishable packages; various web apps (Next.js, Nest.js, CRA)
- 💬 I dont remember why this was not in the top 3. I think I could not get this to work, but i did not make notes of the error.
- ⭐️ https://github.com/karanpratapsingh/fullstack-starterkit
- docs: https://dev.to/karanpratapsingh/series/13484 (super detailed!)
- yarn workspaces, graphql, GH actions, docker, jest, cypress, prisma + postgres DB
- CRA app, no UI components package
- 💬 I like this starter but unfortunately it is more backend/full-stack focused, while I also need a Next.js web app & UI components example
- https://github.com/CryogenicPlanet/typescript-monorepo-example
- pnpm, esbuild, vite, eslint, jest
- no web app that uses the packages
- https://github.com/michaljach/modern-monorepo-boilerplate
- lerna, jest & enzyme, eslint
- UI components package & CRA app
- https://github.com/p-j/typescript-monorepo-template
- yarn workspaces, lerna, changesets, jest
- does not contain sample packages, just the monorepo setup
- https://github.com/remirror/template
- pnpm, preconstruct, changesets, eslint
- only node package example, no web app that uses the package
- https://github.com/ra2dev/ts-monorepo-starter
- lerna, storybook, jest, eslint & stylelint
- only UI & node packages, no web app that uses the packages
- https://github.com/serhii-havrylenko/monorepo-babel-ts-lerna-starter
- good detailed docs (readme)
- lerna, babel, storybook, jest, tslint & stylelint
- only UI packages, no web app that uses the packages
- https://github.com/shnydercom/lerna-typescript-cra-uilib-starter
- Lerna, TypeScript, Storybook
- ui package & CRA app
Closing
I went with https://github.com/belgattitude/nextjs-monorepo-example
In: