Images & Fonts

next/image

import Image from "next/image";\n\n<Image\n  src="/hero.png"\n  alt="Students learning"\n  width={1200}\n  height={600}\n  priority\n/>

next/image resizes, compresses, serves modern formats and lazy-loads automatically. It is the fastest way to get faster pages.

next/font

import { Inter } from "next/font/google";\nconst inter = Inter({ subsets: ["latin"] });\n\n<html className={inter.className}>

Fonts are self-hosted and optimised — no render-blocking Google Fonts request.

Metadata for SEO

export const metadata = {\n  title: "Courses | KAA Tech Academy",\n  description: "Learn to code and use computers in Ghana.",\n  openGraph: { title: "KAA", url: "https://kaatechacademy.com" },\n};

Metadata from data

export async function generateMetadata({ params }) {\n  const course = await fetchCourse(params.slug);\n  return { title: course.title, description: course.subtitle };\n}

Tip: Every page should set metadata. Good titles and descriptions are the cheapest SEO win you can make.