{"id":59495,"date":"2023-12-26T22:48:01","date_gmt":"2023-12-26T17:18:01","guid":{"rendered":"https:\/\/www.tothenew.com\/blog\/?p=59495"},"modified":"2024-06-10T15:35:06","modified_gmt":"2024-06-10T10:05:06","slug":"aem-with-nextjs-remotespa-a-comprehensive-integration-guide","status":"publish","type":"post","link":"https:\/\/www.tothenew.com\/blog\/aem-with-nextjs-remotespa-a-comprehensive-integration-guide\/","title":{"rendered":"AEM with NextJs RemoteSPA: A Comprehensive Integration Guide"},"content":{"rendered":"

Welcome to our comprehensive guide, where we illuminate the process of updating a Remote Single Page Application (SPA) \u2013 operating independently of AEM \u2013 to seamlessly consume and deliver content authored within Adobe Experience Manager (AEM). Throughout this blog, our focus centers on the local setup of an AEM instance and a Next.js application, as well as the binding necessary to make them work together harmoniously. <\/span>We will also create a demo component and drop it on the home page, exposing you to working on Remote SPA with AEM.<\/span><\/p>\n

Steps to Setup Local AEM Instance with Nextjs App<\/strong><\/h2>\n

Step 1: Setup Local AEM Instance<\/span><\/strong><\/p>\n

    \n
  1. Download the latest AEM SDK<\/a><\/li>\n
  2. Unzip the AEM SDK to ~\/aem-sdk<\/li>\n
  3. Rename the AEM SDK Quickstart Jar file to \u201caem-author-p4502.jar\u201d<\/li>\n
  4. In Terminal, run the following command<\/li>\n<\/ol>\n
    java -jar aem-author-p4502.jar<\/em><\/strong><\/pre>\n
    By using the above command, the AEM Instance is created in Author mode and automatically launches on http:\/\/localhost:4502<\/a>. Then log in using the following credentials:<\/p>\n
    Username: admin
    \nPassword: admin<\/p>\n
    Step 2: Download & Install Wknd Site Package<\/strong><\/p>\n
      \n
    1. Download the latest version of aem-guides-wknd.all.x.x.x.zip<\/a><\/li>\n
    2. Go to http:\/\/localhost:4502\/crx\/packmgr<\/a>.<\/li>\n
    3. Upload the aem-guides-wknd.all.x.x.x.zip downloaded in step 1<\/li>\n
    4. Tap the Install button for the entry aem-guides-wknd.all-x.x.x.zip. (This Step is used for content purposes only.)<\/li>\n<\/ol>\n
      Step 3: Create an AEM Project using AEM Archetype<\/strong><\/p>\n
      Here, we are using AEM Archetype Version 41 and removing the frontend module because we don’t need the frontend module anymore as we are using RemoteSPA.<\/p>\n
      We can change groupId, appId, and app title as required.<\/p>\n
      mvn -B org.apache.maven.plugins:maven-archetype-plugin:3.2.1:generate \\<\/em><\/strong>\r\n\r\n -D archetypeGroupId=com.adobe.aem \\<\/em><\/strong>\r\n -D archetypeArtifactId=aem-project-archetype \\<\/em><\/strong>\r\n -D archetypeVersion=41\\<\/em><\/strong>\r\n -D aemVersion=cloud \\<\/em><\/strong>\r\n -D appTitle=\"WKND App\" \\<\/em><\/strong>\r\n -D appId=\"wknd-app\" \\<\/em><\/strong>\r\n -D groupId=\"com.adobe.aem.guides.wkndapp\" \\<\/em><\/strong>\r\n\u00a0-D frontendModule=\"decoupled\"<\/em><\/strong><\/pre>\n
      Step 4: Changes in Codebase<\/strong><\/p>\n
      A few adjustments are required for AEM SPA Editor compatibility with Remote Next.js SPAs.<\/p>\n
      Set AEM Page as Next.js Remote SPA Template: open ui.content\/src\/main\/content\/jcr_root\/content\/wknd-app\/us\/en\/home\/.content.xml<\/em><\/strong> and update it as below.<\/p>\n
      <?xml version=\"1.0\" encoding=\"UTF-8\"?>\r\n<jcr:root xmlns:sling=\"http:\/\/sling.apache.org\/jcr\/sling\/1.0<\/a>\" xmlns:cq=\"http:\/\/www.day.com\/jcr\/cq\/1.0<\/a>\" xmlns:jcr=\"http:\/\/www.jcp.org\/jcr\/1.0<\/a>\" xmlns:nt=\"http:\/\/www.jcp.org\/jcr\/nt\/1.0<\/a>\"\r\njcr:primaryType=\"cq:Page\">\r\n<jcr:content\r\ncq:template=\"\/conf\/wknd-app\/settings\/wcm\/templates\/spa-next-remote-page\"\r\njcr:primaryType=\"cq:PageContent\"\r\njcr:title=\"WKND App Home Page\"\r\nsling:resourceType=\"wknd-app\/components\/remotepagenext\">\r\n<root\r\njcr:primaryType=\"nt:unstructured\"\r\nsling:resourceType=\"wcm\/foundation\/components\/responsivegrid\">\r\n<responsivegrid\r\njcr:primaryType=\"nt:unstructured\"\r\nsling:resourceType=\"wcm\/foundation\/components\/responsivegrid\">\r\n<text\r\njcr:primaryType=\"nt:unstructured\"\r\nsling:resourceType=\"wknd-app\/components\/text\"\r\ntext=\"&lt;p>Hello World!&lt;\/p>\"\r\ntextIsRich=\"true\">\r\n<cq:responsive jcr:primaryType=\"nt:unstructured\"\/>\r\n<\/text>\r\n<\/responsivegrid>\r\n<\/root>\r\n<\/jcr:content>\r\n<\/jcr:root><\/pre>\n
      Finally, deploy the AEM Project to AEM SDK by using maven command given below<\/p>\n
      mvn clean install -PautoInstallSinglePackage<\/em><\/strong><\/pre>\n
      Step 5: Configure the root AEM Page<\/strong><\/p>\n
        \n
      1. Log in to AEM Author<\/li>\n
      2. Navigate to Sites > WKND App > us > en<\/li>\n
      3. Select the WKND App Home Page, and tap Properties<\/li>\n
      4. Navigate to the SPA tab<\/li>\n
      5. Fill out the Remote SPA Configuration: http:\/\/localhost:3000<\/a><\/li>\n
      6. Tap Save & Close<\/li>\n<\/ol>\n
        Step 6: Clone the Next.js App<\/strong><\/p>\n
        Clone the project to your local machine by using command given below.<\/p>\n
        git clone https:\/\/github.com\/adobe\/aem-headless-app-templates<\/a>\r\n\r\nmkdir aem-nextjs-app\r\ncp -r aem-headless-app-templates\/nextjs-remotespa\/* aem-nextjs-app\/\r\ncd aem-nextjs-app\/<\/pre>\n
        Step 7: Setup Next.js App<\/strong><\/p>\n
          \n
        1. Install node version 16.x\u00a0<\/strong><\/li>\n
        2. Goto location where aem-nextjs-app <\/strong>is present<\/li>\n
        3. Run Command – npm install<\/strong><\/li>\n<\/ol>\n
          Create 2 files under directory aem-nextjs-app\/<\/strong>\u00a0 named as \u201c<\/strong><\/em>.env.development<\/strong><\/em>\u201d<\/strong><\/em> and \u201c<\/strong>.env.production<\/strong>\u201d <\/strong>and update it as below.<\/p>\n
          NEXT_PUBLIC_URL=http:\/\/localhost:3000<\/a>\r\n\r\nNEXT_PUBLIC_AEM_HOST=http:\/\/localhost:4502<\/a>\r\n\r\nNEXT_GRAPHQL_ENDPOINT=\/content\/graphql\/global\/endpoint.json\r\n\r\nNEXT_PUBLIC_AEM_SITE=wknd-app\r\n\r\nNEXT_PUBLIC_AEM_PATH=\/content\/wknd-app\/us\/en\/home\r\n\r\nNEXT_PUBLIC_AEM_ROOT=\/content\/wknd-app\/us\/en<\/pre>\n
          Then execute the build command<\/p>\n
          npm run build<\/strong><\/em><\/pre>\n
          Then, you can start the app in development mode or in production mode by using the command given below.<\/p>\n
          npm run dev<\/em><\/strong><\/pre>\n
          Or<\/p>\n
          npm run start <\/em><\/strong><\/pre>\n
          Step 8: Now your instance is ready for development<\/strong><\/p>\n
          You can create a new component in AEM and React and render it on Page.<\/p>\n
           <\/p>\n
          Steps to create the component in Next.js App and bind it with AEM component<\/strong><\/h2>\n
          Step 1: Create an AEM component<\/strong><\/p>\n
          Create DemoComponent in ui.apps as shown below. There is no need for a DemoComponent.html file.<\/span><\/p>\n
          \"\"<\/span><\/p>\n
          Create a DemoComponent model in the core module as shown below.<\/p>\n
          \"\"<\/p>\n
          Update file with content given in DemoComponentModel.java<\/a> and\u00a0DemoComponentModelImpl.java<\/a>.<\/p>\n
          Here, Sling Exporter is used for exporting Sling Models as JSON objects for consumption by programmatic web consumers such as other web services and JavaScript applications.<\/span><\/p>\n
          \"\"<\/p>\n
          Step 2: Create a component in NextJs App<\/strong><\/p>\n
          Create a file under directory\u00a0 – aem-nextjs-app\/components\/\u00a0 \u00a0 named as AEMDemoComponent.jsx (Download AEMDemoComponent.jsx<\/a> file).<\/p>\n
          \"\"<\/p>\n
          And\u00a0 update the file as below –<\/p>\n
          \"\"<\/p>\n
          Step 3: Create Mapping with AEM Component<\/strong><\/p>\n
          Open import-components.js file and update it as below.<\/p>\n
          MapTo(`${NEXT_PUBLIC_AEM_SITE}\/components\/democomponent`)(AEMDemoComponent)<\/em><\/strong><\/pre>\n
          \"\"\"\"<\/p>\n
          Step 4: Drop the Demo Component on the Home Page<\/strong><\/p>\n
            \n
          1. Go to http:\/\/localhost:4502\/editor.html\/content\/wknd-app\/us\/en\/home.html<\/a><\/li>\n<\/ol>\n
            \"\"<\/p>\n
            2. Drop Component here<\/p>\n
            \"\"<\/p>\n
            \"\"<\/p>\n
            3. Now, open the home page in view as a published mode – \u00a0http:\/\/localhost:4502\/content\/wknd-app\/us\/en\/home.html<\/a> , then inspect the page and check network calls<\/p>\n
            \"\"<\/p>\n
            4. Now check the component on the NextJs App:\u00a0 http:\/\/localhost:3000\/<\/a><\/p>\n
            \"\"<\/p>\n
            5. Inspect the page open the network tab check _app.js call, then search for democomponent.<\/p>\n
            \"\"<\/p>\n
            <\/div>","protected":false},"excerpt":{"rendered":"
            Welcome to our comprehensive guide, where we illuminate the process of updating a Remote Single Page Application (SPA) \u2013 operating independently of AEM \u2013 to seamlessly consume and deliver content authored within Adobe Experience Manager (AEM). Throughout this blog, our focus centers on the local setup of an AEM instance and a Next.js application, as […]<\/p>\n","protected":false},"author":1697,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"iawp_total_views":1243},"categories":[5868],"tags":[4847,5285,5595,5596,2046],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/posts\/59495"}],"collection":[{"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/users\/1697"}],"replies":[{"embeddable":true,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/comments?post=59495"}],"version-history":[{"count":5,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/posts\/59495\/revisions"}],"predecessor-version":[{"id":59631,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/posts\/59495\/revisions\/59631"}],"wp:attachment":[{"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/media?parent=59495"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/categories?post=59495"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/tags?post=59495"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}