Adding a serverless.js file breaks expected functionality for Next.js Serverless Component with next-i18next support

I’m trying to deploy the infrastructure required running a multi-environment next.js app with i18n support. There is an issue where the @sls-next/serverless-component fails to add the translation JSON files to the default-lambda src. Someone in another issue (https://github.com/serverless-nextjs/serverless-next.js/issues/383#issuecomment-667716885) suggested extending the sls-next/serverless-component with a serverless.js file. This seems logical and great until adding this file breaks everything else. Adding a serverless.js file to extend a component results in serverless requiring a service and provider property but then still fails to deploy as expected.

serverless.yml

myNextApp:
  component: "./"
  inputs:
    timeout: 30
  memory: 1024

serverless.js

// serverless.js
const NextJsComponent = require("serverless-next.js/serverless");
const fs = require("fs-extra");

class MyNextJsComponent extends NextJsComponent {
  async default(inputs = {}) {
    if (inputs.build !== false) {
      console.log("-> Building...");
      await this.build(inputs);
      console.log("Building was successful");
    }
    console.log("-> Copying locales directory...");
    this.copyLocales();
    console.log("Locale directory was copied successfully");
    console.log("-> Updating manifest...");
    this.updateNonDynamicManifest();
    console.log("Manifest update successful");
    console.log("-> Deploying...");
    return this.deploy(inputs);
  }

  copyLocales() {
    const localeSrc = "./static/locales";
    const localeDest = "./.serverless_nextjs/default-lambda/static/locales";
    fs.copySync(localeSrc, localeDest, { recursive: true });
  }

  updateNonDynamicManifest() {
    const manifestFileName =
      "./.serverless_nextjs/default-lambda/manifest.json";
    const manifestJson = require(manifestFileName);
    manifestJson.pages.ssr.nonDynamic["/index"] = "pages/index.js";
    fs.writeFileSync(manifestFileName, JSON.stringify(manifestJson));
  }
}

module.exports = MyNextJsComponent;

npx serverless output

  Serverless Error ---------------------------------------

  "service" property is missing in serverless.yml

  Get Support --------------------------------------------
     Docs:          docs.serverless.com
     Bugs:          github.com/serverless/serverless/issues
     Issues:        forum.serverless.com

  Your Environment Information ---------------------------
     Operating System:          linux
     Node Version:              12.18.1
     Framework Version:         2.11.1 (standalone)
     Plugin Version:            4.1.2
     SDK Version:               2.3.2
     Components Version:        3.3.0

Installed version

Framework Core: 2.11.1 (standalone)
Plugin: 4.1.2
SDK: 2.3.2
Components: 3.3.0

[medikoo]

@kylekirkby thanks for report, but I believe this belongs to https://github.com/serverless-nextjs/serverless-next.js and not here. Can you open this issue over there?

[dphang]

Sure, I am not sure if they removed ./ specifically but I thought Serverless should resolve a component if it finds a proper serverless.js file in that directory. At least that’s what serverless-next.js does for its nextjs-component: https://github.com/serverless-nextjs/serverless-next.js/blob/84a3f40345c4e7a2e6dd72832ee148372bdcc813/packages/serverless-components/nextjs-component/serverless.js#L1-L3. While developing/maintaining serverless-next.js, I use a local component by pointing to a local nextjs-component directory.