Autogenerate components with XPEDITE
Why start from scratch when XPEDITE can create your Next.js components for you. You choose your Umbraco content types and XPEDITE outputs headless React components that consume the data from the Umbraco Delivery API.
What can be generated?
XPEDITE groups components that can be autogenerated into 3 groups: Templates, Partials, and Blocks. The options that you can configure in the backoffice and the way that props are passed into these components vary, so it is important to understand when to use each.
Templates
A template defines what markup and components we should use to render a page. In xpedite templates are automatically selected based on the document type of the current page.
Partials
A partial is a way to render reusable components onto a page. These will be defined in code usually in a page template file or from other partials. You may use data from normal and element document types.
Blocks
A block is a component that can be rendered as part of a block list. These can be chosen by content editors in the CMS. You must use element document types.
All three of these create a similar file structure though. This will include a tsx file for your React component and the types that this component will use. An index.ts file is also create that references this which makes your import statements cleaner when you need to use it. A css file is also created and imported into your component. Finally a tests folder is created with test files that use Jest and React Testing Library.
You can choose which fields you want to use in the generated code so you can keep your components as lean as possible. Once the code is generated you can add this to your codebase using the 'Apply to codebase' button.
