home / skills / andrelandgraf / fullstackrecipes / nextjs-on-vercel

nextjs-on-vercel skill

safe

This skill helps you bootstrap a Next.js app on Bun, configured for development and deployment to Vercel with automatic previews.

npx playbooks add skill andrelandgraf/fullstackrecipes --skill nextjs-on-vercel

Review the files below or copy the command above to add this skill to your agents.

Files (1)

SKILL.md

512 B

---
name: nextjs-on-vercel
description: Create a Next.js app running on Bun, configure the development environment, and deploy to Vercel with automatic deployments on push.
---

# Next.js on Vercel

To set up Next.js on Vercel, refer to the fullstackrecipes MCP server resource:

**Resource URI:** `recipe://fullstackrecipes.com/nextjs-on-vercel`

If the MCP server is not configured, fetch the recipe directly:

```bash
curl -H "Accept: text/plain" https://fullstackrecipes.com/api/recipes/nextjs-on-vercel
```

Overview

This skill guides you to create a Next.js app running on Bun, configure a reliable development environment, and deploy the project to Vercel with automated deployments on git push. It bundles production-ready patterns and step-by-step recipes tailored for full-stack AI web apps. The content emphasizes practical setup, developer ergonomics, and deployment automation.

How this skill works

The skill walks through initializing a Next.js project configured to run on the Bun runtime and adjusting scripts, environment variables, and tooling to match Bun's behavior. It shows how to configure local development (hot reload, linting, TypeScript) and prepare Vercel settings for Bun support. Finally, it outlines Vercel deployment configuration and a CI-friendly flow so pushes to your repository trigger automatic builds and deployments.

When to use it

You want to use Bun for faster server startup and lower runtime overhead with a Next.js app.
You need a repeatable, production-ready deployment pipeline to Vercel with automatic deployments on push.
You are building full-stack AI web apps and want patterns optimized for performance and developer experience.
You need a documented recipe to configure TypeScript, linting, and environment variables for Bun + Next.js.
You want to standardize local dev and deployment across a team using Vercel.

Best practices

Lock Bun and Node tool versions in your repo and document runtime requirements in package.json or an env file.
Use environment-specific .env files and Vercel project environment variables for secrets and API keys.
Keep build and dev scripts explicit: separate start/dev/build commands for Bun to avoid runtime surprises.
Run linting and type checks in CI prior to deployment to catch issues early.
Test server-side features locally with the same Bun runtime used in production to surface compatibility issues.

Example use cases

Bootstrapping a Next.js + TypeScript app that uses Bun for API routes and server rendering.
Migrating an existing Next.js project to Bun to reduce cold-start times and improve builds.
Deploying a full-stack AI web app with automatic Vercel deployments whenever code is pushed to main.
Standardizing developer setup across a team using documented recipes and consistent tooling.
Integrating Shadcn UI patterns and production-ready recipes for rapid UI + backend iteration.

FAQ

Does Vercel support Bun as a runtime?

Yes—configure your project and Vercel settings to use Bun for builds and runtime, and ensure your project scripts reference Bun where required.

How do automatic deployments work?

Link your repository to your Vercel project; Vercel will trigger builds and deployments on pushes to configured branches, using the project settings and environment variables you set.