[feature] Enhance Next.js README

[Kinbaum]

When following along with the readme for the Next.js remote app, the instructions are missing the following:

• where to call ModelManager.initializeAsync()
• how to set up appropriate rewrites for /.model.json and /content/:path*
• how to implement the AEMResponsiveGrid component

When comparing this to the aem-guides-wknd-graphql tutorial, I am able to get it close to working using Next.js, but within the AEM environment itself, I'm running into problems where:

• I cannot drag and drop components in my responsive grid (I see nodes added to the jcr, but nothing renders on the screen).
• running into issue with rewrites (possible infinite loop). I notice this model called over and over (http://localhost:4502/content/wknd-app/us/en/home/jcr:content/root/responsivegrid.model.json)
• not properly initializing the model manager (I tried calling this in _app.tsx but it doesn't seem to work)

If we could get a working example of a Next.js implementation that would be great.

Here is my pages/_app.tsx file (assuming this is the right place to call the ModelManager)

import { ModelClient, ModelManager } from '@adobe/aem-spa-page-model-manager';
import type { AppProps } from 'next/app';

const modelClient = new ModelClient(process.env.NEXT_PUBLIC_AEM);

ModelManager.initializeAsync({
    modelClient
});

export default function MyApp({ Component, pageProps }: AppProps) {
    return (
        <Component { ...pageProps} />
    );
}

In my pages/index.tsx I am adding the AEMResponsiveGrid component like so:

export default function Home() {
    return (
        <AEMResponsiveGrid
            pagePath="/content/wknd-app/us/en/home"
            itemPath="root/responsivegrid" />
    )
}

NOTE: This produces the infinite loop I mentioned above.

Here are some screenshots of what I see in the console:

I am handling rewrites in my next.config.ts like so:

async rewrites() {
    return [
        {
            source: '/content/:path*',
            destination: '/api/proxy/:path*'
        },
        {
            source: '/.model.json',
            destination: '/api/proxy/.model.json'
        }
    ]
}

Produces the following error within the AEM environment

Uncaught (in promise) TypeError: Cannot read property 'includes' of undefined
    at resolveRewrites (resolve-rewrites.js?3fb8:7)
    at Router._callee$ (router.js?7a5c:132)
    at tryCatch (runtime.js?96cf:63)
    at Generator.invoke [as _invoke] (runtime.js?96cf:293)
    at Generator.eval [as next] (runtime.js?96cf:118)
    at asyncGeneratorStep (asyncToGenerator.js?a954:3)
    at _next (asyncToGenerator.js?a954:25)

I was able to get the images to pull from the DAM and use the next/image component with the rewrites.

[Kinbaum]

@sharanyavinod Would you be able to assist me with this?

[sharanyavinod]

@Kinbaum Could you share your Next.js code as well if possible, please? On the AEM side - are you using a new app generated with the archetype or reusing the WKND app?

[Kinbaum]

I am just reusing the WKND app that has the remotenextpage. I created a new page under /content/wknd-app/us/en using that resource type. Then in my next app, I’ve satisfied all of the requirements like creating the /api/getNextProps endpoint and assets-manifest.

I’ve essentially shared all of my files from my next app. There is only a single page with a responsive grid component. I’ll put together a zip so you can see.

[Kinbaum]

@sharanyavinod Here is a stripped down version that shows the issue when connecting to AEM.
Code Sample.zip

Run yarn to install and yarn dev to run the app. Should load on localhost:3000
Once that is done, on the AEM side under the wknd-app folder (using the graphql tutorial) create a page, selecting the Next.js template:

After running through all of those steps, open up your developer tools and the open the page just created. You should immediately begin seeing errors like the following:

The one that specifically stands out to me is this one:
Uncaught Error: Edit context could not be fetch due to an error in the edit context servlet

[Kinbaum]

@sharanyavinod have you had the chance to look; any thoughts?

[sharanyavinod]

@Kinbaum Regarding the query-

I cannot drag and drop components in my responsive grid (I see nodes added to the jcr, but nothing renders on the screen).

For container components, the child components need to be mapped in order for them to be rendered. I see that you have MapTo within the components itself - for eg: in the AEMText component. However, since this component isn't used, the mapping never gets executed. You could either have a common file which imports all components and performs the mappings and import them within the parent component OR just import/map possible child components within the container.
Some References:
https://github.com/adobe/aem-guides-wknd-graphql/blob/feature/spa-editor/react-app/src/App.js#L15
https://github.com/adobe/aem-guides-wknd-spa/blob/React/latest/ui.frontend/src/index.js#L30

Regarding the remaining errors, will take a closer look and get back to you. Thank you for the detailed descriptions and snippets!

[Kinbaum]

Thanks @sharanyavinod, after restructuring my components and importing them into my _app.tsx file, this allowed them to show up inside/outside of AEM. However within AEM, I still cannot edit due to that error.

Also, another thing I noticed is that SSR doesn’t seem to be working using these MapTo components. Any thoughts on that?

[sharanyavinod]

@Kinbaum Thank you for bringing this issue to our attention. Please use the newly released v1.3.8 of spa.project.core in your AEM project to resolve the issue.
For fetching the model.json you can use pass the AEM host to ModelClient during initialization as you've illustrated in the snippets above. The location of initialization is also as already done. I'll add this to the docs for future clarity.

Regarding SSR issues related to MapTo, if unrelated to the current issue, could you please create a separate issue with the corresponding details?

[Kinbaum]

Thank you @sharanyavinod. That seems to have resolved the editing capability in AEM. For the SSR problem, I have created a separate issue to track that #40