Deployment

Prerequisites

Before deploying, ensure you have:

1. Node.js 18.x or later installed
2. Supabase project set up
3. Google OAuth credentials (optional)
4. Storage bucket configuration in Supabase

Environment Setup

Create a .env.production file with the following configurations:

# Supabase Configuration
NEXT_PUBLIC_SUPABASE_URL=your-supabase-project-url
NEXT_PUBLIC_SUPABASE_ANON_KEY=your-supabase-anon-key
SUPABASE_SERVICE_ROLE_KEY=your-service-role-key
 
# App URLs
NEXT_PUBLIC_APP_URL=https://your-domain.com
 
# Google OAuth (Optional)
GOOGLE_CLIENT_ID=your-google-client-id
GOOGLE_CLIENT_SECRET=your-google-client-secret
CALLBACK_URL=your-supabase-auth-callback-url
 
# Optional - Analytics configuration
NEXT_PUBLIC_ANALYTICS_ENABLED=false
# NEXT_PUBLIC_POSTHOG_KEY=your-posthog-key
# NEXT_PUBLIC_POSTHOG_HOST=your-posthog-host

Build Process

1. Install dependencies:

npm install

2. Build the application:

npm run build

3. Start the production server:

npm run start

Deployment Options

1. Vercel (Recommended)

Vercel is the platform created by the team behind Next.js and offers the most seamless deployment experience:

1. Create an account at vercel.com
2. Connect your GitHub, GitLab, or Bitbucket repository
3. Configure environment variables in the Vercel dashboard
4. Deploy with zero configuration

Alternatively, use the Vercel CLI:

# Install Vercel CLI
npm install -g vercel
 
# Deploy to production
vercel --prod

Vercel automatically:

• Builds your application with the optimal configuration
• Deploys to a global CDN with edge caching
• Provides SSL certificates and custom domains
• Offers preview deployments for pull requests

2. Netlify

1. Create an account at netlify.com
2. Connect your Git repository
3. Configure build settings:
   • Build command: npm run build
   • Publish directory: .next
4. Add environment variables
5. Deploy your site

3. AWS Amplify

1. Sign in to the AWS Management Console
2. Navigate to AWS Amplify
3. Connect your repository
4. Configure build settings:
   • Build command: npm run build
   • Output directory: .next
5. Add environment variables
6. Deploy your application

4. Self-hosting with Node.js Server

For traditional server environments:

1. Build your application:

npm run build

2. Start the server:

npm run start

3. Use a process manager like PM2 for production:

# Install PM2
npm install -g pm2
 
# Start with PM2
pm2 start npm --name "supastart" -- start
 
# Configure PM2 to start on system boot
pm2 startup
pm2 save

Supabase Configuration

1. Storage Bucket Setup

Ensure your Supabase storage bucket is properly configured:

1. Create a bucket named avatars (or use your preferred name)
2. Configure Storage Policies for access control
3. Update your Next.js configuration to allow images from your Supabase storage:

// next.config.ts
const nextConfig = {
  images: {
    remotePatterns: [
      {
        protocol: 'https',
        hostname: 'your-project-id.supabase.co',
        pathname: '/storage/v1/object/public/avatars/**',
      },
    ],
  },
};

2. RLS Policies

Apply the necessary Row Level Security policies for your user management system:

-- Enable RLS on the storage.objects table
ALTER TABLE storage.objects ENABLE ROW LEVEL SECURITY;
 
-- Policy for authenticated users to upload files
CREATE POLICY "Allow authenticated uploads"
ON storage.objects
FOR INSERT
TO authenticated
WITH CHECK (
  bucket_id = 'avatars' AND
  auth.role() = 'authenticated'
);
 
-- More policies as needed...

Troubleshooting

Common deployment issues and solutions:

1. Supabase Connection Issues

   • Verify Supabase URL and API keys
   • Check network access and CORS settings
   • Ensure service role key is kept secure

2. Build Failures

   • Clear .next directory
   • Verify Node.js version (compatible with Next.js 15.x)
   • Check for missing dependencies

3. Next.js 15 Compatibility

   • Ensure async dynamic APIs are properly implemented:

   // For API routes using cookies
   const cookieStore = cookies();
   const supabase = createRouteHandlerClient({ cookies: () => cookieStore });

   Copy