Performance & SEO

import Image from "next/image";
import dynamic from "next/dynamic";
import { Suspense } from "react";

// Image optimization — automatic WebP, sizing, lazy load
function HeroImage() {
  return (
    <Image
      src="/hero.jpg"
      alt="Hero image"
      width={1200}
      height={600}
      priority  // above-fold — eagerly load
      placeholder="blur"
      blurDataURL="data:image/jpeg;base64,..."
    />
  );
}

// Dynamic import — code splitting
const HeavyChart = dynamic(() => import("./HeavyChart"), {
  loading: () => <div>Chart loading...</div>,
  ssr: false  // client-side only
});

// Suspense — streaming
function Dashboard() {
  return (
    <div>
      <HeroImage />
      <Suspense fallback={<div>Loading chart...</div>}>
        <HeavyChart />
      </Suspense>
    </div>
  );
}

// app/layout.tsx
export const metadata = {
  metadataBase: new URL("https://codingskillup.com"),
  title: {
    default: "CodingSkillUp",
    template: "%s | CodingSkillUp"
  },
  description: "JavaScript, React, Next.js seekho — free",
  openGraph: {
    type: "website",
    siteName: "CodingSkillUp",
    images: [{ url: "/og-image.png", width: 1200, height: 630 }]
  },
  twitter: {
    card: "summary_large_image",
    site: "@codingskillup"
  }
};

// Dynamic metadata for lesson pages
export async function generateMetadata({ params }) {
  const lesson = getLesson(params.slug);
  return {
    title: lesson.title,
    description: lesson.description,
    openGraph: { title: lesson.title, description: lesson.description }
  };
}