feat: migrate to sanity-image, enhance page builder, update next-sanity

[kenjonespizza]

Description: Image System Overhaul & Page Builder Enhancements

This PR introduces significant improvements to the image handling system, enhances the page builder architecture, and modernizes the design system with better typography and visual editing support.

What to review

PageBuilder Improvements (See internal slack thread here)

• Refactored render functions to use proper React components (JSX) instead of function calls to prevent hook ordering issues
• Fixed useOptimistic hook compatibility for drag-and-drop functionality in visual editing
• Improved empty state handling with Sanity data attributes
• Better TypeScript support with PageBuilderSection type definition

Enhanced CTA Component

• Complete redesign with rich content support:
  • Eyebrow text
  • Body content
  • Image integration
• Dark theme support with built-in theme toggle
• Flexible content alignment options (text-first/image-first layouts)
• Visual enhancement with background tile patterns

Major version bump: next-sanity v10.0.14 → v11.1.0

• All three import changes from Migration Guide

Replaced next-sanity/image with sanity-image library

• Removed: Legacy CoverImage.tsx component
• Added: New SanityImage.tsx wrapper component using the sanity-image library
• Updated: All image components (Avatar, CoverImage usage, PortableText) to leverage the new image system
• Enhanced: Image configuration in next.config.ts with proper remote patterns for security

Dependencies & Upgrades

• next-sanity: v10.0.14 → v11.1.0
• sanity: v4.5.0 → v4.8.1
• Added: sanity-image v1.0.0
• Removed: styled-components (no longer needed on frontend/ ... right?)
• Updated import paths to align with new next-sanity structure

Misc minor changes

• Changing an import from ./client-utils to @/app/client-utils
• Various styling improvements throughout the application
• Added IBM Plex Mono font family alongside Inter

Testing

I know a lot of files changed here and testing woulda been simpler with less changes and a couple PR's, but this was initiated by a great PR by Johnny (we closed that PR since he wasn't merging changes into his fork)

Testing might be easiest by:

1. Installing the template based on this branch by running npm create sanity@latest -- --template https://github.com/sanity-io/sanity-template-nextjs-clean/tree/feat-updates-images-and-page-builder and then importing sample content with npm run import-sample-data

• The Biggest changes will be:
  • On /about. page - the CTA block in the page builder has been updated
  • Test the drag and drop functionality on the /about page
  • Cropping images in the CTA block
  • Cropping images for a Blog Post cover image and a PTE embedded image

2. Browsing through the Changed files

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Preview	Comments	Updated (UTC)
template-nextjs-clean	Ready	Preview	Comment	Sep 22, 2025 10:45pm

[socket-security]

Review the following changes in direct dependencies. Learn more about Socket for GitHub.

Diff	Package	Supply Chain Security	Vulnerability	Quality	Maintenance	License
	eslint-config-next@​15.5.0 ⏵ 15.5.3	+1		+3	+1
	@​types/​react-dom@​19.1.7 ⏵ 19.1.9	+1		+2	+1
	@​types/​react@​19.1.11 ⏵ 19.1.12	+1		+2	+1
	sanity-image@​1.0.0
	@​tailwindcss/​postcss@​4.1.12 ⏵ 4.1.13	+1		+2	+1
	@​types/​node@​20.19.11 ⏵ 20.19.13
	next@​15.5.0 ⏵ 15.5.3	+2		+1	+1
	tailwindcss@​4.1.12 ⏵ 4.1.13	+1		+2	+1
	@​sanity/​image-url@​1.1.0 ⏵ 1.2.0				+1
	sanity-plugin-asset-source-unsplash@​4.0.1 ⏵ 3.1.0	+2
	@​sanity/​vision@​4.5.0 ⏵ 4.9.0	+1		+1
	eslint@​9.34.0 ⏵ 9.35.0	+1			+2
	sanity@​4.5.0 ⏵ 4.9.0	+1
	next-sanity@​10.0.14 ⏵ 11.1.0	+1
	@​sanity/​client@​7.9.0 ⏵ 7.11.1	+1

View full report

[ChrisLaRocque]

I love Ken Jones. Left comments on a few files but things look good