Optimizely SaaS CMS Masterclass Agenda

1. Welcome and Introductions
10 minutes
  • Host introduction and background
  • Introduction of guest speaker Fahran
  • Brief overview of the webinar agenda
2. Introduction to Vercel & v0
15 minutes
  • Overview of Vercel – who we are and what we do
  • Introduction to v0
  • Understanding the theory behind ISR
3. Project Setup and Data Fetching
15 minutes
  • Quick overview of the pre-prepared Next.js 15 project
  • Fetching data from Optimizely Graph: Best practices and techniques
  • Implementing efficient data fetching strategies
4. Block Factory Mapper and Image Handling
15 minutes
  • Implementing Block Factory Mapper for flexible content rendering
  • Setting up an image loader for optimized image delivery
  • Discussion: Why use a CDN for image storage?
5. Routing and Component Generation
15 minutes
  • Exploring routing in Next.js 15
  • Using Free Figma Resources and v0 to generate block components
  • Creating corresponding blocks in Optimizely SaaS CMS
6. Content Modeling and GraphQL Queries
15 minutes
  • Best practices for content modeling in Optimizely SaaS CMS
  • Implementing scalable GraphQL queries with fragments
  • Handling multiple items in ContentArea
7. Localization and Code Cleanup
10 minutes
  • Implementing localization in Next.js with Optimizely SaaS CMS
  • Using auto-generated types in blocks for cleaner code
  • Adding SEO metadata and new blocks for the About Page
8. Advanced Features and Integration
15 minutes
  • Implementing Draft Mode with Optimizely Graph and Next.js
  • Integrating with Optimizely Visual Builder
  • Caching strategies and revalidation in Next.js 15 with Optimizely SaaS CMS
9. Optimizely CMS Comparison and Best Practices
10 minutes
  • Comparing Optimizely CMS SaaS and Optimizely CMS PaaS
  • When to choose SaaS vs PaaS
  • Best practices for Next.js 15 with Optimizely SaaS CMS
10. Q&A and Conclusion
15 minutes
  • Open floor for attendee questions and discussions
  • Recap of key takeaways from the webinar
  • Closing remarks and next steps

Setup Requirements

  • Node.js version 18.x or later
  • npm version 8.x or later
  • Git
  • A code editor (e.g., Visual Studio Code)
  • An Optimizely SaaS CMS account - How to get an account?

Key Package Versions

  • Next.js: 15.x
  • React: 19.x
  • TypeScript: 5.x
  • Tailwind CSS: 3.x