Best Practices for Next.js with Optimizely SaaS CMS

Implementing best practices in your Next.js project with Optimizely SaaS CMS can significantly improve performance, maintainability, and developer experience. Here are some key recommendations:

1. Leverage Next.js Native Features for Data Fetching

Avoid using external libraries like Apollo Client for GraphQL queries. Next.js provides robust native support for data fetching that is well-optimized for the framework.

Why Avoid Apollo Client?

• Unnecessary Overhead: Apollo Client is feature-rich but can introduce complexity not needed in Next.js projects.
• Built-in Alternatives: Next.js offers built-in features like cache tags and revalidation that make external GraphQL clients redundant.
• Performance: Using native fetch is typically more performant and aligns better with Next.js optimizations.

2. Utilize Tailwind CSS for Styling

Tailwind CSS is an excellent choice for Next.js projects, offering several advantages:

• Performance: Tailwind generates a minimal CSS file (typically 16-30kb) during build time.
• Developer Experience: Rapid prototyping and consistent design system.
• Integration: Seamless integration with Next.js and excellent community support.

3. Adopt Shadcn UI for Component Library

Shadcn UI offers a collection of reusable components that are fully customizable and work seamlessly with Tailwind CSS and Next.js.

Benefits of Shadcn UI

• Customization: Easily adaptable to your project's design system.
• Accessibility: Components are built with accessibility in mind.
• Performance: Lightweight and optimized for Next.js.

4. Implement Code Generation for GraphQL

Using code generation with Optimizely Graph can significantly improve development efficiency and type safety.

Benefits of Code Generation

• Type Safety: Automatically generated TypeScript types for your GraphQL schema.
• Time-Saving: Eliminates the need to manually type page or block types.
• Consistency: Ensures your code is always in sync with your GraphQL schema.

5. Optimize Images

Leverage Next.js Image component for optimal image loading and performance.

import Image from 'next/image'

export default function OptimizedImage() {
  return (
    <Image
      src="/path/to/image.jpg"
      alt="Description"
      width={500}
      height={300}
      layout="responsive"
    />
  )
}

6. Use Server-Side Rendering Wisely

Leverage SSR for pages that require real-time data, but prefer Static Site Generation (SSG) or Incremental Static Regeneration (ISR) where possible for better performance. Keep an eye on when PPR (Parital Pre Rendering) will be stable -> docs

7. Flexibility Between Optimizely SaaS CMS and Optimizely PaaS CMS

When utilizing all the tools and practices from this webinar, it does not make a significant difference whether you are using Optimizely SaaS CMS or Optimizely PaaS CMS. The main difference lies in the GraphQL schema and the queries used. However, by leveraging code generation, we can easily catch all errors and ensure consistency across both platforms.

8. Don't remove fields in Optimizely SaaS CMS,

When deprecating a property within the Optimizely SaaS CMS that is currently utilized by the application, refrain from immediately removing the field. Instead, introduce a new field, named property_name_v2, to accommodate the updated or alternative functionality. Relocate the original field to a dedicated tab labeled Fields - To Remove within the CMS interface. Following the successful deployment of the production environment and after confirming that the original field is no longer in use, proceed with its safe removal.