Deploying with Serverless-next.js not working RFC Custom rewrites

Describe the bug

Hi! I am deploying my nextjs app with module serverless-next.js: “^1.15.0-alpha.2” because I have a custom serverless.js to copy in public/locale directory my translation files. Using this code: https://github.com/serverless-nextjs/serverless-next.js/issues/383#issuecomment-667716885

And then I deployed to my AWS @lambdaedge and also works fine!

// Add the Next SASS plugin nextConfig = withSass(nextConfig);

module.exports = nextConfig;`

Describe the bug

Now I added recently this code in my next.confg.js for RFC - Custom Routes https://github.com/vercel/next.js/discussions/9081 but when I try to test in my server this “rewrite” fails e.g. if I write myserver.com/en/business this returns 404 error Page not found.

let nextConfig = {
     publicRuntimeConfig: {
          localeLanguages, 
          localeSubpaths
     },
     async rewrites() {
       return [
          { source: "/en/business", destination: "/en/empresas" },
          { source: "/en/contact", destination: "/en/contacto" }, 
          { source: "/en/legal-notice", destination: "/en/aviso-legal" }, 
          { source: "/en/privacy-policy", destination: "/en/politica-privacidad" }, 
          { source: "/en/cookies-policy", destination: "/en/politica-cookies" }, 
          { source: "/en/configure-cookies", destination: "/en/configurar-cookies" }, 
       ];
     }
};

Actual behavior

Expected behavior

In my localhost this works fine! BUT in AWS lambda edge & CloudFront this does not work.

Screenshots/Code/Logs

My serverless.js has the following code:

// 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 = './public/locales';
    const localeDest = './.serverless_nextjs/default-lambda/public/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;`

I tried this link Serverless components - Build your own https://github.com/serverless/components#build-your-own creating my own serverless.js file at root with this sample, but it always returns me this error:

“service” property is missing in serverless.yml

// serverless.js

const { Component } = require('@serverless/core');

class MyBlog extends Component {
  async deploy(inputs) {
    console.log('Deploying a serverless blog'); // Leave a status update for users deploying your Component with --debug
    this.state.url = outputs.url; // Save state
    return outputs;
  }
}

module.exports = MyBlog;

`

What can I do to update my MyNextJsComponent serverless.js file to allow RFC -Custom redirects/rewrites? Thanks!!!

Versions

serverless-next.js: “^1.15.0-alpha.2”

[dphang]

Not sure, I think ["post-build.js"] might be opening it up in editor, you probably meant to execute it by doing ["node post-build.js"]?

[anialamo]

A lot of thanks @dphang !!! You are excellent! This new postBuildCommands help me a lot!!! God bless you!!!