Deploying with Serverless-next.js not working RFC Custom rewrites #767
Description
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"