3. Deploying Next.js App to Vercel
Vercel is optimized for Next.js, making deployment straightforward. Assuming your Next.js project is in nextjs-frontend/:
3.1. Connect Your Git Repository
Go to the Vercel dashboard, click "New Project", and connect your Git repository (GitHub, GitLab, Bitbucket). Vercel will usually auto-detect your Next.js project.
3.2. Configure Project Settings
When importing your project, Vercel will ask for configuration. If your Next.js app is in a subdirectory (e.g., nextjs-frontend/), you'll need to specify the Root Directory.
- Project Name: YourAppName
- Framework Preset: Next.js
- Root Directory:
nextjs-frontend - Build & Output Settings: Usually left as default (Vercel automatically detects Next.js build commands).
Click "Deploy". Vercel will then build and deploy your Next.js application.
3.3. Environment Variables (if needed)
If your Next.js app uses environment variables (e.g., .env.local), you can add them in Vercel's project settings under "Environment Variables".
For example, if your Next.js app needs to know the API endpoint, you might add a variable:
- Name:
NEXT_PUBLIC_API_URL - Value:
https://your-vercel-domain.vercel.app/api(or your custom domain)
Remember to restart your Vercel deployment after adding environment variables.