Build with Next.js (App Router, RSC, SSR, ISR), Turborepo monorepos. Use for React apps, server rendering, build optimization, caching strategies, shared dependencies.
Next.js + Turborepo + RemixIcon for modern full-stack web applications.
| Scenario | Stack |
|---|---|
| Single SaaS/e-commerce/marketing site | Next.js + RemixIcon |
| Multiple apps with shared code | Next.js + Turborepo + RemixIcon |
| Microfrontends / multi-tenant | Turborepo monorepo |
| Design system with docs site | Turborepo + shared UI package |
# Single app
npx create-next-app@latest my-app && npm install remixicon
# Monorepo
npx create-turbo@latest my-monorepo
// RemixIcon usage
import { RiHomeLine } from "@remixicon/react"
<RiHomeLine size={24} />
Next.js:
Turborepo:
RemixIcon:
# Initialize Next.js app with best practices
python scripts/nextjs-init.py --name my-app --typescript --app-router
# Migrate existing monorepo to Turborepo
python scripts/turborepo-migrate.py --path ./my-monorepo --dry-run
| # | Mistake | Fix |
|---|---|---|
| 1 | Using "use client" everywhere | Default to Server Components; use client only for interactivity |
| 2 | Fetching data in Client Components | Fetch in Server Components, pass as props |
| 3 | Missing outputs in turbo.json | Cache won't work — define .next/**, dist/** |
| 4 | Shared packages not built before apps | Set "dependsOn": ["^build"] in pipeline |
| 5 | No loading/error states | Add loading.tsx and error.tsx in each route segment |
| 6 | Image tag instead of <Image> | Always use Next.js <Image> for auto-optimization |
| 7 | Hardcoding revalidation to 0 | Use revalidate values appropriate to data freshness |
| 8 | Missing aria-label on icon-only buttons | RemixIcon has no built-in a11y — add manually |