Serverless-next.js: Is compatible serverless-nextjs with Nextjs 10 multilang web?

[anialamo]

Hi I have a doubt, I migrate to Nextjs 10 and now I replaced Component.getInitialProps by export async function getStaticProps (to use router.locale in localhost this works fine! But in Production (AWS CloudFront) this breaks the web app.
This webapp is a multi-lang Nextjs webapp (Now I am using Nextjs i18n )
I added this code:

export async function getStaticProps({locale}) {  
  console.log("server business");
  const response = await import(`../lang/${locale}`);

  return {
    props: {
      business: response.default.business,
      bannerCookies: response.default.bannerCookies,
      contact: response.default.contact,
      routes: response.default.routes,
      language: locale
    }
  }
}

And I cannot see anything in my webapp.
Thanks!

[kylekirkby]

If anyone can shine some light on this issue, that would be awesome!

[markbdaniels]

Hey all, I am also looking for this feature - I am keen to create nextjs app that uses i18n and deploy it with serverless.
This does not seem to work with the @sls-next/serverless-component (been experimenting since yesterday - I get 404s all over).
If I am not mistaken i18n support is new in nextjs (since 10.0.0) - guessing it needs to be added to @sls-next/serverless-component.

[kylekirkby]

Hi @markbdaniels / @anialamo,

It looks like @anialamo was able to achieve this with her staging site - https://test.nootric.com/

@anialamo - could you shed some light on how you achieved this? Is this also deployed with the serverless-next.js component or did you end up deploying with netlify/vercel?

Kind regards,

Kyle

[anialamo]

@kylekirkby Hi! Now this test.nootric.com works with nextjs 9.5.x only... but it works bad in xml-sitemap.com for "Spanish" language.

[kylekirkby]

@anialamo thanks for your reply! I managed to get full i18n functionality working with Next 10. I didn’t use the built in i18n routing functionality that comes with v10, however. I used i18next/react-i18next and I’m generating the full sitemaps with NextJs-sitemap-generator. My plan is to write a blog on this and push an example repo if anyone is interested in my approach 👍

[anialamo]

@kylekirkby dobyou use tranalation in routes? Like web.com/about-us in english and web.com/es/sobre-nosotros ?
What library do you use?
For sitemap do you use Nextjs sitemap generator?
Thanks!

[kylekirkby]

@kylekirkby dobyou use tranalation in routes? Like web.com/about-us in english and web.com/es/sobre-nosotros ?
What library do you use?
For sitemap do you use Nextjs sitemap generator?
Thanks!

Hi @anialamo,

We are not translating routes currently. I think this would be a bit involved since Next.js handles the routes based on the directory structure. Is there a massive SEO benefit to requiring localized routes? I did find one mention of how to utilise localized routes with i18next but looks as though it is only re-writing the URLs and wouldn't be statically supported/exported.
https://stackoverflow.com/questions/63679861/how-to-translate-location-url-when-changing-language

I'm using i18next / react-i18next / i18next-browser-languagedetector / nextjs-sitemap-generator to do all of the i18n bits.

[kylekirkby]

@anialamo I looked into outputting localized routes but sadly Next.js routing capabilities prevent this from being achieved.

https://github.com/vercel/next.js/issues/20091

I did get localized routes working for a single page but that is it. If you're adding more than one page then you'll hit problems :/

I hope the Next.js team gets this resolved...

[kylekirkby]

Here is a link to my Next.js v10 i18n serverless-nextjs starter:

https://github.com/linaro-marketing/serverless-nextjs-i18n-ssg-ssr-starter

[markbdaniels]

Thank you @kylekirkby - will take a look :+1:

[anialamo]

A lot of thanks @kylekirkby!!!! I will review your repository. Thanks for all your help & God bless you!!!