Expand my Community achievements bar.

Don’t miss the AEM Skill Exchange in SF on Nov 14—hear from industry leaders, learn best practices, and enhance your AEM strategy with practical tips.

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