@buthpurkiran No utility as such, but you can do below steps
Steps to Achieve Your Requirement:
1. Add AEM Core Components to Your Project:
Ensure your project includes the latest version of the AEM Core Components. If not, add the dependency to your Maven pom.xml:
<dependency>
<groupId>com.adobe.cq</groupId>
<artifactId>core.wcm.components.all</artifactId>
<version>2.20.2</version> <!-- Use the latest version -->
<type>zip</type>
</dependency>
2. Enable JSON Exporter:
Ensure the Sling Model Exporter is enabled in your AEM instance. This allows the Core Components to expose their data as JSON.
Use Core Components for Navigation:
The Navigation Component provided by Core Components can be used to create sections and sub-sections dynamically based on the content structure in AEM.
3. Integrate with ReactJS/NextJS:
Fetch the JSON data exposed by the Core Components using APIs like fetch or axios in your ReactJS/NextJS application.
Use the JSON data to dynamically render sections and sub-sections in your front-end.
4. Minimal UI:
The Core Components come with basic styling, which you can customize as needed. For a bare minimum UI, you can use the default styles or override them in your front-end.
5. Example JSON Integration:
The Navigation Component exposes JSON data like this:
{
"items": [
{
"title": "Section 1",
"path": "/content/section-1",
"children": [
{
"title": "Sub-Section 1.1",
"path": "/content/section-1/sub-section-1-1"
}
]
},
{
"title": "Section 2",
"path": "/content/section-2"
}
]
}
6. Use this JSON in your ReactJS/NextJS app to render navigation dynamically.
Install Archetype with Core Components:
When creating a new project using the latest AEM Archetype, include the Core Components by selecting the appropriate options during the setup.