Your achievements

Level 1

0% to

Level 2

Tip /
Sign in

Sign in to Community

to gain points, level up, and earn exciting badges like the new
Bedrock Mission!

Learn more

View all

Sign in to view all badges

AEM use of Next.js

Avatar

Level 2

I am considering using React and Next.js for AEM headless.
The following page has an example of Next.js usage, is this a remote SPA example?

https://experienceleague.adobe.com/docs/experience-manager-learn/getting-started-with-aem-headless/h...

 

Or is it possible to automatically generate files from ui.frontend to ui.apps like React's SPA Editor even when using Next.js?

(How will SSG/SSR files be handled in AEM?)

https://experienceleague.adobe.com/docs/experience-manager-learn/getting-started-with-aem-headless/s...

2 Replies

Avatar

Level 5

Hi @satoshi1 , 

Adobe gave good documentation and an example of how to run AEM+Next.js 

https://github.com/adobe/aem-guides-wknd-graphql/blob/main/next-js/pages/index.js 

/* code give as example */
import aemHeadlessClient from '../lib/aem-headless-client';
export async function getServerSideProps() {
  const res = await aemHeadlessClient.getAllAdventures();
  const adventures = res?.data?.adventureList?.items || [];

  if (!adventures.length) {
    return {
      notFound: true,
    }
  }

  return {
    props: {
      adventures
    }
  };

Also, Read this to implement ISR if required.  https://tsh.io/blog/ssr-vs-ssg-in-nextjs/ 

 

 

 

Hope this Helps,

Aditya.Ch

Avatar

Level 2

Hi @Aditya_Chabuku ,


Thank you for your reply.

The intent of my question was if it is possible to use Next.js in AEM environment only.

 

I checked the Adobe documentation, including the link you provided. As a result, I found that if I want to use Next.js in AEM, I need a server other than AEM at this time.

 

AEM: GraphQL API
Next.js: Execute SSR/ISR from AEM GraphQL API on a separate server that is not AEM