Netlify Deployment Guide

Introduction

This guide explains how to deploy your Next.js e-commerce application to Netlify, both manually and via GitHub integration, including how to set up environment variables.

Manual Deployment (Without GitHub)

2Create a Netlify Account

If you don't have one, sign up at https://app.netlify.com/

3Manual Deployment

  1. Go to Netlify dashboard
  2. Click "Add a new project" in the top navigation
  3. Click "Deploy menually"
  4. Drag and drop your project folder into the deployment area
  5. Netlify will automatically detect and deploy your Next.js app
Netlify drag and drop interface

Environment Variables Configuration

1Netlify Environment Variables Setup

  1. Login to your Netlify dashboard
  2. Select your site from the list
  3. Navigate to: Site settings → Build & deploy → Environment
  4. Click on "Edit variables" button
    5. Netlify environment variables location

    Netlify environment variables configuration page

  5. Click "Add variable" to create new entries

    6. Adding new environment variables

2E-commerce App Variables

For your Next.js e-commerce app, set these variables:

            NEXT_PUBLIC_API_BASE_URL= http://Give-your-backend-api-link
E-commerce app variables

Example e-commerce app variables in Netlify

Note: All Next.js variables exposed to the browser must be prefixed with NEXT_PUBLIC_

3Admin Dashboard Variables

For your Vite React dashboard, set these variables:

              VITE_API_BASE_URL = http://Give-your-backend-api-link
Dashboard variables

Example dashboard variables in Netlify

Important: Vite only exposes variables prefixed with VITE_ to the client-side code

Custom Domain Setup (Optional)

1Add Custom Domain

  1. In Netlify, go to "Site settings" → "Domain management"
  2. Click "Add custom domain"
  3. Enter your domain name (e.g., www.yourstore.com)
  4. Follow the DNS configuration instructions

2SSL Certificate

Netlify provides free SSL certificates:

  1. Go to "Site settings" → "Domain management"
  2. Click "Verify DNS configuration"
  3. Netlify will automatically provision an SSL certificate

Troubleshooting

Common Issues

Next Steps