Deployment Guide

This guide covers the deployment process, environment configuration, and production considerations for the Yemira Services Nettoyages website.

Production Environment

The website is deployed on Vercel at:

Production URL

https://yemira-website.vercel.app

Vercel provides automatic deployments, serverless functions, edge network CDN, and optimized performance for Next.js applications.

Build Process

Local Build

To create a production build locally:

Install Dependencies

npm install

Installs all required packages from package.json.

Run Production Build

npm run build

Creates an optimized production build in the .next directory.

Test Production Build

npm start

Starts the production server on http://localhost:3000.

Build Output

The build process generates:

Static Assets
Server Components
Client Components
Build Analytics

Optimized images
Minified CSS
Bundled JavaScript
Font files

Build Commands

# Start development server with Turbopack
npm run dev

# Runs on http://localhost:3000 with hot reload

Vercel Deployment

Automatic Deployments

Vercel provides automatic deployments from Git:

Production

Automatic deployment on push to main branch

Preview

Preview deployments for all pull requests

Instant Rollback

One-click rollback to previous deployments

Custom Domains

Support for custom domain configuration

Deployment Configuration

Vercel automatically detects Next.js projects. The default configuration:

vercel.json (implicit)

{
  "buildCommand": "npm run build",
  "devCommand": "npm run dev",
  "installCommand": "npm install",
  "framework": "nextjs"
}

Advanced Vercel Configuration

Create a vercel.json file for custom configuration:

{
  "git": {
    "deploymentEnabled": {
      "main": true
    }
  },
  "headers": [
    {
      "source": "/(.*)",
      "headers": [
        {
          "key": "X-Content-Type-Options",
          "value": "nosniff"
        },
        {
          "key": "X-Frame-Options",
          "value": "DENY"
        },
        {
          "key": "X-XSS-Protection",
          "value": "1; mode=block"
        }
      ]
    }
  ]
}

Environment Variables

Set environment variables in Vercel dashboard:

Navigate to Project Settings

Go to your project in Vercel dashboard → Settings → Environment Variables

Add Variables

Add any required environment variables:

API keys
Third-party service tokens
Feature flags

Select Environments

Choose which environments get each variable:

Production
Preview
Development

Never commit sensitive environment variables to Git. Use Vercel’s environment variable management instead.

SEO & Metadata Configuration

Metadata Function

The website uses a centralized metadata function for SEO optimization. Location: lib/utils.ts

import { Metadata } from 'next';

export function constructMetada({
  title = "YEMIRA Service Nettoyage - 10 ans d'expertise et d'éfficacité",
  description = "Yemira Services Nettoyages est une entreprise spécialisée dans le nettoyage en profondeur, forte de 10 ans d'expérience. Nous proposons des services de qualité pour les secteurs résidentiel, commercial et industriel, en mettant l'accent sur la satisfaction de nos clients et le professionnalisme de notre équipe.",
  icons = '/favicon.ico',
  image = '/YEMIRA Service nettoyage og.png',
}: {
  title?: string;
  description?: string;
  icons: string;
  image: string;
}): Metadata {
  return {
    title,
    description,
    icons,
    metadataBase: new URL('https://yemira-website.vercel.app'),
    openGraph: {
      title,
      description,
      url: 'https://yemira-website.vercel.app',
      siteName: 'YEMIRA service',
      images: [
        {
          url: image,
          alt: 'Image illustrant un service de nettoyage professionnel, mettant en avant propreté et efficacité',
        },
      ],
      locale: 'fr_FR',
      type: 'website',
    },
    twitter: {
      card: 'summary_large_image',
      creator: '@echicouamalthus',
      title,
      description,
      images: [image],
    },
    alternates: {
      canonical: 'https://yemira-website.vercel.app/',
    },
  };
}

SEO Features

Open Graph
Twitter Cards
Meta Tags
Structured Data

Facebook & LinkedIn Sharing

Custom title and description
OG image (1200x630 recommended)
Site name and URL
Locale: French (fr_FR)
Type: website

Usage in Layout

app/layout.tsx

import { constructMetada } from '@/lib/utils';

export const metadata = constructMetada;

export default function RootLayout({ children }) {
  // ...
}

Override metadata for specific pages by exporting a custom metadata object or generateMetadata function in page files.

Performance Optimization

Next.js Optimizations

Image Optimization

Automatic image optimization
WebP/AVIF format conversion
Lazy loading by default
Responsive images

Code Splitting

Automatic route-based splitting
Dynamic imports for components
Shared chunk optimization
Tree shaking

Server Components

Zero-JS server components
Reduced client bundle size
Faster initial page load
Better SEO

Edge Runtime

Vercel Edge Network
Global CDN distribution
Low latency worldwide
Automatic caching

Lighthouse Scores

Target Lighthouse scores for production:

Performance

90+

Fast load times with optimized assets

Accessibility

90+

WCAG 2.1 AA compliance

Best Practices

90+

Security headers and HTTPS

SEO

100

Complete meta tags and structured data

Performance Best Practices

Image Optimization

// Use Next.js Image component
import Image from 'next/image';

<Image
  src={imageSrc}
  alt="Descriptive alt text"
  width={900}
  height={900}
  loading="lazy"
  placeholder="blur" // for imported images
/>

Font Optimization

/* Preload critical fonts */
@font-face {
  font-family: 'Circular Std Book';
  font-display: swap; /* Prevent FOIT */
  src: url('../assets/fonts/CircularStd-Book.woff') format('woff');
}

Dynamic Imports

// Lazy load heavy components
import dynamic from 'next/dynamic';

const HeavyComponent = dynamic(() => import('./HeavyComponent'), {
  loading: () => <p>Loading...</p>,
  ssr: false // if client-only
});

CSS Optimization

Tailwind CSS purges unused styles in production
Critical CSS inlined automatically
CSS modules for component styles

Production Checklist

Pre-Deployment

Test production build locally (npm run build && npm start)

Verify all images have proper alt text

Check responsive design on all breakpoints

Test all links and navigation

Validate forms and interactive elements

Configuration

Set environment variables in Vercel

Configure custom domain (if applicable)

Set up SSL certificate (automatic on Vercel)

Configure redirects and rewrites

SEO & Analytics

Verify meta tags and Open Graph data

Submit sitemap to Google Search Console

Set up analytics (Google Analytics, Plausible, etc.)

Configure robots.txt

Performance

Run Lighthouse audit (aim for 90+ scores)

Test on slow 3G network

Verify Core Web Vitals

Check bundle sizes

Post-Deployment

Smoke test all critical paths

Verify contact forms and CTAs work

Test WhatsApp links on mobile

Monitor error logs in Vercel dashboard

Monitoring & Maintenance

Vercel Analytics

Vercel provides built-in analytics:

Real User Monitoring

Track actual user performance metrics

Core Web Vitals

LCP, FID, CLS measurements

Function Logs

Monitor serverless function execution

Edge Logs

Track edge function performance

Error Tracking

Consider integrating error tracking:

Sentry
LogRocket
Vercel Logs

npm install @sentry/nextjs

Comprehensive error tracking with source maps

Update Strategy

Regular Updates

Update dependencies monthly:

npm outdated
npm update

Security Patches

Apply security updates immediately:

npm audit
npm audit fix

Testing

Test updates in preview deployments before merging to main

Troubleshooting

Build Failures

Common Issues:

TypeScript errors: Run npm run build locally
Missing dependencies: Check package.json
Image optimization errors: Verify image imports

Solutions:

# Clear build cache
rm -rf .next
npm run build

# Clear npm cache
rm -rf node_modules package-lock.json
npm install

Performance Issues

Diagnosis:

Run Lighthouse audit
Check Vercel Analytics
Analyze bundle sizes

Optimization:

Lazy load components
Optimize images
Enable compression
Use server components

Deployment Errors

Check:

Vercel build logs
Environment variables
Next.js version compatibility
Node.js version (specified in package.json)

Fix:

package.json

{
  "engines": {
    "node": ">=18.0.0"
  }
}

Security Considerations

HTTPS

Automatic SSL on Vercel with Let’s Encrypt

Security Headers

Configure CSP, HSTS, X-Frame-Options

Environment Variables

Never commit secrets to Git

Dependency Scanning

Regular npm audit checks

Recommended Headers

vercel.json

{
  "headers": [
    {
      "source": "/(.*)",
      "headers": [
        {
          "key": "X-Content-Type-Options",
          "value": "nosniff"
        },
        {
          "key": "X-Frame-Options",
          "value": "DENY"
        },
        {
          "key": "X-XSS-Protection",
          "value": "1; mode=block"
        },
        {
          "key": "Referrer-Policy",
          "value": "strict-origin-when-cross-origin"
        }
      ]
    }
  ]
}

Architecture

Learn about the website architecture and technology stack

Components

Explore component documentation

Vercel Docs

Official Vercel documentation

Next.js Docs

Official Next.js documentation

Website Details

​Deployment Guide

​Production Environment

Production URL

​Build Process

​Local Build

​Build Output

​Build Commands

​Vercel Deployment

​Automatic Deployments

Production

Preview

Instant Rollback

Custom Domains

​Deployment Configuration

​Environment Variables

​SEO & Metadata Configuration

​Metadata Function

​SEO Features

​Usage in Layout

​Performance Optimization

​Next.js Optimizations

Image Optimization

Code Splitting

Server Components

Edge Runtime

​Lighthouse Scores

​Performance Best Practices

​Production Checklist

​Monitoring & Maintenance

​Vercel Analytics

Real User Monitoring

Core Web Vitals

Function Logs

Edge Logs

​Error Tracking

​Update Strategy

​Troubleshooting

​Security Considerations

HTTPS

Security Headers

Environment Variables

Dependency Scanning

​Recommended Headers

​Related Resources

Architecture

Components

Vercel Docs

Next.js Docs

Build docs developers (and LLMs) love

Deployment Guide

Production Environment

Build Process

Local Build

Build Output

Build Commands

Vercel Deployment

Automatic Deployments

Deployment Configuration

Environment Variables

SEO & Metadata Configuration

Metadata Function

SEO Features

Usage in Layout

Performance Optimization

Next.js Optimizations

Lighthouse Scores

Performance Best Practices

Production Checklist

Monitoring & Maintenance

Vercel Analytics

Error Tracking

Update Strategy

Troubleshooting

Security Considerations

Recommended Headers

Related Resources