AEM use of Next.js

[satoshi1]

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

[Aditya_Chabuku]

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

[satoshi1]

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