Skip to content
This repository has been archived by the owner on May 10, 2021. It is now read-only.

Support for i18n in Next 10 #75

Merged
merged 22 commits into from
Jan 3, 2021
Merged

Support for i18n in Next 10 #75

merged 22 commits into from
Jan 3, 2021

Conversation

lindsaylevine
Copy link
Contributor

@lindsaylevine lindsaylevine commented Nov 12, 2020

This PR makes the necessary changes to all page types to support i18n in Next 10 on Netlify

TO-DO:

  • cypress tests
  • double fallback redirects (this is an issue identified in a separate test repo)
  • investigate if getStaticProps locales loop is actually an issue

and probably more

@lindsaylevine lindsaylevine added the type: bug code to address defects in shipped code label Nov 12, 2020
@justintemps
Copy link

justintemps commented Nov 13, 2020

Thanks @lindsaylevine! This does indeed seem to resolve the main issue. I'm able to deploy now. 🥳

However, it seems like default locales are only getting applied to dynamic routes.

/my/[dynamicRoute] gets the default language but /homepage gets the Netlify 404 page. I have to prepend the locale to make it work: /en-gb/homepage.

This works locally with next start so I don't think the issue is on the next.js side.

Also, as you mentioned, index routes cause build errors. Thanks for opening an issue.

@victorhqc
Copy link

Hey @lindsaylevine seems that the code works!

@justintemps probably this could be fixed with redirects right?

@lindsaylevine
Copy link
Contributor Author

hey yall - udpate on this while diagnosing the index route stuff. the i18n internals feel very unreliable to me right now. can read more here -> vercel/next.js#19126. that said, i'm not sure how quickly i can get this merged until i hear from them/feel a bit more confident about the index route and dataRoute ambiguities.

tests/i18n.test.js Outdated Show resolved Hide resolved
@lindsaylevine
Copy link
Contributor Author

lindsaylevine commented Nov 17, 2020

@justintemps i just saw this edited part of your comment

--

However, it seems like default locales are only getting applied to dynamic routes.

/my/[dynamicRoute] gets the default language but /homepage gets the Netlify 404 page. I have to prepend the locale to make it work: /en-gb/homepage.

This works locally with next start so I don't think the issue is on the next.js side.

--

can you elaborate on that for me? or (sorry to ask) share a repro repo? are you saying /my/whatever without any locale in the url gets the defaultLocale, but /homepage without anything in the url is defaulting to.. english? is this for SSG'd pages? a repro would probably be best but ill just try to repro myself

@justintemps
Copy link

justintemps commented Nov 19, 2020

@lindsaylevine here's a repro repo: https://github.com/justintemps/next-js-blog

I've deployed this to Netlify so you can see what I mean: https://priceless-wiles-007723.netlify.app

/about doesn't work while /en/about does. But Next.js doesn't prepend the default locale to the path so /about should be the path for English while /fr/about would be the path for French.

Hope that's useful.

@lindsaylevine
Copy link
Contributor Author

thank you so so much @justintemps, that will be enormously helpful! i'm hoping to pivot back to this soon, we've been busy over at github.com/netlify/netlify-plugin-nextjs which will be the next "iteration" of NoN 👀 .

@lindsaylevine
Copy link
Contributor Author

@justintemps - sorry for the delay fixing your issue. the recent commit should solve it. i forked your repo (thanks again for that!!!) and demo the fix here, which uses this branch's latest: https://justin-i18n-repro.netlify.app/. let me know if this works as intended! <3

@TejasQ
Copy link

TejasQ commented Nov 30, 2020

This is awesome! Could y'all publish this to a canary/prerelease version on npm? No worries if not, but the fix would be majorly helpful to me. 😇

@justintemps
Copy link

Thanks so much for working on this @lindsaylevine! I just have one issue which may boil down to my misunderstanding how i18n works with dynamic routes.

These all work:
https://justin-i18n-repro.netlify.app/
https://justin-i18n-repro.netlify.app/it
https://justin-i18n-repro.netlify.app/fr

These also work
https://justin-i18n-repro.netlify.app/about
https://justin-i18n-repro.netlify.app/it/about
https://justin-i18n-repro.netlify.app/fr/about

This works
https://justin-i18n-repro.netlify.app/posts/something-random

But this doesn't
https://justin-i18n-repro.netlify.app/fr/posts/something-random
https://justin-i18n-repro.netlify.app/it/posts/something-random

Which is curious because these do work (from my original repro repo)
https://priceless-wiles-007723.netlify.app/it/posts/something-random
https://priceless-wiles-007723.netlify.app/fr/posts/something-random

Feel like I'm missing something, but I'm not sure what.

@lindsaylevine lindsaylevine mentioned this pull request Nov 30, 2020
@lindsaylevine
Copy link
Contributor Author

This is awesome! Could y'all publish this to a canary/prerelease version on npm? No worries if not, but the fix would be majorly helpful to me. 😇

@TejasQ is there a benefit to you to having a canary version vs just installing the branch like npm install netlify/next-on-netlify#ll/i18n aka
"next-on-netlify": "github:netlify/next-on-netlify#ll/i18n" ?

@TejasQ
Copy link

TejasQ commented Nov 30, 2020

That works too!

@TejasQ
Copy link

TejasQ commented Nov 30, 2020

Okay, so I've tried it and it doesn't work yet, but I've got all the confidence in y'all.

@lindsaylevine
Copy link
Contributor Author

@TejasQ ugh, yeah, Soon TM <3 can you tell me what page type is your index route / index.js - aka are you using getStaticProps vs getServerSideProps vs no data-fetching etc?

@TejasQ
Copy link

TejasQ commented Nov 30, 2020

It's using getStaticProps with revalidate.

More details:

image

@karesztrk
Copy link

@lindsaylevine's draft solves the problem here

@lindsaylevine
Copy link
Contributor Author

@justintemps just force-pushed a fixup. all the links in your last comment should work now!!!

note for everyone else reading this reply: this is just a fix for the page types of justin's project/repo he provided (aka pages without props, see commit for more info). i'm still picking through the other page types. hoping to be done by next week!

@justintemps
Copy link

@lindsaylevine yup, that does it. Thanks for all the work on this!

@lindsaylevine
Copy link
Contributor Author

hey all - was a little optimistic with my schedule this week and some pain points with redirects in this work. updated time estimation/goal would be a merge of this PR before the holidays.

Copy link
Collaborator

@FinnWoelm FinnWoelm left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Wow, this is a BEAST!! 🤯🤯🤯 Fantastic job figuring out all these edge cases and managing all these irregularities with the prerender-manifest, etc... 🎉

I think i18n is still missing for two page types: getInitialProps and getStaticProps with fallback: true, but I think you'll be able to add those relatively easily. Maybe you can add two simple Cypress tests for them first (e.g., visit("/en/shows/:id")), so that we catch them in the future.

Then, there is one tiny bug that currently treats all pages with revalidate as if they were not revalidate pages. You already spotted this in the snapshot, where the revalidate page suddenly has an entry for preview mode, which of course it doesn't need because it's always SSRed. I flagged what I believe to be the issue's source in getPrerenderManifest. It's just one line.

Other than that, everything seems to work great. The other comments I made are just about style and naming and code location, which are really just food for thought. I'll let you call the shots on those! 💥

Let me know if something I wrote doesn't make sense.

Amazing work, @lindsaylevine 😊 ♥️

lib/helpers/getPrerenderManifest.js Outdated Show resolved Hide resolved
lib/helpers/getPrerenderManifest.js Outdated Show resolved Hide resolved
lib/helpers/getPrerenderManifest.js Outdated Show resolved Hide resolved
lib/pages/withoutProps/redirects.js Outdated Show resolved Hide resolved
lib/pages/withoutProps/setup.js Outdated Show resolved Hide resolved
tests/__snapshots__/i18n.test.js.snap Show resolved Hide resolved
lib/helpers/getPrerenderManifest.js Outdated Show resolved Hide resolved
lib/pages/getServerSideProps/redirects.js Outdated Show resolved Hide resolved
tests/__snapshots__/i18n.test.js.snap Show resolved Hide resolved
@@ -15,8 +9,7 @@ const getLocaleRoutesForI18n = ({ route, srcRoute }) => {
return i18n.locales.map((locale) => {
return {
route: `/${locale}${route}`,
dataRoute: getI18nDataRoute(route, locale),
nakedRoute: route,
dataRoute: getDataRouteForRoute(route, locale),
};
});
};
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

rn this is only used by gsp/pages.js, might be able to do without this or rename it

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

nvm its not used anywhere LuL

lib/helpers/getPrerenderManifest.js Outdated Show resolved Hide resolved
lib/helpers/isRouteInPrerenderManifest.js Show resolved Hide resolved
lib/pages/getStaticPropsWithRevalidate/redirects.js Outdated Show resolved Hide resolved
lib/pages/getStaticProps/redirects.js Outdated Show resolved Hide resolved
@lindsaylevine
Copy link
Contributor Author

ubuntu 10 tests fail due to reported bug in 10.0.4 vercel/next.js#20456, which i upgraded to so we could remove the backslash pages-manifest patch

options:

  1. delay removing the backslash patch and stay at 10.0.3
  2. ignore the ubuntu failure for now

as number 2 isnt ideal, i will delay the fix and remove my recent commit

@lindsaylevine lindsaylevine merged commit a2b9364 into main Jan 3, 2021
lindsaylevine added a commit that referenced this pull request Jan 3, 2021
- Support for i18n in Next 10 ([#75](#75))
- dependabot: node-notifier from 8.0.0 to 8.0.1 ([#125](#125))
- Expose Netlify function params as netlifyFunctionParams ([#119](#119))
- Fix: local cypress cache control ([#118](#118))
- Fix: add res.finished to createResponseObject ([#117](#117))
- Fix: Windows support ([#101](#101))
- Improve logs for specified functions/publish dirs ([#100](#100))
lindsaylevine added a commit that referenced this pull request Jan 6, 2021
- Hotfix: index gsp pages caused builds to fail in i18n ([#75](#131))
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
type: bug code to address defects in shipped code type: feature code contributing to the implementation of a feature and/or user facing functionality
Projects
None yet
Development

Successfully merging this pull request may close these issues.

8 participants