Is there an accelerator to kickstart a new project with latest ArcheType that provides basic framework with pre-existing components for Information Architecture?

[ButhpurKiran]

I am looking for a readily available package that gets added to the project created through latest Archetype and with Navigational components that can get integrated with reactJS/NextJS FE components with bare minimum UI that reads the JSON values and create Sections and Sub-Sections automatically.

[Shashi_Mulugu]

Hi @ButhpurKiran , AEM latest archetype comes with all sorts of proxy components referenced to wcm core components, to use navigation components,  follow below steps:

• spin-up an aem instance
• Install latest service pack which also gets latest core components.
• Create a new project from latest aem archetype
• Build and install to your aem instance.

With this you can create new pages/experience fragments with ootb core components which has inbuilt capabilities to expose content as json to your front end components 

[EstebanBustamante]

Hi @ButhpurKiran 

No, there isn’t anything like that available. I believe the reason is that the architecture you're referring to is already tailored to a specific scenario, whereas the archetype is meant to be a flexible, open starting point.

The closest you might find is a demo project (like the WKND site), but it includes a lot of components and configurations that may not be relevant to your use case.

Hope this helps!

[Jagadeesh_Prakash · Accepted solution]

@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.

[ButhpurKiran]

Thanks @Jagadeesh_Prakash