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.

vercel/next.js#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 👍

[anialamo]

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

[Gosev]

Is there a massive SEO benefit to requiring localized routes?

TBH yes there is :) The url is right there with the title and H1 as signals for SEO.

[Lunnatica]

Hi!

Did anyone achieve this without using another library (just using the i18n functionality of next.js v10)? It seems to work fine with all the locales except for the default one, which does not work when I use server side navigation (it returns 404 in the subpages unless I add the prefix of the default locale).

[benjipott]

related to #721

[markbdaniels]

related to #721

Great news, thank you Ben.

[ignaciolarranaga]

Hi guys, I'm with the alpha.45 but the initial redirection based on the detected locale seems to be not working. Might be the case? I've it working on local but not on the deployed site, for example I send es and I does not jump to /es.
I can correctly access the Spanish site though, but I have to manually put the /es.

[dphang]

Hi guys, I'm with the alpha.45 but the initial redirection based on the detected locale seems to be not working. Might be the case? I've it working on local but not on the deployed site, for example I send es and I does not jump to /es.
I can correctly access the Spanish site though, but I have to manually put the /es.

Might be you need to forward Accept-Language header. If still does not work after, please open a new issue

I think this one can be resolved since the localization is implemented (hopefully with most of the bugs fixed, except perhaps improvements to better third-party integration with next-i18n etc.)