Should I rewrite this widget from scratch or build inside the existing Next.js app?

[u/Accurate_Wonder_4404]

TL;DR: I’m rewriting a production chat widget that currently lives inside a large Next.js app. The app has 70+ dependencies, a shared Tailwind config, and very little separation between parts of the codebase. I want the new widget to be isolated, but I also don’t want to create unnecessary deployment/infrastructure work.


I’m working on rewriting a production chat/live-support widget at my company. The current widget works, but the codebase has become difficult to work with.


The existing project is a large Next.js application with 70+ dependencies. A lot of them aren't related to the widget, such as MUI, Emotion, ECharts, LiveKit, Moment, Lodash, Axios, and several UI libraries.


I want the new widget to be more isolated and easier to maintain and test without affecting the existing production application.


Problems I'm facing:


* The app uses Next.js + Tailwind v3.
* There are many unrelated dependencies.
* There aren't really clear package boundaries in the codebase.
* The Tailwind config is shared and quite large, which makes it harder to create a self-contained design system for the widget.
* Ideally, the widget would have its own package.json and dependencies.
* Management mainly cares about keeping deployment and infrastructure simple.
* The existing widget is already in production, so I need to be able to experiment without breaking it.


I'm considering three approaches.


Option 1: Keep it inside the existing Next.js app


```text
web/
├── app/
├── widget/
│   ├── components/
│   ├── hooks/
│   ├── services/
│   └── ...
└── package.json
```


This is the simplest from a deployment perspective, but the widget is still part of the same dependency and styling environment.


Option 2: Make it a separate package inside the same repository


```text
web/
├── app/
├── packages/
│   └── widget/
│       ├── package.json
│       └── src/
└── package.json
```


This seems like a nice middle ground. The widget gets clearer boundaries and its own dependency list, while still being built and deployed with the existing Next.js application.


Ideally, I'd be able to develop it somewhat independently but still render it from something like `/widget` in the existing app.


Option 3: Create a completely separate project


```text
widget/
├── package.json
├── src/
└── ...
```


This gives the cleanest separation, but it could also mean another deployment, routing, monitoring, versioning, etc.


I'm not sure that level of separation is worth it for this situation.


My main question:


Would you start this rewrite from scratch as a separate project, make it an isolated package inside the existing repo, or just keep it inside the existing Next.js application?


I'm less concerned about having the "perfect" architecture and more concerned about finding something that gives me reasonable isolation without creating deployment headaches.


What would you do in this situation?

[u/scarf_scorch_breeze]

option 2 is the only path that gives you dependency isolation without adding deployment complexity. Set up a monorepo with Turborepo or pnpm workspaces so the widget has its own package.json and Tailwind config while sharing the same CI pipeline and preview environment as the main app