{"content":"# Next.js on Vercel\n\nCreate a Next.js app running on Bun, configure the development environment, and deploy to Vercel with automatic deployments on push.\n\n## Create the Next.js App\n\nInitialize a new Next.js application:\n\n```bash\nbunx create-next-app@latest my-app --ts --tailwind --react-compiler --no-linter --src-dir --app --use-bun\ncd my-app\n```\n\nThis command uses the following recommended options: TypeScript and Tailwind CSS for type safety and utility-first styling, enables the React Compiler for automatic optimizations, skips linter configuration (can be added later if needed), organizes code inside a `src/` directory for cleaner project structure, uses the App Router, and bootstraps with Bun as the package manager.\n\n## Add Next.js & Vercel MCP Servers\n\nAdd MCP (Model Context Protocol) servers so your coding agent can debug Next.js and manage Vercel. `bunx add-mcp` updates all detected agents automatically; if none are detected, add `-a cursor -a codex`.\n\n```bash\nbunx add-mcp https://mcp.vercel.com\nbunx add-mcp next-devtools-mcp@latest\n```\n\n| Server | Description |\n| `vercel` | Manage Vercel projects, deployments, and search Vercel docs |\n| `next-devtools` | Next.js development tools for debugging, routing, and build info |\n\n> **Vercel MCP:** On first connection, Cursor will show a \"Needs login\" prompt. Click it to authorize access to your Vercel account. For project-specific context, use `https://mcp.vercel.com/<teamSlug>/<projectSlug>` instead.\n\n## Install React & Design Agent Skills\n\nInstall skills that teach your coding agent React/Next.js patterns and web design best practices. `bunx skills add` updates all detected agents; if none are detected, add `-a cursor -a codex`.\n\n```bash\nbunx skills add vercel-labs/agent-skills -s web-design-guidelines -a cursor -a codex -y\nbunx skills add vercel-labs/agent-skills -s vercel-react-best-practices -a cursor -a codex -y\n```\n\n| Skill | Description |\n| `web-design-guidelines` | Web design best practices for UI/UX |\n| `vercel-react-best-practices` | React patterns and conventions for Vercel apps |\n\n## Setup Vercel Configuration\n\nInstall the Vercel config package to programatically configure the Vercel project:\n\n```bash\nbun add -D @vercel/config\n```\n\nCreate the `vercel.ts` file:\n\n```typescript\n// vercel.ts\nimport type { VercelConfig } from \"@vercel/config/v1\";\n\nexport const config: VercelConfig = {};\n```\n\n## Configure Bun as the Runtime on Vercel (Optional)\n\nUsing Bun both as the package manager and runtime provides a consistent development experience. To configure Bun as the runtime on Vercel, add the following to the `vercel.ts` file:\n\n```typescript\n// vercel.ts\nimport type { VercelConfig } from \"@vercel/config/v1\";\n\nexport const config: VercelConfig = {\n  bunVersion: \"1.x\",\n};\n```\n\nAdd Bun types for better TypeScript support:\n\n```bash\nbun add -D @types/bun\n```\n\n## Install GitHub CLI\n\nInstall the GitHub CLI to manage your GitHub repositories:\n\n```bash\nbrew install gh\n```\n\nLogin to your GitHub account:\n\n```bash\ngh auth login\n```\n\n## Create GitHub Repository\n\nInitialize git and create a new GitHub repository inside the project root:\n\n```bash\n# Create GitHub repository and push\ngh repo create my-app --public --source=. --push\n```\n\nThe `gh repo create` command:\n\n- Creates a new repository on GitHub\n- Sets the remote origin\n- Pushes your local code\n\nUse `--private` instead of `--public` for a private repository.\n\n## Install Vercel CLI\n\nInstall the Vercel CLI globally to manage your Vercel projects:\n\n```bash\nbun add -g vercel\n```\n\nAuthenticate with Vercel:\n\n```bash\nvercel login\n```\n\n## Deploy to Vercel\n\nLink your project to Vercel and deploy:\n\n```bash\n# Deploy to Vercel (creates project on first run)\nvercel\n```\n\nOn first run, you'll be prompted to:\n\n- Set up and deploy the project\n- Link to an existing project or create a new one\n- Configure project settings\n\n### Connect Git for Automatic Deployments\n\nConnect your GitHub repository to enable automatic deployments on push:\n\n```bash\nvercel git connect\n```\n\nThis links your local Git repository to your Vercel project, enabling:\n\n- Automatic deployments on push to main branch\n- Preview deployments for pull requests\n- Deployment status checks on GitHub\n\n## Deployment Workflow\n\nAfter initial setup, your workflow is:\n\n1. **Develop locally**: `bun run dev`\n2. **Commit and push**: `git push origin main`\n3. **Automatic deployment**: Vercel deploys on push"}