How to globally configure serializers for @sanity/block-content-to-react?

You're asking a great question that many developers encounter when working with Portable Text! The good news is that you absolutely can avoid repeating the serializers configuration everywhere.

First, a quick note: the tutorial you're following uses @sanity/block-content-to-react, which is now deprecated. You should use @portabletext/react instead, which is the modern, officially supported library. The API is similar but with some improvements (like using components instead of serializers, and value instead of node).

The Solution: Create a Reusable Component

The best approach is to create your own wrapper component that includes all your custom serializers/components by default. Here's how:

// components/PortableTextRenderer.jsx
import { PortableText } from '@portabletext/react'
import YouTubeEmbed from './YouTubeEmbed'

// Define your components once
const ptComponents = {
  types: {
    youtube: ({ value }) => <YouTubeEmbed url={value.url} />,
    // Add other custom types here
  },
  marks: {
    // Custom marks if needed
  },
  // Other customizations
}

// Create your reusable component
export default function PortableTextRenderer({ value }) {
  return <PortableText value={value} components={ptComponents} />
}

Now throughout your app, you can simply use:

<PortableTextRenderer value={mySchemaType.body} />

This gives you a single place to manage all your Portable Text rendering logic. If you need to add support for another embed type or custom block, you just update this one component.

When You Need Flexibility

If you occasionally need to override or extend the default components for specific use cases, you can make your wrapper more flexible:

export default function PortableTextRenderer({ value, components = {} }) {
  // Merge custom components with defaults
  const mergedComponents = {
    types: { ...ptComponents.types, ...components.types },
    marks: { ...ptComponents.marks, ...components.marks },
    // ... merge other categories
  }
  
  return <PortableText value={value} components={mergedComponents} />
}

This pattern is exactly what you're looking for—it centralizes your configuration while keeping things DRY (Don't Repeat Yourself). The Portable Text documentation covers more advanced customization patterns if you need them.

Remember to migrate to @portabletext/react when you can, as it has better TypeScript support and is actively maintained!