Nextjs Deployment
Deploy a Next.js app to Vercel, AWS ECS, or similar platforms with correct env vars, headers, and preview workflows.
Overview
Next.js Deployment is an agent skill most often used in Operate (also Ship launch prep) that provides platform-specific guides to deploy Next.js on Vercel, AWS ECS, and related hosting patterns.
Install
npx skills add https://github.com/giuseppe-trisciuoglio/developer-kit --skill nextjs-deploymentWhat is this skill?
- Vercel-native vercel.json with build commands, security headers, rewrites, and redirects
- AWS ECS Fargate task definition pattern with port mappings for containerized Next.js
- Environment variable setup via Vercel CLI and dashboard for production and preview
- Preview deployments tied to pull requests with separate preview env configuration
- Platform-specific deployment guides rather than a single generic Docker snippet
Adoption & trust: 1k installs on skills.sh; 271 GitHub stars; 2/3 security scanners passed (skills.sh audits).
What problem does it solve?
Your Next.js app builds locally but you lack correct vercel.json, ECS task defs, or preview env setup for a safe production deploy.
Who is it for?
Solo builders finishing a Next.js SaaS or marketing site who need Vercel or AWS ECS deployment snippets and env wiring in one pass.
Skip if: Non-Next frameworks, deep Terraform multi-account estates, or teams that only need local dev without any cloud target.
When should I use this skill?
You have a Next.js application ready to deploy and need Vercel, AWS, or related platform configuration.
What do I get? / Deliverables
You get ready-to-adapt hosting configuration, env var commands, and preview deployment notes so the app ships on your chosen platform with baseline security headers.
- vercel.json or ECS task definition templates
- Documented env var setup for production and preview
Recommended Skills
Journey fit
Spans multiple journey phases - primary shelf plus alternate fits below.
Operate/infra is the canonical shelf because the skill is platform runbooks—task definitions, vercel.json, regions, and production env—not feature coding. Infra subphase matches container task definitions, network mode, and hosting configuration that keep the app running in production.
Where it fits
Configure vercel.json and production env vars right before tagging v1.0.
Migrate or stand up AWS ECS Fargate when Vercel limits or compliance push you to your own containers.
Ensure preview URLs on every PR so marketing can review pages before the public launch deploy.
How it compares
Use as a deployment recipe skill, not a frontend design or Next.js feature-coding tutorial—it focuses on vercel.json, ECS tasks, and env—not React components.
Common Questions / FAQ
Who is nextjs-deployment for?
Indie developers and small teams shipping Next.js who want agent-guided Vercel or AWS ECS configuration without reading entire platform docs first.
When should I use nextjs-deployment?
During Ship when preparing first production release, during Operate when moving or hardening hosting, and when setting up PR preview deploys before Launch traffic.
Is nextjs-deployment safe to install?
Check the Security Audits panel on this Prism page; deployment skills touch production secrets and cloud APIs—review env examples and never paste real credentials into chats.
SKILL.md
READMESKILL.md - Nextjs Deployment
# Deployment Platforms Platform-specific guides for deploying Next.js applications. ## Vercel (Platform Native) ### Configuration ```json // vercel.json { "version": 2, "buildCommand": "next build", "devCommand": "next dev", "installCommand": "npm install", "framework": "nextjs", "regions": ["iad1"], "env": { "NEXT_TELEMETRY_DISABLED": "1" }, "headers": [ { "source": "/(.*)", "headers": [ { "key": "X-Frame-Options", "value": "DENY" }, { "key": "X-Content-Type-Options", "value": "nosniff" } ] } ], "rewrites": [ { "source": "/api/(.*)", "destination": "/api/$1" } ], "redirects": [ { "source": "/old-path", "destination": "/new-path", "permanent": true } ] } ``` ### Environment Variables ```bash # Set via Vercel Dashboard or CLI vercel env add DATABASE_URL production vercel env add NEXT_PUBLIC_API_URL production ``` ### Preview Deployments Automatic for all pull requests. Configure in project settings: - Environment Variables > Preview > Add variables for preview environments ## AWS ### Elastic Container Service (ECS) ```yaml # ecs-task-definition.json { "family": "nextjs-app", "networkMode": "awsvpc", "requiresCompatibilities": ["FARGATE"], "cpu": "512", "memory": "1024", "containerDefinitions": [ { "name": "nextjs", "image": "myapp:latest", "portMappings": [ { "containerPort": 3000, "protocol": "tcp" } ], "environment": [ { "name": "NODE_ENV", "value": "production" }, { "name": "PORT", "value": "3000" } ], "secrets": [ { "name": "DATABASE_URL", "valueFrom": "arn:aws:secretsmanager:region:account:secret:db-url" } ], "logConfiguration": { "logDriver": "awslogs", "options": { "awslogs-group": "/ecs/nextjs-app", "awslogs-region": "us-east-1", "awslogs-stream-prefix": "ecs" } }, "healthCheck": { "command": ["CMD-SHELL", "curl -f http://localhost:3000/api/health || exit 1"], "interval": 30, "timeout": 5, "retries": 3, "startPeriod": 60 } } ] } ``` ### Application Load Balancer ```yaml # alb.yml Resources: LoadBalancer: Type: AWS::ElasticLoadBalancingV2::LoadBalancer Properties: Name: nextjs-alb Scheme: internet-facing Type: application Subnets: - !Ref PublicSubnet1 - !Ref PublicSubnet2 SecurityGroups: - !Ref ALBSecurityGroup TargetGroup: Type: AWS::ElasticLoadBalancingV2::TargetGroup Properties: Name: nextjs-tg Port: 3000 Protocol: HTTP VpcId: !Ref VPC TargetType: ip HealthCheckPath: /api/health HealthCheckIntervalSeconds: 30 HealthCheckTimeoutSeconds: 5 HealthyThresholdCount: 2 UnhealthyThresholdCount: 3 Listener: Type: AWS::ElasticLoadBalancingV2::Listener Properties: LoadBalancerArn: !Ref LoadBalancer Port: 443 Protocol: HTTPS Certificates: - CertificateArn: !Ref SSLCertificate DefaultActions: - Type: forward TargetGroupArn: !Ref TargetGroup ``` ### S3 Static Export ```yaml # s3-cloudfront.yml Resources: StaticBucket: Type: AWS::S3::Bucket Properties: BucketName: !Sub "${AWS::StackName}-static" PublicAccessBlockConfiguration: BlockPublicAcls: false BlockPublicPolicy: false IgnorePublicAcls: false RestrictPublicBuckets: false WebsiteConfiguration: IndexDocument: index.html ErrorDocument: 404.html CloudFrontDistribution: Type: AWS::CloudFront::Distribution Properties: DistributionConfig: Enabled: true DefaultRootObject: index.html Origins: - DomainName: