Bundlers & dev server
- For a plain SPA, Vite is the default — fast dev server (native ESM + esbuild), simple config, great DX. For Next.js, the build tooling is built in (Turbopack in dev).
- You rarely need to hand-configure a bundler anymore. Reach for custom config only when a real constraint demands it.
Linting & formatting — automate the bikeshedding
- ESLint for correctness (catches the React/hooks footguns via the React plugins). Prettier for formatting. Keep them in separate lanes so they don't fight.
- Make the editor format on save, and run lint + format in CI so style is never a PR discussion.
- A pre-commit hook (Husky + lint-staged) catches issues before they land.
Type-checking is part of the build
- Run
tsc --noEmit in CI as a gate. A green build that doesn't type-check isn't green.
- Treat type errors and lint errors as build failures, not warnings to ignore.
Environment & secrets
- In Next.js, only
NEXT_PUBLIC_* vars reach the browser — everything else stays server-side. Never put a secret in a public var.
- Validate env vars at startup (a Zod schema over
process.env) so a missing/typo'd var fails the build, not a user request.
- Keep
.env.local out of git; document required vars in .env.example.
Shipping
- Vercel is the path of least resistance for Next.js (zero-config, preview deploys per PR). Self-hosting works too —
next build + the standalone output in a Docker container behind Nginx — which is the route when you want control or to avoid platform lock-in.
- Preview deployments per pull request are a huge workflow win — review the actual running UI, not a screenshot.
- Set up source maps + an error monitor (Sentry) so production errors are visible with real stack traces.
Testing baseline
- Vitest + React Testing Library for component/unit tests — test behavior the user sees, not implementation details.
- Playwright for a handful of end-to-end tests on critical flows (auth, checkout). A few real E2E tests catch more than a hundred shallow unit tests.