Our project is structured as a monorepo with a focus on the frontend application. The main components are:
- Root directory: Contains the main
package.jsonand workspace configuration frontend/: The main Next.js application directory
Vercel Configuration
We’ve configured Vercel to optimize deployments for our monorepo structure:
- Root Directory was automatically set to Frontend by Vercel. The option to include build files was toggled on, while the feature to skip deployments was turned off. I have turned this on. I have a two other directories Foo + Bar (we can call them) within the same directory.
Project Structure
mono/foo
mono/bar
mono/frontend
These settings ensure that:
- Vercel can access the
frontend/directory - Builds are skipped when changes don’t affect the frontend
However, Vercel builds a preview instance no matter what settings I configure unless I properly write a bash script for the ignore build step. I do not want this behavior as concurrent builds are required for my use case and this is increasing our downtime.
Root Pkg example:
{
"name": "monorepo",
"version": "1.0.0",
"private": true,
"workspaces": [
"frontend"
],
"scripts": {
"frontend:dev": "yarn workspace frontend dev",
"frontend:build": "yarn workspace frontend build",
"frontend:start": "yarn workspace frontend start",
"frontend:lint": "yarn workspace frontend lint",
"frontend:format": "yarn workspace frontend format",
"frontend:test": "yarn workspace frontend test",
"dev": "yarn workspace frontend dev",
"build": "yarn workspaces run build",
"start": "yarn workspace frontend start",
"lint": "biome lint .",
"format": "biome format .",
"check": "biome check --apply .",
"test": "yarn workspaces run test",
"backend:build": "cd backend && cargo build",
"backend:test": "cd backend && cargo test"
},
"devDependencies": {
"@biomejs/biome": "^1.9.2",
"typescript": "^5.5.4"
},
"packageManager": "yarn@1.22.22"
}
Frontend Pkg Manager example -
"name": "frontend",
"version": "1.0.0",
"private": true,
"scripts": {
"dev": "next dev",
"build": "next build",
"start": "next start",
"lint": "biome lint .",
"format": "biome format . --write",
"check": "biome check --apply .",
"test:jest": "jest",
"test:e2e": "playwright test",
"test": "yarn test:jest && yarn test:e2e"
},
"dependencies": {
"@tanstack/react-query": "^5.55.0",
"@testing-library/dom": "^10.4.0",
"@types/three": "^0.168.0",
"@vercel/analytics": "^1.2.2",
"@vercel/kv": "^2.0.0",
"@vercel/speed-insights": "^1.0.10",
"autoprefixer": "^10.4.20",
"class-variance-authority": "^0.7.0",
"clsx": "^2.1.1",
"cmdk": "^1.0.0",
"cobe": "^0.6.3",
"embla-carousel": "^8.2.1",
"embla-carousel-autoplay": "^8.2.1",
"embla-carousel-react": "^8.2.1",
"framer-motion": "^11.5.4",
"framer-motion-3d": "^11.5.4",
"gray-matter": "^4.0.3",
"jwt-decode": "^4.0.0",
"lowlight": "^3.1.0",
"lucide-react": "^0.439.0",
"mini-svg-data-uri": "^1.4.4",
"next": "^14.2.14",
"next-themes": "^0.3.0",
"react": "^18.3.1",
"react-dom": "^18.3.1",
"react-hook-form": "^7.53.0",
"recharts": "^2.12.7",
"resend": "^4.0.0",
"sharp": "^0.33.5",
"sonner": "^1.4.41",
"tailwind-merge": "^2.5.2",
"tailwindcss-animate": "^1.0.7",
"three": "^0.168.0",
"vaul": "^0.9.2",
"yarn": "^1.22.22",
"yjs": "^13.5.38",
"zod": "^3.23.8",
"zustand": "^4.5.5"
},
"devDependencies": {
"@playwright/test": "^1.47.0",
"@testing-library/jest-dom": "^6.5.0",
"@testing-library/react": "^16.0.1",
"@types/jest": "^29.5.12",
"@types/node": "^22.5.4",
"@types/react": "^18.3.5",
"@types/react-dom": "^18",
"jest": "^29.7.0",
"jest-environment-jsdom": "^29.7.0",
"postcss": "^8.4.47",
"tailwindcss": "^3.4.13",
"ts-jest": "^29.2.5",
"ts-node": "^10.9.2"
}
}
Maybe the DevDeps are causing this issue? Sorry if the solution is obvious.
