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

Demo

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?

Homework

  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.

Made with Slides.com