nextjs-monorepo-example

This monorepo follows a specific dependency pinning strategy to balance stability and ease of updates:

• Apps: dependencies and devDependencies are pinned to exact versions. This ensures reproducible builds and prevents unexpected breaking changes in application deployments.
• Packages: Dependencies use semver compatible ranges. This allows shared libraries to be more flexible when consumed by different apps.

To maintain these dependencies, you can use the following scripts:

• yarn deps:check: Checks for outdated dependencies.
• yarn deps:update: Updates dependencies.

Alternatively, you can use Renovatebot for automated updates, as the project includes a renovate.json5 configuration.

Internationalization (I18N) is managed using next-i18next.

• Configuration is located in next-i18next.config.mjs.
• Translation files are stored in public/locales/.
• Type-safe autocompletion for translation keys is enabled via ./src/types.d/i18next.d.ts.

Each application within the apps/ directory follows a standardized structure:

• e2e/: (Optional) Contains end-to-end tests using frameworks like Cypress or Playwright.
• public/: Framework-conventional public assets folder.
• setup/: Configuration files for tooling, such as Vitest or React Testing Library (RTL).
• src/: The main application source code.
• package.json: Defines all dependencies required to run this specific app independently.
• next.config.mjs, tsconfig.json, eslintrc.cjs: Framework and tooling configuration files.

🌳 (./apps)
 └── 🍂 nextjs-app
     ├── 🏁 e2e
     ├── 👀 public
     ├── 🔩 setup
     ├── 💫 src
     ├─ eslintrc.cjs
     ├─ next.config.mjs
     ├─ package.json
     ├─ (tailwind.config.ts)
     └─ tsconfig.json

There are two mutually exclusive ways to handle Prettier integration. Choose the one that fits your workflow:

1. @your-org/eslint-config-bases/prettier-plugin (Recommended for simplicity): ESLint will run Prettier automatically during the lint process. This is easiest to set up.
2. @your-org/eslint-config-bases/prettier-config (Recommended for performance): ESLint only disables rules that conflict with Prettier. You must run Prettier as a separate command (e.g., prettier --write .).

To customize your Prettier configuration while using the provided helpers, update your .prettierrc.js:

// .prettierrc.js
// @ts-check
const { getPrettierConfig } = require("@your-org/eslint-config-bases/helpers");

/**
 * @type {import('prettier').Config}
 */
module.exports = {
  ...getPrettierConfig(),
  overrides: [
    // your custom overrides
  ],
};

Storybook is used within the @your-org/ui-lib package to build UI components in isolation from the application's business logic, data, and context. This allows you to develop and test hard-to-reach UI states by saving them as stories.

To learn how specific components are implemented in Storybook, you can view their code in the stories directory within the package.

The project uses a multi-stage Dockerfile to minimize image size and optimize build times by leveraging buildx caching. The process is divided into three main stages:

1. Stage 1: deps: Installs the monorepo dependencies and makes node_modules available for subsequent stages. This stage can be skipped if the lock file hasn't changed.
2. Stage 2: builder: Automatically runs the deps stage, copies the installed node_modules, performs the build, and removes devDependencies to keep the image slim.
3. Stage 3: runner: The final production stage. It launches the production build and listens on http://localhost:3000 by default. You must provide a .env file with required runtime variables.

Note: Ensure you have a .dockerignore file configured to prevent unnecessary files from being sent to the Docker daemon.

To initialize the database package, start the database container using Docker and then run the Prisma lifecycle commands. This sequence sets up the schema, seeds the data, and prepares migrations.

1. Start the database: docker-compose up database
2. Navigate to the package: cd packages/db-main-prisma
3. Execute setup commands:
   • yarn prisma-db-push (Create/Push schema)
   • yarn prisma-db-seed (Seed data)
   • yarn prisma-migrate dev (Run migrations)
   • yarn prisma-migrate-reset (Reset database)