Skip to content

Depoloyment Guide

Jump to bottom
Cptcr edited this page May 2, 2025 · 1 revision

🚀 Deployment Guide

This guide will walk you through deploying your Next.js Portfolio to production using [Vercel](https://vercel.com), the native platform for Next.js applications.

🛠️ Prerequisites

Before deploying, ensure you have:

📦 Deploying to Vercel

1. Import Your Repository

  1. Navigate to [Vercel's Import Project page](https://vercel.com/import/git).
  2. Select "Import Git Repository".
  3. Authenticate with GitHub if prompted and select your next.js_portfolio repository.

2. Configure Project Settings

Vercel will automatically detect your project settings. Ensure the following:

  • Framework Preset: Next.js
  • Build Command: npm run build or yarn build
  • Output Directory: .next

You can leave other settings at their default values.

3. Set Environment Variables (If Applicable)

If your project uses environment variables:

  1. In the Vercel dashboard, go to your project settings.
  2. Navigate to the "Environment Variables" section.
  3. Add the necessary variables as defined in your .env.example file.

4. Deploy the Project

Click "Deploy". Vercel will build and deploy your project. Once completed, you'll receive a live URL (e.g., https://your-project.vercel.app).

🔄 Continuous Deployment

With Vercel's Git integration:

  • Every push to the main branch will trigger a new deployment.
  • For feature branches, Vercel provides preview deployments, allowing you to test changes before merging.

🧪 Preview Deployments

For every pull request or commit to a non-production branch:

  • Vercel creates a unique preview URL.
  • This allows you to test and share changes without affecting the live site.

🧰 Alternative Deployment Options

While Vercel is the recommended platform for Next.js, you can also deploy using:

  • Node.js Server: Deploy to platforms like Heroku or DigitalOcean.
  • Docker: Containerize your application for deployment.
  • Static Export: Export your site as static files using next export (note: this has limitations and may not support all Next.js features).

For detailed instructions on these methods, refer to the [Next.js Deployment Documentation](https://nextjs.org/docs/pages/building-your-application/deploying).

✅ Post-Deployment Checklist

  • Test all pages and links.
  • Verify responsiveness on different devices.
  • Ensure environment variables are correctly set.
  • Set up custom domains if desired.
  • Monitor performance and analytics via Vercel's dashboard.

Clone this wiki locally