Rosetta i18n example #11841
Merged
Rosetta i18n example #11841
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Stats from current PRDefault Server ModeGeneral
Client Bundles (main, webpack, commons)
Client Bundles (main, webpack, commons) Modern
Legacy Client Bundles (polyfills)
Client Pages
Client Pages Modern
Client Build Manifests
Rendered Page Sizes
Serverless Mode (Increase detected
|
| zeit/next.js canary | StarpTech/next.js rosetta_i18n_example | Change | |
|---|---|---|---|
| buildDuration | 10.4s | 10.1s | -291ms |
| nodeModulesSize | 61 MB | 61 MB | ✓ |
Client Bundles (main, webpack, commons)
| zeit/next.js canary | StarpTech/next.js rosetta_i18n_example | Change | |
|---|---|---|---|
| main-HASH.js gzip | 6.25 kB | 6.25 kB | ✓ |
| webpack-HASH.js gzip | 746 B | 746 B | ✓ |
| de003c3a9d30..e3d8.js gzip | 10.2 kB | 10.2 kB | ✓ |
| framework.HASH.js gzip | 39.1 kB | 39.1 kB | ✓ |
| Overall change | 56.3 kB | 56.3 kB | ✓ |
Client Bundles (main, webpack, commons) Modern
| zeit/next.js canary | StarpTech/next.js rosetta_i18n_example | Change | |
|---|---|---|---|
| main-HASH.module.js gzip | 4.78 kB | 4.78 kB | ✓ |
| webpack-HASH..dule.js gzip | 746 B | 746 B | ✓ |
| de003c3a9d30..dule.js gzip | 6.78 kB | 6.78 kB | ✓ |
| framework.HA..dule.js gzip | 39.1 kB | 39.1 kB | ✓ |
| Overall change | 51.5 kB | 51.5 kB | ✓ |
Legacy Client Bundles (polyfills)
| zeit/next.js canary | StarpTech/next.js rosetta_i18n_example | Change | |
|---|---|---|---|
| polyfills-HASH.js gzip | 26.3 kB | 26.3 kB | ✓ |
| Overall change | 26.3 kB | 26.3 kB | ✓ |
Client Pages
| zeit/next.js canary | StarpTech/next.js rosetta_i18n_example | Change | |
|---|---|---|---|
| _app.js gzip | 1.24 kB | 1.24 kB | ✓ |
| _error.js gzip | 3.15 kB | 3.15 kB | ✓ |
| hooks.js gzip | 664 B | 664 B | ✓ |
| index.js gzip | 222 B | 222 B | ✓ |
| link.js gzip | 2.03 kB | 2.03 kB | ✓ |
| routerDirect.js gzip | 279 B | 279 B | ✓ |
| withRouter.js gzip | 278 B | 278 B | ✓ |
| Overall change | 7.86 kB | 7.86 kB | ✓ |
Client Pages Modern
| zeit/next.js canary | StarpTech/next.js rosetta_i18n_example | Change | |
|---|---|---|---|
| _app.module.js gzip | 594 B | 594 B | ✓ |
| _error.module.js gzip | 2.08 kB | 2.08 kB | ✓ |
| hooks.module.js gzip | 370 B | 370 B | ✓ |
| index.module.js gzip | 212 B | 212 B | ✓ |
| link.module.js gzip | 1.48 kB | 1.48 kB | ✓ |
| routerDirect..dule.js gzip | 271 B | 271 B | ✓ |
| withRouter.m..dule.js gzip | 270 B | 270 B | ✓ |
| Overall change | 5.28 kB | 5.28 kB | ✓ |
Client Build Manifests
| zeit/next.js canary | StarpTech/next.js rosetta_i18n_example | Change | |
|---|---|---|---|
| _buildManifest.js gzip | 61 B | 61 B | ✓ |
| _buildManife..dule.js gzip | 61 B | 61 B | ✓ |
| Overall change | 122 B | 122 B | ✓ |
Serverless bundles Overall increase ⚠️
| zeit/next.js canary | StarpTech/next.js rosetta_i18n_example | Change | |
|---|---|---|---|
| _error.js gzip | 233 kB | 233 kB | |
| 404.html gzip | 1.32 kB | 1.32 kB | ✓ |
| hooks.html gzip | 956 B | 956 B | ✓ |
| index.js gzip | 233 kB | 233 kB | -45 B |
| link.js gzip | 243 kB | 243 kB | -225 B |
| routerDirect.js gzip | 241 kB | 241 kB | |
| withRouter.js gzip | 241 kB | 241 kB | |
| Overall change | 1.19 MB | 1.19 MB |
Stats from current PRDefault Server ModeGeneral
Client Bundles (main, webpack, commons)
Client Bundles (main, webpack, commons) Modern
Legacy Client Bundles (polyfills)
Client Pages
Client Pages Modern
Client Build Manifests
Rendered Page Sizes
Serverless Mode (Decrease detected ✓)General
Client Bundles (main, webpack, commons)
Client Bundles (main, webpack, commons) Modern
Legacy Client Bundles (polyfills)
Client Pages
Client Pages Modern
Client Build Manifests
Serverless bundles Overall decrease ✓
|
Stats from current PRDefault Server ModeGeneral
Client Bundles (main, webpack, commons)
Client Bundles (main, webpack, commons) Modern
Legacy Client Bundles (polyfills)
Client Pages
Client Pages Modern
Client Build Manifests
Rendered Page Sizes
Serverless Mode (Decrease detected ✓)General
Client Bundles (main, webpack, commons)
Client Bundles (main, webpack, commons) Modern
Legacy Client Bundles (polyfills)
Client Pages
Client Pages Modern
Client Build Manifests
Serverless bundles Overall decrease ✓
|
Stats from current PRDefault Server ModeGeneral
Client Bundles (main, webpack, commons)
Client Bundles (main, webpack, commons) Modern
Legacy Client Bundles (polyfills)
Client Pages
Client Pages Modern
Client Build Manifests
Rendered Page Sizes
Serverless Mode (Increase detected
|
| zeit/next.js canary | StarpTech/next.js rosetta_i18n_example | Change | |
|---|---|---|---|
| buildDuration | 11.5s | 11.6s | |
| nodeModulesSize | 61 MB | 61 MB | ✓ |
Client Bundles (main, webpack, commons)
| zeit/next.js canary | StarpTech/next.js rosetta_i18n_example | Change | |
|---|---|---|---|
| main-HASH.js gzip | 6.25 kB | 6.25 kB | ✓ |
| webpack-HASH.js gzip | 746 B | 746 B | ✓ |
| de003c3a9d30..a4ac.js gzip | 10.2 kB | 10.2 kB | ✓ |
| framework.HASH.js gzip | 39.1 kB | 39.1 kB | ✓ |
| Overall change | 56.3 kB | 56.3 kB | ✓ |
Client Bundles (main, webpack, commons) Modern
| zeit/next.js canary | StarpTech/next.js rosetta_i18n_example | Change | |
|---|---|---|---|
| main-HASH.module.js gzip | 4.78 kB | 4.78 kB | ✓ |
| webpack-HASH..dule.js gzip | 746 B | 746 B | ✓ |
| de003c3a9d30..dule.js gzip | 6.78 kB | 6.78 kB | ✓ |
| framework.HA..dule.js gzip | 39.1 kB | 39.1 kB | ✓ |
| Overall change | 51.5 kB | 51.5 kB | ✓ |
Legacy Client Bundles (polyfills)
| zeit/next.js canary | StarpTech/next.js rosetta_i18n_example | Change | |
|---|---|---|---|
| polyfills-HASH.js gzip | 26.3 kB | 26.3 kB | ✓ |
| Overall change | 26.3 kB | 26.3 kB | ✓ |
Client Pages
| zeit/next.js canary | StarpTech/next.js rosetta_i18n_example | Change | |
|---|---|---|---|
| _app.js gzip | 1.24 kB | 1.24 kB | ✓ |
| _error.js gzip | 3.15 kB | 3.15 kB | ✓ |
| hooks.js gzip | 664 B | 664 B | ✓ |
| index.js gzip | 222 B | 222 B | ✓ |
| link.js gzip | 2.03 kB | 2.03 kB | ✓ |
| routerDirect.js gzip | 279 B | 279 B | ✓ |
| withRouter.js gzip | 278 B | 278 B | ✓ |
| Overall change | 7.86 kB | 7.86 kB | ✓ |
Client Pages Modern
| zeit/next.js canary | StarpTech/next.js rosetta_i18n_example | Change | |
|---|---|---|---|
| _app.module.js gzip | 594 B | 594 B | ✓ |
| _error.module.js gzip | 2.08 kB | 2.08 kB | ✓ |
| hooks.module.js gzip | 370 B | 370 B | ✓ |
| index.module.js gzip | 212 B | 212 B | ✓ |
| link.module.js gzip | 1.48 kB | 1.48 kB | ✓ |
| routerDirect..dule.js gzip | 271 B | 271 B | ✓ |
| withRouter.m..dule.js gzip | 270 B | 270 B | ✓ |
| Overall change | 5.28 kB | 5.28 kB | ✓ |
Client Build Manifests
| zeit/next.js canary | StarpTech/next.js rosetta_i18n_example | Change | |
|---|---|---|---|
| _buildManifest.js gzip | 61 B | 61 B | ✓ |
| _buildManife..dule.js gzip | 61 B | 61 B | ✓ |
| Overall change | 122 B | 122 B | ✓ |
Serverless bundles Overall increase ⚠️
| zeit/next.js canary | StarpTech/next.js rosetta_i18n_example | Change | |
|---|---|---|---|
| _error.js gzip | 233 kB | 233 kB | |
| 404.html gzip | 1.33 kB | 1.33 kB | ✓ |
| hooks.html gzip | 957 B | 957 B | ✓ |
| index.js gzip | 233 kB | 233 kB | -87 B |
| link.js gzip | 243 kB | 243 kB | |
| routerDirect.js gzip | 241 kB | 241 kB | -78 B |
| withRouter.js gzip | 241 kB | 241 kB | |
| Overall change | 1.19 MB | 1.19 MB |
lfades
reviewed
Apr 13, 2020
Comment on lines
1
to
31
| import Link from 'next/link' | ||
| import Head from 'next/head' | ||
| import useI18n from '../hooks/use-i18n' | ||
| import { contentLanguageMap } from '../lib/i18n' | ||
|
|
||
| const Contact = ({ lng }) => { | ||
| const i18n = useI18n(lng) | ||
|
|
||
| return ( | ||
| <div> | ||
| <Head> | ||
| <meta http-equiv="content-language" content={contentLanguageMap[lng]} /> | ||
| </Head> | ||
| <h1>{i18n.t('contact.email')}</h1> | ||
| <div>Current locale: {i18n.activeLocale}</div> | ||
| <Link href={{ pathname: '/contact', query: { lng: 'de' } }}> | ||
| <a>Change language SSR to 'de'</a> | ||
| </Link> | ||
| </div> | ||
| ) | ||
| } | ||
|
|
||
| export async function getServerSideProps({ query }) { | ||
| return { | ||
| props: { | ||
| lng: query.lng || 'en', // OR detect default language based on header OR user setting | ||
| }, // will be passed to the page component as props | ||
| } | ||
| } | ||
|
|
||
| export default Contact |
There was a problem hiding this comment.
Let's move this page to pages/[lng]/contact.js and use getStaticProps, there's no good use case for having a serverless function decide the language of the page if you can do that at build time 👍
There was a problem hiding this comment.
You're right but it must not be a good use case. I want to demonstrate the different modes.
There was a problem hiding this comment.
We prefer to demonstrate good use cases in examples always, rather than show the usage of some method, we have docs and learning lessons for that.
For this case getStaticProps is better.
There was a problem hiding this comment.
Did you get my point? I'd like to demonstrate that the i18n solution works in all modes CSR, SSG, SSR.
There was a problem hiding this comment.
Yes, and it surely does, but you don't have to demonstrate it, instead you have to show the community the best way of using it 👍
There was a problem hiding this comment.
Would it be worth having 3 separate examples? Whichever you decide should be default behavior can be with-i18n and then you can have the two other mode be with-i18n-(csr|ssg).
While I understand and relate to both points, I do think as an official example, something should be as concise and as close to prod-ready as possible instead of forcing the user to figure out what's actually core/necessary.
I suggest
with-i18nsince no one will know what "rosetta" is when browsing the directory list ¯\(ツ)/¯
There was a problem hiding this comment.
Ah, then with-i18n-rosetta would be better for grouping 😉
lfades
reviewed
Apr 13, 2020
Stats from current PRDefault Server ModeGeneral
Client Bundles (main, webpack, commons)
Client Bundles (main, webpack, commons) Modern
Legacy Client Bundles (polyfills)
Client Pages
Client Pages Modern
Client Build Manifests
Rendered Page Sizes
Serverless ModeGeneral
Client Bundles (main, webpack, commons)
Client Bundles (main, webpack, commons) Modern
Legacy Client Bundles (polyfills)
Client Pages
Client Pages Modern
Client Build Manifests
Serverless bundles
|
Stats from current PRDefault Server ModeGeneral
Client Bundles (main, webpack, commons)
Client Bundles (main, webpack, commons) Modern
Legacy Client Bundles (polyfills)
Client Pages
Client Pages Modern
Client Build Manifests
Rendered Page Sizes
Serverless ModeGeneral
Client Bundles (main, webpack, commons)
Client Bundles (main, webpack, commons) Modern
Legacy Client Bundles (polyfills)
Client Pages
Client Pages Modern
Client Build Manifests
Serverless bundles
|
Stats from current PRDefault Server ModeGeneral
Client Bundles (main, webpack, commons)
Client Bundles (main, webpack, commons) Modern
Legacy Client Bundles (polyfills)
Client Pages
Client Pages Modern
Client Build Manifests
Rendered Page Sizes
Serverless ModeGeneral
Client Bundles (main, webpack, commons)
Client Bundles (main, webpack, commons) Modern
Legacy Client Bundles (polyfills)
Client Pages
Client Pages Modern
Client Build Manifests
Serverless bundles
|
Stats from current PRDefault Server ModeGeneral
Client Bundles (main, webpack, commons)
Client Bundles (main, webpack, commons) Modern
Legacy Client Bundles (polyfills)
Client Pages
Client Pages Modern
Client Build Manifests
Rendered Page Sizes
Serverless ModeGeneral
Client Bundles (main, webpack, commons)
Client Bundles (main, webpack, commons) Modern
Legacy Client Bundles (polyfills)
Client Pages
Client Pages Modern
Client Build Manifests
Serverless bundles
|
Stats from current PRDefault Server ModeGeneral
Client Bundles (main, webpack, commons)
Client Bundles (main, webpack, commons) Modern
Legacy Client Bundles (polyfills)
Client Pages
Client Pages Modern
Client Build Manifests
Rendered Page Sizes
Serverless ModeGeneral
Client Bundles (main, webpack, commons)
Client Bundles (main, webpack, commons) Modern
Legacy Client Bundles (polyfills)
Client Pages
Client Pages Modern
Client Build Manifests
Serverless bundles
|
Dashboard dont use any ssr technique
Stats from current PRDefault Server ModeGeneral
Client Bundles (main, webpack, commons)
Client Bundles (main, webpack, commons) Modern
Legacy Client Bundles (polyfills)
Client Pages
Client Pages Modern
Client Build Manifests
Rendered Page Sizes
Serverless ModeGeneral
Client Bundles (main, webpack, commons)
Client Bundles (main, webpack, commons) Modern
Legacy Client Bundles (polyfills)
Client Pages
Client Pages Modern
Client Build Manifests
Serverless bundles
|
Stats from current PRDefault Server ModeGeneral
Client Bundles (main, webpack, commons)
Client Bundles (main, webpack, commons) Modern
Legacy Client Bundles (polyfills)
Client Pages
Client Pages Modern
Client Build Manifests
Rendered Page Sizes
Serverless ModeGeneral
Client Bundles (main, webpack, commons)
Client Bundles (main, webpack, commons) Modern
Legacy Client Bundles (polyfills)
Client Pages
Client Pages Modern
Client Build Manifests
Serverless bundles
|
|
@StarpTech With the latest changes you pass the
What do you think of the suggestion I made before to just pass them in |
|
Good point, I'll address it. |
Stats from current PRDefault Server ModeGeneral
Client Bundles (main, webpack, commons)
Client Bundles (main, webpack, commons) Modern
Legacy Client Bundles (polyfills)
Client Pages
Client Pages Modern
Client Build Manifests
Rendered Page Sizes
Serverless ModeGeneral
Client Bundles (main, webpack, commons)
Client Bundles (main, webpack, commons) Modern
Legacy Client Bundles (polyfills)
Client Pages
Client Pages Modern
Client Build Manifests
Serverless bundles
|
lfades
approved these changes
Apr 21, 2020
|
@lfades thanks for the fixes. |
This was referenced May 1, 2020
|
Thanks @StarpTech for this nice example! Not sure if it's the right place to mention it, let me know otherwise. I was trying out your example and I found a potential issue with Links. I noticed that the link to I'm able to get the right behavior replacing Does it make sense? I'm also wondering on the same
Thanks! |
|
Hi @rogerbramon you're right I found couple of issues. No idea why they didn't arrive earlier. I created a PR #16023 |
In order to update the view on locale change. |
Sign up for free
to subscribe to this conversation on GitHub.
Already have an account?
Sign in.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
The most lightweight and elegant solution I have ever used with Next.js.
Examples with SSR, SSG, CSR and how users can be redirected to a default language like from
/toen.This example does not contain any dynamic language detection.
I really appreciate your feedback. 🙌