Are you a Sitecore developer working with Sitecore JSS and Next.js, leveraging the power of TypeScript? If so, you know the importance of accurately defining TypeScript types for your Sitecore JSS templates. But what if there was a tool that could automate this process for you, saving you time and effort? Introducing the Sitecore JSS Next.js TypeScript Type Generator – a powerful tool designed to streamline the generation of TypeScript types for Sitecore JSS templates. Developed with Sitecore, XM Cloud, JSS, TypeScript, and auto-generation in mind, this tool simplifies the process of defining TypeScript types for your Sitecore template props.
Visit Sitecore Types Generator to access the TypeScript type generator tool.
Developers can fetch component props by using the console log on component code.
const SampleComponent = (props: any) => {
console.log(props);
return (
<div data-component="sample-component" >
Sample Componenet
</div>
);
};
export default SampleComponent;
A common method to fetch component props is by executing the following command in the browser console:
JSON.parse(document.getElementById("__NEXT_DATA__").textContent).pageProps.layoutData.sitecore.route.placeholders["headless-main"]
This command retrieves the component props from the specified path.
props.pageProps.layoutData.sitecore.route.placeholders
import {TextField,RichTextField,LinkField,ImageField,Field,Text,} from '@sitecore-jss/sitecore-jss-nextjs';
type SampleComponentFields = {
body1?: RichTextField;
body2?: RichTextField;
heading1?: TextField;
heading2?: TextField;
image1?: ImageField;
image2?: ImageField;
link1?: LinkField;
link2?: LinkField;
};
type SampleComponent = {
uid?: string;
componentName?: string;
dataSource?: string;
params?: { [key: string]: string };
fields?: SampleComponentFields;
};
const SampleComponent = (props: SampleComponent) => {
console.log(props);
return <div data-component="sample-component">
<Text field={props?.fields?.heading1} />
</div>;
};
export default SampleComponent;
With this tool, Sitecore developers can streamline their workflow and focus more on building innovative experiences with Sitecore JSS, powered by TypeScript's strong type system. By automating the generation of TypeScript types for Sitecore JSS templates, developers can save time and ensure code consistency across their projects.
Embrace automation and elevate your Sitecore development experience with our TypeScript type generator tool! Visit our GitHub repository to explore the codebase, contribute, and provide feedback. Your comments and pull requests are always welcome as we continue to improve and expand the capabilities of this tool.
GitHub Repository: sitecore-types-generator-app
Explore the tool: Sitecore JSS Next.js TypeScript TypeGenerator