build-and-deploy
Build and deploy this Next.js portfolio application. Use when building, deploying, or preparing the project for production.
When & Why to Use This Skill
This Claude skill automates the end-to-end build and deployment pipeline for Next.js portfolio applications. It streamlines the transition from development to production by providing standardized workflows for dependency management, optimized builds, and seamless deployment to cloud platforms like Vercel and Netlify, ensuring high-performance web delivery.
Use Cases
- Automating production-ready builds for Next.js 16 portfolio sites to ensure all MDX content and assets are correctly processed.
- Streamlining the deployment process to Vercel using optimized CLI commands like 'vercel build --prod' for faster and more reliable releases.
- Managing multi-platform deployment strategies by providing pre-configured scripts for both Vercel and Netlify environments.
- Ensuring consistent environment setup and dependency installation across different development stages to prevent 'it works on my machine' issues.
| name | build-and-deploy |
|---|---|
| description | Build and deploy this Next.js portfolio application. Use when building, deploying, or preparing the project for production. |
Build and Deploy Magic Portfolio
CRITICAL: For Vercel, use
vercel build --prodthenvercel deploy --prebuilt --prod.
Workflow
1. Install Dependencies
npm install
2. Build
npm run build
3. Deploy
Vercel (Recommended):
vercel pull --yes -t $VERCEL_TOKEN
vercel build --prod -t $VERCEL_TOKEN
vercel deploy --prebuilt --prod --yes -t $VERCEL_TOKEN
Netlify:
netlify deploy --prod --dir=.next
Tech Stack
- Framework: Next.js 16
- UI: Once UI + React 19
- Styling: Sass
- Content: MDX for blog posts and projects
- Language: TypeScript
Important Notes
- Requires Node.js v18.17+
- Configuration files:
src/resources/once-ui.config.js- Theme and UI settingssrc/resources/content.js- Site content
- Blog posts go in
src/app/blog/posts/ - Projects go in
src/app/work/projects/