Adding New Modules

Read time: 1 minute
Mitchell Christ
Mitchell Christ
original power rangers posing exaggeratedly with an belts reading "Modules", comical fire explosion in the distant background, vintage 70s technicolor movie film still

Adding new custom modules is as easy as 3 steps:

  1. Define the schema.
  2. Create a frontend component.
  3. Assign the component in <Modules/>.

Define the schema in Sanity

Create a new object schema type in the modules directory:

sanity/schemas/modules/custom-module.ts
    • import { defineField, defineType } from 'sanity'

export default defineType({
	name: 'custom-module',
	title: 'Custom module',
	type: 'object',
	fields: [
		// ...
	],
})

    Import the newly created schema file:

    sanity/schemas/index.ts
    • // documents
// objects
// modules
import customModule from './modules/custom-module'

export const schemaTypes = [
	// documents
	// objects
	// modules
	customModule,
]

    Then, include the module name to all page documents where you'd like to use the module:

    sanity/schemas/documents/page.ts
    • export default defineType({
	name: 'page',
	title: 'Page',
	type: 'document',
	fields: [
		// ...
		defineField({
			name: 'modules',
			type: 'array',
			of: [
				// ...
				{ type: 'custom-module' },
			],
		}),
	],
})

    Create the Frontend Component

    Create the React component in the Next.js frontend. I recommend defining the schema as TypeScript types within this component file:

    src/ui/modules/CustomModule.tsx
    • export default function CustomModule({}: Props) {
	return (
		<section className="section">
			...
		</section>
	)
}

    Then, add a new case in the <Modules/> handler component:

    src/ui/modules/index.tsx
    • import CustomModule from './CustomModule'

export default function Modules({ modules }: { modules?: Sanity.Module[] }) {
	return (
		<>
			{modules?.map((module) => {
				switch (module._type) {
					// ...
					case 'custom-module':
						return <CustomModule {...module} key={module._key} />

					default:
						return <div data-type={module._type} key={module._key} />
				}
			})}
		</>
	)
}

    Joining References with GROQ

    If your new modules includes references to other Sanity documents, you'll need to update the module GROQ query to "join" the references.

    src/lib/sanity/queries.ts
    • export const modulesQuery = groq`
  ...,
  _type == 'custom-module' => {
    yourReferencedItems[]->
  },
`

    Now you'll have access to the referenced documents' fields.

    original power rangers posing exaggeratedly with an belts reading "Modules", comical fire explosion in the distant background, vintage 80s technicolor movie film still