Sprout has a special way of building modular pages, using the pageComponentList schema.

Preview

Sprout comes with a AdminPageComponentListField.jsx component that allows for module preview inline in the admin dashboard. Under public/cms you’ll see these screenshots hosted. Add a thumbnailUrl value to your Sanity schemas to allow preview in the page editor.

Adding a new component

1. Add your newly created module schema under the // MODULES headline in the schema.js file.
2. Add a new line with your schema type to pageComponentList.js schema {type: 'NEW_MODULE_TYPE'}
3. Edit the components query in queries.js file to include the proper GROQ query for your data.
4. Create your NewModuleType.jsx component and add it via Next’s dynamic lazy loading feature to pageComponentList.jsx using the existing style like so:

newModuleType: dynamic(() => import('./NewModuleType'),
	{
		loading: PageComponentLoader,
	}
),