Practice & Assessment
Test your understanding of Performance, Optimization, and Deployment
Multiple Choice Questions
5You have a hero image at the top of your homepage. Which next/image prop should you add?
Where should you apply next/font CSS variable classes in the HTML structure?
What is the correct command to apply database migrations in a Vercel production deployment?
Which Next.js caching layer is responsible for storing rendered HTML on the server across multiple requests?
In generateMetadata, you fetch the same data as in the page component. How many HTTP requests actually fire?
Coding Challenges
1Optimize a Photo Gallery for Core Web Vitals
Given a photo gallery page displaying 12 images from a public API (use https://picsum.photos/v2/list?limit=12 for image metadata), optimize it for Core Web Vitals. Requirements: replace all <img> tags with next/image; add priority to the first image (LCP candidate); use the sizes prop for responsive images: '(max-width: 640px) 100vw, (max-width: 1024px) 50vw, 33vw'; whitelist picsum.photos in next.config.ts remotePatterns; add a Google Font (Inter or Playfair Display) using next/font/google applied as a CSS variable; add static metadata with a title and description; add export const revalidate = 3600 to fetch fresh images hourly. Verify with npm run build that zero type errors exist. Time estimate: 20-25 minutes.
Mini Project
Production-Ready E-Commerce Storefront
Build a production-optimized storefront bringing together all course concepts. Requirements: Prisma with SQLite, Product model (id, name, description, price Decimal, stock Int, imageUrl String, categoryId, createdAt), Category model (id, name, slug unique); seed 3 categories and 12 products; /products page with Server Component, filtering by category (search param), pagination (6 per page using offset), Product images via next/image with proper sizes and remotePatterns; /products/[id] dynamic route with generateMetadata for SEO (product name as title, description as meta description, product image as OG image); /cart Client Component using useState for cart state and useOptimistic for instant UI updates; Server Action addToCart with Zod validation; next/font/google applied to the root layout; export const revalidate = 60 on the products page; deploy to Vercel with all environment variables configured; submit the live Vercel URL. All images must use next/image. No type errors on npm run build.