Add example with react-i18next #14978

cseas · 2020-07-08T13:34:46Z

This is a simple example for setting up translations in a Next.js project using react-i18next.

No additional server setup or packages are required hence this should retain all features offered by Next.js, unlike other translation examples. Details for usage are in example's readme.

ijjk · 2020-07-08T13:43:42Z

Stats from current PR

Default Server Mode (Decrease detected ✓)

General

	vercel/next.js canary	cseas/next.js canary	Change
buildDuration	12.5s	12.5s	⚠️ +40ms
nodeModulesSize	65.9 MB	65.9 MB	✓

Page Load Tests Overall decrease ⚠️

	vercel/next.js canary	cseas/next.js canary	Change
/ failed reqs	0	0	✓
/ total time (seconds)	2.152	2.19	⚠️ +0.04
/ avg req/sec	1161.76	1141.44	⚠️ -20.32
/error-in-render failed reqs	0	0	✓
/error-in-render total time (seconds)	1.409	1.48	⚠️ +0.07
/error-in-render avg req/sec	1774.38	1688.67	⚠️ -85.71

Client Bundles (main, webpack, commons)

	vercel/next.js canary	cseas/next.js canary	Change
main-HASH.js gzip	6.63 kB	6.63 kB	✓
webpack-HASH.js gzip	751 B	751 B	✓
19b7e98f51cc..c646.js gzip	10.7 kB	10.7 kB	✓
framework.HASH.js gzip	39.1 kB	39.1 kB	✓
Overall change	57.2 kB	57.2 kB	✓

Client Bundles (main, webpack, commons) Modern

	vercel/next.js canary	cseas/next.js canary	Change
main-HASH.module.js gzip	5.71 kB	5.71 kB	✓
webpack-HASH..dule.js gzip	751 B	751 B	✓
19b7e98f51cc..dule.js gzip	7.1 kB	7.1 kB	✓
framework.HA..dule.js gzip	39.1 kB	39.1 kB	✓
Overall change	52.7 kB	52.7 kB	✓

Legacy Client Bundles (polyfills)

	vercel/next.js canary	cseas/next.js canary	Change
polyfills-HASH.js gzip	26.4 kB	26.4 kB	✓
Overall change	26.4 kB	26.4 kB	✓

Client Build Manifests

	vercel/next.js canary	cseas/next.js canary	Change
_buildManifest.js gzip	268 B	268 B	✓
_buildManife..dule.js gzip	272 B	272 B	✓
Overall change	540 B	540 B	✓

Rendered Page Sizes

	vercel/next.js canary	cseas/next.js canary	Change
index.html gzip	954 B	954 B	✓
link.html gzip	960 B	960 B	✓
withRouter.html gzip	946 B	946 B	✓
Overall change	2.86 kB	2.86 kB	✓

Serverless Mode

General

	vercel/next.js canary	cseas/next.js canary	Change
buildDuration	13.2s	13.4s	⚠️ +185ms
nodeModulesSize	65.9 MB	65.9 MB	✓

Client Bundles (main, webpack, commons)

	vercel/next.js canary	cseas/next.js canary	Change
main-HASH.js gzip	6.63 kB	6.63 kB	✓
webpack-HASH.js gzip	751 B	751 B	✓
19b7e98f51cc..c646.js gzip	10.7 kB	10.7 kB	✓
framework.HASH.js gzip	39.1 kB	39.1 kB	✓
Overall change	57.2 kB	57.2 kB	✓

Client Bundles (main, webpack, commons) Modern

	vercel/next.js canary	cseas/next.js canary	Change
main-HASH.module.js gzip	5.71 kB	5.71 kB	✓
webpack-HASH..dule.js gzip	751 B	751 B	✓
19b7e98f51cc..dule.js gzip	7.1 kB	7.1 kB	✓
framework.HA..dule.js gzip	39.1 kB	39.1 kB	✓
Overall change	52.7 kB	52.7 kB	✓

Legacy Client Bundles (polyfills)

	vercel/next.js canary	cseas/next.js canary	Change
polyfills-HASH.js gzip	26.4 kB	26.4 kB	✓
Overall change	26.4 kB	26.4 kB	✓

Client Build Manifests

	vercel/next.js canary	cseas/next.js canary	Change
_buildManifest.js gzip	268 B	268 B	✓
_buildManife..dule.js gzip	272 B	272 B	✓
Overall change	540 B	540 B	✓

Serverless bundles

	vercel/next.js canary	cseas/next.js canary	Change
_error.js	876 kB	876 kB	✓
404.html	4.17 kB	4.17 kB	✓
hooks.html	3.79 kB	3.79 kB	✓
index.js	877 kB	877 kB	✓
link.js	915 kB	915 kB	✓
routerDirect.js	909 kB	909 kB	✓
withRouter.js	909 kB	909 kB	✓
Overall change	4.49 MB	4.49 MB	✓

Commit: 16efa44

isaachinman · 2020-07-08T13:55:47Z

As far as I can tell, this will load all translations into every client side app.

ijjk · 2020-07-08T14:03:44Z

Stats from current PR

Default Server Mode (Increase detected ⚠️)

General

	vercel/next.js canary	cseas/next.js canary	Change
buildDuration	12.5s	12.3s	-105ms
nodeModulesSize	65.9 MB	65.9 MB	✓

Page Load Tests Overall increase ✓

	vercel/next.js canary	cseas/next.js canary	Change
/ failed reqs	0	0	✓
/ total time (seconds)	2.226	2.131	-0.1
/ avg req/sec	1123.29	1173.06	+49.77
/error-in-render failed reqs	0	0	✓
/error-in-render total time (seconds)	1.455	1.482	⚠️ +0.03
/error-in-render avg req/sec	1718.42	1686.49	⚠️ -31.93

Client Bundles (main, webpack, commons)

	vercel/next.js canary	cseas/next.js canary	Change
main-HASH.js gzip	6.63 kB	6.63 kB	✓
webpack-HASH.js gzip	751 B	751 B	✓
19b7e98f51cc..c646.js gzip	10.7 kB	10.7 kB	✓
framework.HASH.js gzip	39.1 kB	39.1 kB	✓
Overall change	57.2 kB	57.2 kB	✓

Client Bundles (main, webpack, commons) Modern

	vercel/next.js canary	cseas/next.js canary	Change
main-HASH.module.js gzip	5.71 kB	5.71 kB	✓
webpack-HASH..dule.js gzip	751 B	751 B	✓
19b7e98f51cc..dule.js gzip	7.1 kB	7.1 kB	✓
framework.HA..dule.js gzip	39.1 kB	39.1 kB	✓
Overall change	52.7 kB	52.7 kB	✓

Legacy Client Bundles (polyfills)

	vercel/next.js canary	cseas/next.js canary	Change
polyfills-HASH.js gzip	26.4 kB	26.4 kB	✓
Overall change	26.4 kB	26.4 kB	✓

Client Build Manifests

	vercel/next.js canary	cseas/next.js canary	Change
_buildManifest.js gzip	268 B	268 B	✓
_buildManife..dule.js gzip	272 B	272 B	✓
Overall change	540 B	540 B	✓

Rendered Page Sizes

	vercel/next.js canary	cseas/next.js canary	Change
index.html gzip	954 B	954 B	✓
link.html gzip	960 B	960 B	✓
withRouter.html gzip	946 B	946 B	✓
Overall change	2.86 kB	2.86 kB	✓

Serverless Mode

General

	vercel/next.js canary	cseas/next.js canary	Change
buildDuration	13.6s	14.8s	⚠️ +1.2s
nodeModulesSize	65.9 MB	65.9 MB	✓

Client Bundles (main, webpack, commons)

	vercel/next.js canary	cseas/next.js canary	Change
main-HASH.js gzip	6.63 kB	6.63 kB	✓
webpack-HASH.js gzip	751 B	751 B	✓
19b7e98f51cc..c646.js gzip	10.7 kB	10.7 kB	✓
framework.HASH.js gzip	39.1 kB	39.1 kB	✓
Overall change	57.2 kB	57.2 kB	✓

Client Bundles (main, webpack, commons) Modern

	vercel/next.js canary	cseas/next.js canary	Change
main-HASH.module.js gzip	5.71 kB	5.71 kB	✓
webpack-HASH..dule.js gzip	751 B	751 B	✓
19b7e98f51cc..dule.js gzip	7.1 kB	7.1 kB	✓
framework.HA..dule.js gzip	39.1 kB	39.1 kB	✓
Overall change	52.7 kB	52.7 kB	✓

Legacy Client Bundles (polyfills)

	vercel/next.js canary	cseas/next.js canary	Change
polyfills-HASH.js gzip	26.4 kB	26.4 kB	✓
Overall change	26.4 kB	26.4 kB	✓

Client Build Manifests

	vercel/next.js canary	cseas/next.js canary	Change
_buildManifest.js gzip	268 B	268 B	✓
_buildManife..dule.js gzip	272 B	272 B	✓
Overall change	540 B	540 B	✓

Serverless bundles

	vercel/next.js canary	cseas/next.js canary	Change
_error.js	876 kB	876 kB	✓
404.html	4.17 kB	4.17 kB	✓
hooks.html	3.79 kB	3.79 kB	✓
index.js	877 kB	877 kB	✓
link.js	915 kB	915 kB	✓
routerDirect.js	909 kB	909 kB	✓
withRouter.js	909 kB	909 kB	✓
Overall change	4.49 MB	4.49 MB	✓

Commit: 96e2c0b

cseas · 2020-07-08T14:21:47Z

@isaachinman Wouldn't using namespaces solve that?

Anyway, here's my use case for context:

I didn't want to bundle my translations in the public/ folder and send the entire translation json files to the client's browser.
I didn't want any language specifc routes in my application like /en or /de.
I wanted to use hooks for translations since they're straightforward and don't require me to add any additional components in my code. That's the primary reason I avoided react-intl.
I had no use for an i18n backend or language detector. Setting the default language in i18n config works fine.

It took me several days to figure out react-i18next can even work with Next.js without setting up Express or using something like rosetta or redirects(). This example would've made life much easier if it was present in Next.js repo before I started so I decided to make a minimal example and send a PR.

Please let me know if this adds any caveats that I need to mention in the readme. But for my particular use case, this is the exact example I was looking for. Just straightforward translations with react-i18next, nothing else needed.

Timer

Blocking per @isaachinman review. This should follow the official example:
https://github.com/isaachinman/next-i18next-vercel

cseas · 2020-07-08T16:17:33Z

@Timer That example uses the experimental rewrites() function and has express as a dependency. Also the next-i18next version used in that example is beta.

My whole idea of coming up with this example was so react-i18next can be directly used with Next.js without the need for experimental features, additional server/packages (express, next-i18next) or additional configuration apart from what's mentioned in the official react-i18next docs.

Avoiding experimental features was the reason I didn't want to follow the rosetta example in the first place. Would the Next.js team recommend using experimental features in production?

ijjk · 2020-07-08T16:29:33Z

Stats from current PR

Default Server Mode (Increase detected ⚠️)

General

	vercel/next.js canary	cseas/next.js canary	Change
buildDuration	12.9s	12.8s	-158ms
nodeModulesSize	66 MB	66 MB	✓

Page Load Tests Overall increase ✓

	vercel/next.js canary	cseas/next.js canary	Change
/ failed reqs	0	0	✓
/ total time (seconds)	2.16	2.088	-0.07
/ avg req/sec	1157.44	1197.12	+39.68
/error-in-render failed reqs	0	0	✓
/error-in-render total time (seconds)	1.337	1.339	0
/error-in-render avg req/sec	1869.22	1866.43	⚠️ -2.79

Client Bundles (main, webpack, commons)

	vercel/next.js canary	cseas/next.js canary	Change
main-HASH.js gzip	6.63 kB	6.63 kB	✓
webpack-HASH.js gzip	751 B	751 B	✓
19b7e98f51cc..c646.js gzip	10.7 kB	10.7 kB	✓
framework.HASH.js gzip	39.1 kB	39.1 kB	✓
Overall change	57.2 kB	57.2 kB	✓

Client Bundles (main, webpack, commons) Modern

	vercel/next.js canary	cseas/next.js canary	Change
main-HASH.module.js gzip	5.71 kB	5.71 kB	✓
webpack-HASH..dule.js gzip	751 B	751 B	✓
19b7e98f51cc..dule.js gzip	7.1 kB	7.1 kB	✓
framework.HA..dule.js gzip	39.1 kB	39.1 kB	✓
Overall change	52.7 kB	52.7 kB	✓

Legacy Client Bundles (polyfills)

	vercel/next.js canary	cseas/next.js canary	Change
polyfills-HASH.js gzip	26.4 kB	26.4 kB	✓
Overall change	26.4 kB	26.4 kB	✓

Client Build Manifests

	vercel/next.js canary	cseas/next.js canary	Change
_buildManifest.js gzip	268 B	268 B	✓
_buildManife..dule.js gzip	272 B	272 B	✓
Overall change	540 B	540 B	✓

Rendered Page Sizes

	vercel/next.js canary	cseas/next.js canary	Change
index.html gzip	954 B	954 B	✓
link.html gzip	960 B	960 B	✓
withRouter.html gzip	946 B	946 B	✓
Overall change	2.86 kB	2.86 kB	✓

Serverless Mode

General

	vercel/next.js canary	cseas/next.js canary	Change
buildDuration	14.1s	13.9s	-238ms
nodeModulesSize	66 MB	66 MB	✓

Client Bundles (main, webpack, commons)

	vercel/next.js canary	cseas/next.js canary	Change
main-HASH.js gzip	6.63 kB	6.63 kB	✓
webpack-HASH.js gzip	751 B	751 B	✓
19b7e98f51cc..c646.js gzip	10.7 kB	10.7 kB	✓
framework.HASH.js gzip	39.1 kB	39.1 kB	✓
Overall change	57.2 kB	57.2 kB	✓

Client Bundles (main, webpack, commons) Modern

	vercel/next.js canary	cseas/next.js canary	Change
main-HASH.module.js gzip	5.71 kB	5.71 kB	✓
webpack-HASH..dule.js gzip	751 B	751 B	✓
19b7e98f51cc..dule.js gzip	7.1 kB	7.1 kB	✓
framework.HA..dule.js gzip	39.1 kB	39.1 kB	✓
Overall change	52.7 kB	52.7 kB	✓

Legacy Client Bundles (polyfills)

	vercel/next.js canary	cseas/next.js canary	Change
polyfills-HASH.js gzip	26.4 kB	26.4 kB	✓
Overall change	26.4 kB	26.4 kB	✓

Client Build Manifests

	vercel/next.js canary	cseas/next.js canary	Change
_buildManifest.js gzip	268 B	268 B	✓
_buildManife..dule.js gzip	272 B	272 B	✓
Overall change	540 B	540 B	✓

Serverless bundles

	vercel/next.js canary	cseas/next.js canary	Change
_error.js	876 kB	876 kB	✓
404.html	4.17 kB	4.17 kB	✓
hooks.html	3.79 kB	3.79 kB	✓
index.js	877 kB	877 kB	✓
link.js	915 kB	915 kB	✓
routerDirect.js	909 kB	909 kB	✓
withRouter.js	909 kB	909 kB	✓
Overall change	4.49 MB	4.49 MB	✓

Commit: 3cf89a2

isaachinman · 2020-07-08T16:52:22Z

Hey @cseas - express isn't a dep. That repo is not an official example actually, it's a WIP for serverless with next-i18next. It was copied from the actual official example, which is why it still had that README and has express in the package.json.

I can assure you that within a couple weeks, serverless with next-i18next (and probably rewrites) will both be pretty stable.

cseas · 2020-07-08T18:15:21Z

@isaachinman That sounds awesome! I've been waiting for rewrites() to be released as stable for some time now so we can use it in production and stop depending on Express to do API routing. ( Related: #14634 )

Regarding react-i18next, I believe there should be an example available on how to use it directly. Next.js is awesome, but people using it are still React developers and search for "How to do this with React" first before searching "How to do this with Next.js".

This was the case with me. Searched for translations with React, found react-i18next, added the code to my Next.js project, and after hours realized that their official example doesn't work with Next.js. Almost migrated my entire project to Razzle in frustration before realizing there was this workaround.

Regarding next-i18next, perhaps the serverless example reference can be added to the Next.js or react-i18next tutorial or docs so it's easier to stumble into?

ijjk · 2020-07-08T19:36:22Z

Stats from current PR

Default Server Mode (Increase detected ⚠️)

General

	vercel/next.js canary	cseas/next.js canary	Change
buildDuration	11.5s	11.5s	⚠️ +39ms
nodeModulesSize	66.1 MB	66.1 MB	✓

Page Load Tests Overall increase ✓

	vercel/next.js canary	cseas/next.js canary	Change
/ failed reqs	0	0	✓
/ total time (seconds)	2.025	2.04	⚠️ +0.02
/ avg req/sec	1234.87	1225.63	⚠️ -9.24
/error-in-render failed reqs	0	0	✓
/error-in-render total time (seconds)	1.391	1.378	-0.01
/error-in-render avg req/sec	1796.99	1813.7	+16.71

Client Bundles (main, webpack, commons)

	vercel/next.js canary	cseas/next.js canary	Change
main-HASH.js gzip	6.63 kB	6.63 kB	✓
webpack-HASH.js gzip	751 B	751 B	✓
19b7e98f51cc..e4a8.js gzip	10.7 kB	10.7 kB	✓
framework.HASH.js gzip	39.1 kB	39.1 kB	✓
Overall change	57.2 kB	57.2 kB	✓

Client Bundles (main, webpack, commons) Modern

	vercel/next.js canary	cseas/next.js canary	Change
main-HASH.module.js gzip	5.71 kB	5.71 kB	✓
webpack-HASH..dule.js gzip	751 B	751 B	✓
19b7e98f51cc..dule.js gzip	7.1 kB	7.1 kB	✓
framework.HA..dule.js gzip	39.1 kB	39.1 kB	✓
Overall change	52.7 kB	52.7 kB	✓

Legacy Client Bundles (polyfills)

	vercel/next.js canary	cseas/next.js canary	Change
polyfills-HASH.js gzip	26.4 kB	26.4 kB	✓
Overall change	26.4 kB	26.4 kB	✓

Client Build Manifests

	vercel/next.js canary	cseas/next.js canary	Change
_buildManifest.js gzip	268 B	268 B	✓
_buildManife..dule.js gzip	272 B	272 B	✓
Overall change	540 B	540 B	✓

Rendered Page Sizes

	vercel/next.js canary	cseas/next.js canary	Change
index.html gzip	954 B	954 B	✓
link.html gzip	962 B	962 B	✓
withRouter.html gzip	946 B	946 B	✓
Overall change	2.86 kB	2.86 kB	✓

Serverless Mode

General

	vercel/next.js canary	cseas/next.js canary	Change
buildDuration	12.6s	12.6s	⚠️ +3ms
nodeModulesSize	66.1 MB	66.1 MB	✓

Client Bundles (main, webpack, commons)

	vercel/next.js canary	cseas/next.js canary	Change
main-HASH.js gzip	6.63 kB	6.63 kB	✓
webpack-HASH.js gzip	751 B	751 B	✓
19b7e98f51cc..e4a8.js gzip	10.7 kB	10.7 kB	✓
framework.HASH.js gzip	39.1 kB	39.1 kB	✓
Overall change	57.2 kB	57.2 kB	✓

Client Bundles (main, webpack, commons) Modern

	vercel/next.js canary	cseas/next.js canary	Change
main-HASH.module.js gzip	5.71 kB	5.71 kB	✓
webpack-HASH..dule.js gzip	751 B	751 B	✓
19b7e98f51cc..dule.js gzip	7.1 kB	7.1 kB	✓
framework.HA..dule.js gzip	39.1 kB	39.1 kB	✓
Overall change	52.7 kB	52.7 kB	✓

Legacy Client Bundles (polyfills)

	vercel/next.js canary	cseas/next.js canary	Change
polyfills-HASH.js gzip	26.4 kB	26.4 kB	✓
Overall change	26.4 kB	26.4 kB	✓

Client Build Manifests

	vercel/next.js canary	cseas/next.js canary	Change
_buildManifest.js gzip	268 B	268 B	✓
_buildManife..dule.js gzip	272 B	272 B	✓
Overall change	540 B	540 B	✓

Serverless bundles

	vercel/next.js canary	cseas/next.js canary	Change
_error.js	876 kB	876 kB	✓
404.html	4.17 kB	4.17 kB	✓
hooks.html	3.79 kB	3.79 kB	✓
index.js	877 kB	877 kB	✓
link.js	916 kB	916 kB	✓
routerDirect.js	909 kB	909 kB	✓
withRouter.js	910 kB	910 kB	✓
Overall change	4.5 MB	4.5 MB	✓

Commit: 51a5a4d

ijjk · 2020-07-08T21:57:26Z

Stats from current PR

Default Server Mode (Increase detected ⚠️)

General

	vercel/next.js canary	cseas/next.js canary	Change
buildDuration	12.9s	12.9s	-19ms
nodeModulesSize	66.1 MB	66.1 MB	✓

Page Load Tests Overall increase ✓

	vercel/next.js canary	cseas/next.js canary	Change
/ failed reqs	0	0	✓
/ total time (seconds)	2.069	2.043	-0.03
/ avg req/sec	1208.2	1223.45	+15.25
/error-in-render failed reqs	0	0	✓
/error-in-render total time (seconds)	1.274	1.262	-0.01
/error-in-render avg req/sec	1962.96	1981.25	+18.29

Client Bundles (main, webpack, commons)

	vercel/next.js canary	cseas/next.js canary	Change
main-HASH.js gzip	6.63 kB	6.63 kB	✓
webpack-HASH.js gzip	751 B	751 B	✓
19b7e98f51cc..e4a8.js gzip	10.7 kB	10.7 kB	✓
framework.HASH.js gzip	39.1 kB	39.1 kB	✓
Overall change	57.2 kB	57.2 kB	✓

Client Bundles (main, webpack, commons) Modern

	vercel/next.js canary	cseas/next.js canary	Change
main-HASH.module.js gzip	5.72 kB	5.72 kB	✓
webpack-HASH..dule.js gzip	751 B	751 B	✓
19b7e98f51cc..dule.js gzip	7.1 kB	7.1 kB	✓
framework.HA..dule.js gzip	39.1 kB	39.1 kB	✓
Overall change	52.7 kB	52.7 kB	✓

Legacy Client Bundles (polyfills)

	vercel/next.js canary	cseas/next.js canary	Change
polyfills-HASH.js gzip	26.4 kB	26.4 kB	✓
Overall change	26.4 kB	26.4 kB	✓

Client Build Manifests

	vercel/next.js canary	cseas/next.js canary	Change
_buildManifest.js gzip	268 B	268 B	✓
_buildManife..dule.js gzip	272 B	272 B	✓
Overall change	540 B	540 B	✓

Rendered Page Sizes

	vercel/next.js canary	cseas/next.js canary	Change
index.html gzip	953 B	953 B	✓
link.html gzip	961 B	961 B	✓
withRouter.html gzip	946 B	946 B	✓
Overall change	2.86 kB	2.86 kB	✓

Serverless Mode

General

	vercel/next.js canary	cseas/next.js canary	Change
buildDuration	13.5s	13.7s	⚠️ +151ms
nodeModulesSize	66.1 MB	66.1 MB	✓

Client Bundles (main, webpack, commons)

	vercel/next.js canary	cseas/next.js canary	Change
main-HASH.js gzip	6.63 kB	6.63 kB	✓
webpack-HASH.js gzip	751 B	751 B	✓
19b7e98f51cc..e4a8.js gzip	10.7 kB	10.7 kB	✓
framework.HASH.js gzip	39.1 kB	39.1 kB	✓
Overall change	57.2 kB	57.2 kB	✓

Client Bundles (main, webpack, commons) Modern

	vercel/next.js canary	cseas/next.js canary	Change
main-HASH.module.js gzip	5.72 kB	5.72 kB	✓
webpack-HASH..dule.js gzip	751 B	751 B	✓
19b7e98f51cc..dule.js gzip	7.1 kB	7.1 kB	✓
framework.HA..dule.js gzip	39.1 kB	39.1 kB	✓
Overall change	52.7 kB	52.7 kB	✓

Legacy Client Bundles (polyfills)

	vercel/next.js canary	cseas/next.js canary	Change
polyfills-HASH.js gzip	26.4 kB	26.4 kB	✓
Overall change	26.4 kB	26.4 kB	✓

Client Build Manifests

	vercel/next.js canary	cseas/next.js canary	Change
_buildManifest.js gzip	268 B	268 B	✓
_buildManife..dule.js gzip	272 B	272 B	✓
Overall change	540 B	540 B	✓

Serverless bundles

	vercel/next.js canary	cseas/next.js canary	Change
_error.js	876 kB	876 kB	✓
404.html	4.17 kB	4.17 kB	✓
hooks.html	3.79 kB	3.79 kB	✓
index.js	877 kB	877 kB	✓
link.js	916 kB	916 kB	✓
routerDirect.js	909 kB	909 kB	✓
withRouter.js	910 kB	910 kB	✓
Overall change	4.5 MB	4.5 MB	✓

Commit: f382b95

isaachinman · 2020-07-08T22:36:37Z

@cseas The example you've submitted with this PR is not something which people should take guidance from, in my opinion. It works, yes, but there are many antipatterns that will cause serious issues for projects of any reasonable size. As you have found out, it is indeed possible to use react-i18next directly with NextJs and make things work, but once you look into it any deeper than surface level, you will realise that it's actually a semi-complex problem to solve. That's why next-i18next and various other packages exist.

Just one example – in your example app here, an English user would end up downloading all German translations, despite never needing them. In fact, it looks like every user would download every language, and every namespace.

cseas · 2020-07-09T04:28:09Z

@isaachinman Ah, got it. Would that be because of using the resources instead of a Backend in i18n init() and just the way i18n works? Or is this specific to Next.js and using resources is fine otherwise?

I didn't really understand what benefits the http backend gives to i18n over just importing the json files. Is there any documentation available that would cover this explanation?

isaachinman · 2020-07-09T11:22:35Z

Correct. The docs are on the repo.

We need some kind of resource backend to fetch assets per language and per namespace, as needed. In a NextJs context, we may introduce new language or namespace requirements on the client side after a new component mounts, or the route changes. You can see logic to cover the route change case in next-i18next here, for example.

To summarise my view on i18n in NextJs: unless you are a large org that has the desire and capacity to roll your own solution, you should probably just grab an off-the-shelf solution, as it will save you a lot of time and headache in the long run. I think that promoting these "simple i18n" examples is actually a disservice to new devs, and I have seen this same pattern play out countless times in the past couple years.

lfades · 2020-07-17T00:53:33Z

@cseas Okay with closing the PR based on @isaachinman comments? I agree with him and the current state of the example is not ideal. rewrites are going to be released in the next stable release as everything for them is ready, including the docs.

cseas · 2020-07-19T13:56:14Z

@lfades Yeah that sounds alright. I still wish Next.js supported other libraries that React projects usually do though. This is just a beginner's perspective but coming from create-react-app or a custom webpack toolchain, it really feels like a paradigm shift trying to switch to Next.js to get server-side rendering. React router doesn't work, react-i18next is discouraged, and idk how many more of these replacements do I have to learn for a switch.

I like the features of Next and wish I could promote it where I work. But the concept of "use only Next libraries for everything" feels too restrictive as a developer. I might give Razzle a try, still exploring options for a new project.

cseas added 3 commits July 8, 2020 16:53

Add default Next.js project files

08242e8

Add react-i18next example

a8b2d4f

Merge branch 'canary' of https://github.com/vercel/next.js into canary

16efa44

cseas requested review from chibicode, ijjk, lfades, Timer and timneutkens as code owners July 8, 2020 13:34

ijjk added the examples Issue was opened via the examples template. label Jul 8, 2020

Remove unnecessary file extension

96e2c0b

Timer requested changes Jul 8, 2020

View reviewed changes

Merge branch 'canary' into canary

3cf89a2

cseas requested a review from Timer July 8, 2020 16:30

Merge branch 'canary' into canary

51a5a4d

Merge branch 'canary' into canary

f382b95

cseas mentioned this pull request Jul 8, 2020

Simple example for Next.js without additional dependencies i18next/react-i18next#1146

Closed

cseas closed this Jul 19, 2020

wescopeland mentioned this pull request Jul 21, 2020

[Feature Request]: Add i18n blitz-js/blitz#279

Closed

vercel locked as resolved and limited conversation to collaborators Jan 30, 2022

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Add example with react-i18next #14978

Add example with react-i18next #14978

cseas commented Jul 8, 2020

ijjk commented Jul 8, 2020

isaachinman commented Jul 8, 2020

ijjk commented Jul 8, 2020

cseas commented Jul 8, 2020

Timer left a comment

cseas commented Jul 8, 2020

ijjk commented Jul 8, 2020

isaachinman commented Jul 8, 2020

cseas commented Jul 8, 2020 •

edited

Loading

ijjk commented Jul 8, 2020

ijjk commented Jul 8, 2020

isaachinman commented Jul 8, 2020

cseas commented Jul 9, 2020

isaachinman commented Jul 9, 2020

lfades commented Jul 17, 2020 •

edited

Loading

cseas commented Jul 19, 2020 •

edited

Loading

Add example with react-i18next #14978

Add example with react-i18next #14978

Conversation

cseas commented Jul 8, 2020

ijjk commented Jul 8, 2020

Stats from current PR

isaachinman commented Jul 8, 2020

ijjk commented Jul 8, 2020

Stats from current PR

cseas commented Jul 8, 2020

Timer left a comment

Choose a reason for hiding this comment

cseas commented Jul 8, 2020

ijjk commented Jul 8, 2020

Stats from current PR

isaachinman commented Jul 8, 2020

cseas commented Jul 8, 2020 • edited Loading

ijjk commented Jul 8, 2020

Stats from current PR

ijjk commented Jul 8, 2020

Stats from current PR

isaachinman commented Jul 8, 2020

cseas commented Jul 9, 2020

isaachinman commented Jul 9, 2020

lfades commented Jul 17, 2020 • edited Loading

cseas commented Jul 19, 2020 • edited Loading

cseas commented Jul 8, 2020 •

edited

Loading

lfades commented Jul 17, 2020 •

edited

Loading

cseas commented Jul 19, 2020 •

edited

Loading