Expand my Community achievements bar.

Radically easy to access on brand approved content for distribution and omnichannel performant delivery. AEM Assets Content Hub and Dynamic Media with OpenAPI capabilities is now GA.

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

Community Advisor

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

Thanks,

Aditya Chabuku

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