Advanced Next.js Developer Training

What We'll Cover

  • How you optimize your image assets
  • Next.js API Routes
  • Content Sync

What You'll Need

  • An Agility Instance based on the Blog Starter
  • A GitHub account
  • The Blog Starter code (on GitHub)

Image Optimization

  • Agility offers URL-based asset transcoding to optimize images
  • Get a smaller version of an image
  • Set crop-type
  • Adjust quality
  • Use modern .webp format automatically if supported

Next.js API Routes

  • Build APIs using Node.js
  • Are located in the /page/api/* directory
  • Deploys as serverless functions (if hosting environment supports it)
  • Learn more

Creating a New API Route


Content Sync

  1. Reduce lookups and latency to the Agility CDN
  2. Keep a local cache of your content
  3. Faster builds, and response time

Content Sync

  1. Add the environment variable AGILITY_SYNC=true
  2. This will only work if the app has access to a persistent filesystem
  3. Does not work in a serverless environment

How to enable Sync?


  1. Turn on AGILITY_SYNC
  2. Add a new products.js API route that will return a JSON array of all products
  3. Verify you can access this endpoint with a curl request

Video recording of our session will be provided.

Advanced Next.js Training

By James Vidler

Advanced Next.js Training

  • 437