This project is configured with a suite of pre-configured tools to enhance development experience:
- Monorepo setup with TurboRepo:
- TurboRepo provides efficient builds and caching, reducing unnecessary rebuilds.
- TypeScript for static type checking.
- ESLint for code linting.
- Prettier for code formatting.
- A Plop-based code generator for easy component scaffolding.
- Workflows for testing, documentation, dependency updates, and deployment of docs and packages.
- Build setup for generating both CJS and ESM builds to support React 18 server and client component exports from the same library.
- Native support for SCSS modules in
lib
andpackages/shared
.
This TurboRepo includes the following packages/examples, all in TypeScript:
nextjs-themes
: The core React component library (published to NPM).@example/app-router
: A Next.js example app using the app router/directory.@example/pages-router
: A Next.js example app using the pages router.@example/vite
: A Vite.js app.@repo/config-eslint
: ESLint configurations (includeseslint-config-next
andeslint-config-prettier
).@repo/config-typescript
:tsconfig.json
configurations used throughout the monorepo.@repo/shared
: An internal library of components used by the examples.
To automatically generate a new component along with a test file and dependency linking, run:
yarn plop
Follow the prompts to ensure adherence to best practices.
To build all apps and packages, run:
pnpm build
For developing all apps and packages, use:
pnpm dev
To run unit tests, execute:
pnpm test
Before submitting a PR, ensure your code passes linting and is properly formatted by running:
pnpm lint
and
pnpm format
Learn more about TurboRepo and Next.js through these links:
- React and Next.js with TypeScript - An interactive Next.js course.
- The Game of Chess with Next.js, React, and TypeScript
- Tasks
- Caching
- Remote Caching
- Filtering
- Configuration Options
- CLI Usage
Quick tip: Remove all stale branches with:
git branch --merged main | grep -v '^[ *]*main$' | xargs git branch -d
Consider enrolling in our courses or sponsoring our work.
with 💖 by Mayank Kumar Chaudhari