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

Adobe Summit 2023 [19th to 23rd March, Las Vegas and Virtual] | Complete AEM Session & Lab list

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

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

The ultimate experience is back.

Join us in Vegas to build skills, learn from the world's top brands, and be inspired.

Register Now