Add next-intl example

[amannn]

I've recently built an i18n library that is tailored to usage in Next.js: next-intl. It complements the internationalized routing capabilities of Next.js by managing translations and providing them to components, as well as handling date and time formatting. It's a bit young, but I'm using it in two production apps now and I'm quite confident in the library.

Would you want to include an example and link to it?

[ijjk]

Stats from current PR

Default Server Mode (Increase detected ⚠️)

General

	vercel/next.js canary	amannn/next.js add-next-intl	Change
buildDuration	12.1s	12.2s	⚠️ +63ms
nodeModulesSize	73.3 MB	73.3 MB	✓

Page Load Tests Overall increase ✓

	vercel/next.js canary	amannn/next.js add-next-intl	Change
/ failed reqs	0	0	✓
/ total time (seconds)	2.52	2.468	-0.05
/ avg req/sec	992.18	1012.88	+20.7
/error-in-render failed reqs	0	0	✓
/error-in-render total time (seconds)	1.752	1.763	⚠️ +0.01
/error-in-render avg req/sec	1426.83	1417.95	⚠️ -8.88

Client Bundles (main, webpack, commons)

	vercel/next.js canary	amannn/next.js add-next-intl	Change
677f882d2ed8..bb74.js gzip	13.1 kB	13.1 kB	✓
framework.HASH.js gzip	39 kB	39 kB	✓
main-9ad7be4..1cfb.js gzip	6.63 kB	6.63 kB	✓
webpack-50be..df5b.js gzip	751 B	751 B	✓
Overall change	59.4 kB	59.4 kB	✓

Legacy Client Bundles (polyfills)

	vercel/next.js canary	amannn/next.js add-next-intl	Change
polyfills-af..9390.js gzip	31.3 kB	31.3 kB	✓
Overall change	31.3 kB	31.3 kB	✓

Client Pages

	vercel/next.js canary	amannn/next.js add-next-intl	Change
_app-2a09aa2..4a98.js gzip	1.28 kB	1.28 kB	✓
_error-8b758..aef6.js gzip	3.46 kB	3.46 kB	✓
hooks-c71ae4..70cd.js gzip	887 B	887 B	✓
index-bbee2f..528b.js gzip	227 B	227 B	✓
link-7faf09b..eba4.js gzip	1.64 kB	1.64 kB	✓
routerDirect..bf84.js gzip	303 B	303 B	✓
withRouter-a..5826.js gzip	302 B	302 B	✓
Overall change	8.09 kB	8.09 kB	✓

Client Build Manifests

	vercel/next.js canary	amannn/next.js add-next-intl	Change
_buildManifest.js gzip	321 B	321 B	✓
Overall change	321 B	321 B	✓

Rendered Page Sizes

	vercel/next.js canary	amannn/next.js add-next-intl	Change
index.html gzip	613 B	613 B	✓
link.html gzip	620 B	620 B	✓
withRouter.html gzip	608 B	608 B	✓
Overall change	1.84 kB	1.84 kB	✓

---

Serverless Mode

General

	vercel/next.js canary	amannn/next.js add-next-intl	Change
buildDuration	14.3s	14.4s	⚠️ +94ms
nodeModulesSize	73.3 MB	73.3 MB	✓

Client Bundles (main, webpack, commons)

	vercel/next.js canary	amannn/next.js add-next-intl	Change
677f882d2ed8..bb74.js gzip	13.1 kB	13.1 kB	✓
framework.HASH.js gzip	39 kB	39 kB	✓
main-9ad7be4..1cfb.js gzip	6.63 kB	6.63 kB	✓
webpack-50be..df5b.js gzip	751 B	751 B	✓
Overall change	59.4 kB	59.4 kB	✓

Legacy Client Bundles (polyfills)

	vercel/next.js canary	amannn/next.js add-next-intl	Change
polyfills-af..9390.js gzip	31.3 kB	31.3 kB	✓
Overall change	31.3 kB	31.3 kB	✓

Client Pages

	vercel/next.js canary	amannn/next.js add-next-intl	Change
_app-2a09aa2..4a98.js gzip	1.28 kB	1.28 kB	✓
_error-8b758..aef6.js gzip	3.46 kB	3.46 kB	✓
hooks-c71ae4..70cd.js gzip	887 B	887 B	✓
index-bbee2f..528b.js gzip	227 B	227 B	✓
link-7faf09b..eba4.js gzip	1.64 kB	1.64 kB	✓
routerDirect..bf84.js gzip	303 B	303 B	✓
withRouter-a..5826.js gzip	302 B	302 B	✓
Overall change	8.09 kB	8.09 kB	✓

Client Build Manifests

	vercel/next.js canary	amannn/next.js add-next-intl	Change
_buildManifest.js gzip	321 B	321 B	✓
Overall change	321 B	321 B	✓

Serverless bundles

	vercel/next.js canary	amannn/next.js add-next-intl	Change
_error.js	1 MB	1 MB	✓
404.html	2.67 kB	2.67 kB	✓
hooks.html	1.92 kB	1.92 kB	✓
index.js	1 MB	1 MB	✓
link.js	1.06 MB	1.06 MB	✓
routerDirect.js	1.05 MB	1.05 MB	✓
withRouter.js	1.05 MB	1.05 MB	✓
Overall change	5.19 MB	5.19 MB	✓

Commit: 340b9d1

[leerob]

Thank you!

[leerob]

I see some of my questions are covered in the README for the package. Nice work on that, btw. Well written 💯

[amannn]

Thank you for the friendly review @leerob! I've adapted the code a bit to allow pre-rendered pages by default. Would you mind having another look?

I see some of my questions are covered in the README for the package. Nice work on that, btw. Well written 💯

Thanks! I plan to improve the README to explain the features individually and will also adapt the example based on your feedback here 🙌 .

[BjoernRave]

@amannn I you dont know it yet, you should also check out https://github.com/vinissimus/next-translate.

[amannn]

@BjoernRave Thanks for the hint! I did have a look at the project some time ago.

next-translate looks like a great library that has made different tradeoffs than next-intl.

Personally I see the advantages of next-translate as the following:

• Less bundle size
• Ability to load translations asynchronously

However for next-intl I see these advantages:

• More i18n features based on the ICU standard: Selecting labels based on enums ({gender, select, male {He} female {She} other {They}} is online.) and select ordinal (It's my cat's {year, selectordinal, one {#st} two {#nd} few {#rd} other {#th}} birthday!).
• Built-in number and date formatting that is integrated with messages (e.g. supporting global formats)
• A hooks-only API

Full ICU support as well as the integrated number and date formatting makes the difference why next-intl weighs a bit more. Lazy loading translations could theoretically be implemented for next-intl as well, but I have a feeling that a server side components might change the story anyway a bit here.

I guess depending on your needs and preferences, I think one or the other might be the better choice 🙂.

I just saw you contributed to next-translate before. Does this comparison make sense from your perspective or did I miss something?

[amannn]

@leerob Sorry, it seems like I just dismissed your review by adding another commit. I thought it might be useful to mention the built-in date and number formatting.

[matamatanot]

@amannn @leerob
What is the status? I am considering implementing next-intl in a new project I am developing.

[ijjk]

Thanks for the PR!