Discussion on using code input for <BlockContent> frontend and transitioning to Next.js with Sanity

import {defineConfig} from 'sanity'
import {codeInput} from '@sanity/code-input'

export default defineConfig({
  // ... other config
  plugins: [
    codeInput(),
    // ... other plugins
  ]
})

{
  name: 'content',
  title: 'Content',
  type: 'array',
  of: [
    {type: 'block'},
    {
      type: 'code',
      options: {
        withFilename: true,           // Allow adding filenames
        highlightedLines: true,        // Enable line highlighting
        languageAlternatives: [        // Optional: restrict languages
          {title: 'JavaScript', value: 'javascript'},
          {title: 'TypeScript', value: 'typescript'},
          {title: 'Python', value: 'python'}
        ]
      }
    }
  ]
}

import {PortableText} from '@portabletext/react'

const components = {
  types: {
    code: ({value}) => (
      <pre data-language={value.language}>
        <code>{value.code}</code>
      </pre>
    )
  }
}

// In your component
<PortableText value={content} components={components} />

import Refractor from 'react-refractor'
import javascript from 'refractor/lang/javascript'

Refractor.registerLanguage(javascript)

const components = {
  types: {
    code: ({value}) => (
      <div>
        {value.filename && <div className="filename">{value.filename}</div>}
        <Refractor
          language={value.language || 'text'}
          value={value.code}
        />
      </div>
    )
  }
}