ui.frontend doesn't work with NextJS and TypeScript

[giri-jeedigunta]

Expected Behaviour

Trying to replace the ui.frontend code with NextJS setup. The mvn builds are successful. I modified clientlibs to pick up the nextjs js and css files from the static build directory.

When I open the aemcloud instance the page is blank. Edit / Preview nothing works/

• Will this setup work with NextJS?
• Are there any examples with nextJS?
• I'm using Typescript is that be a constraint?

Actual Behaviour

• Expecting something to show up as NextJS under the hood uses React.

Reproduce Scenario (including but not limited to)

• Replace the ui.frontend with a simple NextJS app.

Steps to Reproduce

• Once ui.frontend code is replaced run mvn clean install

Platform and Version

Sample Code that illustrates the problem

aem-guides-wknd-spa/ui.frontend/clientlib.config.js

Line 33 in 8250eec

const ASSET_MANIFEST_PATH = path.join(BUILD_DIR, 'asset-manifest.json');

/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 ~ Copyright 2020 Adobe Systems Incorporated
 ~
 ~ Licensed under the Apache License, Version 2.0 (the "License");
 ~ you may not use this file except in compliance with the License.
 ~ You may obtain a copy of the License at
 ~
 ~     http://www.apache.org/licenses/LICENSE-2.0
 ~
 ~ Unless required by applicable law or agreed to in writing, software
 ~ distributed under the License is distributed on an "AS IS" BASIS,
 ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 ~ See the License for the specific language governing permissions and
 ~ limitations under the License.
 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/

const path = require('path');
//const getEntrypoints = require('./utils/entrypoints');
const glob = require('glob');
const { collapseTextChangeRangesAcrossMultipleVersions } = require('typescript');

//console.log(path.join(__dirname+'/out/_next/'));

const BUILD_DIR = path.join(__dirname);
const CLIENTLIB_DIR = path.join(
  __dirname,
  '..',
  'ui.apps',
  'src',
  'main',
  'content',
  'jcr_root',
  'apps',
  'poc-spa-site',
  'clientlibs'
);
//const ASSET_MANIFEST_PATH = path.join(BUILD_DIR, 'asset-manifest.json');

//const entrypoints = getEntrypoints(ASSET_MANIFEST_PATH);
const entrypoints = glob.sync(`out/_next/**/*`);
console.log(entrypoints);

// Config for `aem-clientlib-generator`
module.exports = {
  context: BUILD_DIR,
  clientLibRoot: CLIENTLIB_DIR,
  libs: {
    name: 'clientlib-react',
    allowProxy: true,
    categories: ['poc-spa-site.react'],
    serializationFormat: 'xml',
    cssProcessor: ['default:none', 'min:none'],
    jsProcessor: ['default:none', 'min:none'],
    assets: {
      // Copy entrypoint scripts and stylesheets into the respective ClientLib
      // directories (in the order they are in the entrypoints arrays). They
      // will be bundled by AEM and requested from the HTML. The remaining
      // chunks (placed in `resources`) will be loaded dynamically
      js: entrypoints.filter(fileName => fileName.endsWith('.js')),
      css: entrypoints.filter(fileName => fileName.endsWith('.css')),

      // Copy all other files into the `resources` ClientLib directory
      resources: {
        cwd: '.',
        files: ['**/*.*'],
        flatten: false,
        ignore: entrypoints
      }
    }
  }
};

Logs taken while reproducing problem