Metadata, SEO, images, fonts and performance — Next.js — App Router, Folder Structure, Rendering and Full Stack with SQL Server

6. Metadata, SEO, images, fonts and performance

IntermediateMediumLesson 6 of 8

tsx

export const metadata = { title: "Products", description: "All products", alternates: { canonical: "/products" },
  openGraph: { images: ["/og.png"] } };
import Image from "next/image";
<Image src="/hero.jpg" alt="Shop hero" width={1200} height={600} priority />      // resized, lazy, modern formats
import { Inter } from "next/font/google";
const inter = Inter({ subsets: ["latin"] });                                        // self-hosted font, no layout shift

File conventions sitemap.ts, robots.ts, opengraph-image.tsx, icon.tsx generate SEO files. Performance: Server Components (less JS), streaming, next/image, next/link prefetching, dynamic import() for heavy client components, bundle analyzer.