Image Optimization, SEO, Environment Variables, and Vercel CI/CD Workflow

After building your full-stack app, it’s time to optimize for performance and deploy it to the world. In this module, you’ll:

• Optimize images using <Image />
• Split your JS bundle with dynamic imports
• Use Metadata API for SEO
• Configure .env variables securely
• Deploy your app on Vercel with GitHub integration and custom domains

🖼️ Image Optimization with next/image

Next.js has built-in support for automatic image optimization, resizing, and lazy-loading.

🧪 Example:

import Image from 'next/image';

export default function HeroBanner() {
  return (
    <div className="relative w-full h-[300px]">
      <Image
        src="/banner.jpg"
        alt="Hero"
        fill
        priority
        className="object-cover"
      />
    </div>
  );
}

• fill makes the image cover the container (used with relative)
• priority loads it early for LCP (Largest Contentful Paint)
• Automatically lazy-loads other images

⚙️ Code Splitting with Dynamic Imports

Use next/dynamic to load components only when needed (great for charts, modals, admin panels).

🧪 Example:

import dynamic from 'next/dynamic';

const Chart = dynamic(() => import('@/components/Chart'), {
  loading: () => <p>Loading chart...</p>,
  ssr: false,
});

export default function AnalyticsPage() {
  return (
    <div className="p-4">
      <h2>Analytics</h2>
      <Chart />
    </div>
  );
}

🔍 SEO with Metadata API

Define metadata for every page using the new metadata export.

🧪 src/app/page.tsx

export const metadata = {
  title: "Home | My Next.js App",
  description: "This is the homepage of a modern full-stack app.",
};

export default function HomePage() {
  return <h1>Welcome to My Site</h1>;
}

This sets page <title> and <meta> tags automatically. You can also add Open Graph, Twitter cards, etc.

🛠️ Environment Variables (.env.local)

Store sensitive keys and config here. Example:

DATABASE_URL="..."
NEXTAUTH_SECRET="..."
STRIPE_SECRET_KEY="..."

Access in code via:

const dbUrl = process.env.DATABASE_URL;

Do not expose sensitive keys to the client unless they start with NEXT_PUBLIC_.

☁️ Deploying to Vercel

Vercel is the official hosting platform for Next.js.

✅ Steps:

1. Push your project to GitHub
2. Go to https://vercel.com
3. Click “New Project” → Select GitHub repo
4. Set up build output:
   • Framework: Next.js
   • Root directory: / (default)
   • Environment vars: add .env values
5. Deploy 🚀

🧪 After Deploy:

• Get a live preview link like your-project.vercel.app
• Setup custom domain (e.g. myapp.com) from Vercel dashboard

🔁 CI/CD with GitHub Integration

Every git push triggers automatic deployment.

✅ Example Workflow:

git add .
git commit -m "Add new feature"
git push origin main

Vercel will:

• Install dependencies
• Build the app
• Deploy to production (or preview if on another branch)

🌐 Domain Setup (Optional)

1. Go to your domain provider (e.g. GoDaddy, Namecheap)
2. Point DNS to Vercel nameservers
3. Add domain in Vercel dashboard → assign to your project

✅ Summary

🔜 Coming Up Next:

In Module 11, we’ll integrate Headless CMSs like Sanity or Contentful, use Markdown with MDX, and compare them for real-world content management.

Would you like this module exported as a Markdown blog post too?