Next.js Developer Training

What We'll Cover

  • Overview of the API
    - JS SDK
    - REST (Swagger)
     
  • How to Create a new Page Module (Testimonials)
     
  • How to Create a new Dynamic Page List (Products)
     
  • Homework

What You'll Need

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

Create a Page Module
(Testimonials)

  1. Create a New Content Model (Testimonial)
    - Name (text)
    - Quote (HTML)
     
  2. Create a New Page Module (Testimonials)
    - Title (text)
    - Testimonials (linked content, child)

Create a Page Module
(Testimonials)...

  • Add the Page Module to a Page
     
  • Add the Code in the website
     
  • Deploy Changes

Create a Dynamic Page List (Products)...

  1. Create a New Content Model (Products)
    - Title (text)
    - URL Slug (Friendly URL custom field)
    - SKU (text)
    - Image (image)
     
  2. Create a new Page Module (Product Details)
     
  3. Create a Dynamic Page (/products/products-dynamic)

Create a Dynamic Page List (Products)...

  1. Add the Product Details Module to the Dynamic Page
     
  2. Add Code to output details of product
     
  3. Deploy Changes

Homework

  1. Add the Testimonials Module as we did in our session
     
  2. Set up the Dynamic Product Pages as we did in our session

Video recording of our session will be provided.

Homework...

3. Add a new Product Listing Page Module that will output a listing of all Products. This should be added to the page /products.

Video recording of our session will be provided.

Bonus: Can you resolve the URLs for each Product page?

Hint: Review how the Blog Listing page works

Next.js Developer Training

By James Vidler

Next.js Developer Training

  • 574