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.