Deploy a Next.js App to Vercel

I have a Next.js application ready to deploy. Help me set up a complete Vercel deployment with best practices.

Project details:
- App name: [your app name]
- GitHub repo: [repo URL or "not yet pushed"]
- Framework: Next.js [version, e.g. 14 or 15]
- Environment variables needed: [list them, e.g. DATABASE_URL, NEXT_PUBLIC_STRIPE_KEY]
- Custom domain: [your domain, or "none yet"]

Please walk me through:

1. Pre-deployment checklist:
   - Verify my next.config.js is production-ready
   - Confirm all environment variables are listed (not hardcoded)
   - Check that my build command works locally with `npm run build`
   - Flag any common issues (missing image domains, incorrect output settings)

2. Vercel project setup:
   - Connect my GitHub repository
   - Configure the build settings (framework preset, build command, output directory)
   - Set all environment variables in the Vercel dashboard
   - Explain the difference between Production, Preview, and Development env vars

3. Custom domain configuration:
   - Add my domain in Vercel settings
   - Show me the exact DNS records to add (A record and CNAME)
   - Set up automatic HTTPS

4. Post-deployment verification:
   - Check that all pages load correctly
   - Verify environment variables are accessible
   - Confirm preview deployments work on pull requests
   - Test that serverless functions (API routes) respond properly

5. Production hardening:
   - Enable Vercel Analytics (if desired)
   - Set up deployment protection for preview branches
   - Configure a custom 404 page
   - Add redirect rules if migrating from another domain

Output everything as a numbered step-by-step checklist I can follow in order. For DNS records, give me the exact values to copy-paste into my registrar.