Is there an accelerator to kickstart a new project with latest ArcheType that provides basic framework with pre-existing components for Information Architecture? | Community
Skip to main content
ButhpurKiran
Level 4
June 9, 2025
Solved

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

  • June 9, 2025
  • 3 replies
  • 662 views

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.

This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.
Best answer by Jagadeesh_Prakash

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

 

3 replies

Shashi_Mulugu
Community Advisor
Community Advisor
June 9, 2025

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
Community Advisor and Adobe Champion
Community Advisor and Adobe Champion
June 10, 2025

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!

Esteban Bustamante
Jagadeesh_Prakash
Community Advisor
Jagadeesh_PrakashCommunity AdvisorAccepted solution
Community Advisor
June 11, 2025

@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
Level 4
June 11, 2025