AEM use of Next.js | Community
Skip to main content
S
satoshi1
Level 2
September 27, 2022

AEM use of Next.js

  • September 27, 2022
  • 1 reply
  • 2494 views

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/how-to/example-apps/next-js.html?lang=ja

 

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/spa-editor/react/integrate-spa.html?lang=ja

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

1 reply

Aditya_Chabuku
Community Advisor
Aditya_ChabukuCommunity Advisor
Community Advisor
October 16, 2022

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
    S
    satoshi1Author
    Level 2
    October 18, 2022

    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

      Terms & ConditionsAccessibility statement

      Loading footer...