From e19aabcd2cebacbde5e75cab4492bf6034fc3299 Mon Sep 17 00:00:00 2001 From: "jj@jjsweb.site" Date: Mon, 23 Aug 2021 20:30:01 -0500 Subject: [PATCH 1/5] Update i18n locales limit to warning --- docs/advanced-features/i18n-routing.md | 43 ++++++++++++++++---------- packages/next/server/config.ts | 4 +-- 2 files changed, 28 insertions(+), 19 deletions(-) diff --git a/docs/advanced-features/i18n-routing.md b/docs/advanced-features/i18n-routing.md index 5932f80d77461..1eabca890ce19 100644 --- a/docs/advanced-features/i18n-routing.md +++ b/docs/advanced-features/i18n-routing.md @@ -234,6 +234,30 @@ Next.js doesn't know about variants of a page so it's up to you to add the `href > Note that Internationalized Routing does not integrate with [`next export`](/docs/advanced-features/static-html-export.md) as `next export` does not leverage the Next.js routing layer. Hybrid Next.js applications that do not use `next export` are fully supported. +### Dynamic getStaticProps Pages + +For dynamic `getStaticProps` pages, any locale variants of the page that is desired to be prerendered needs to be returned from [`getStaticPaths`](/docs/basic-features/data-fetching.md#getstaticpaths-static-generation). Along with the `params` object that can be returned for the `paths`, you can also return a `locale` field specifying which locale you want to render. For example: + +```js +// pages/blog/[slug].js +export const getStaticPaths = ({ locales }) => { + return { + paths: [ + // if no `locale` is provided only the defaultLocale will be generated + { params: { slug: 'post-1' }, locale: 'en-US' }, + { params: { slug: 'post-1' }, locale: 'fr' }, + ], + fallback: true, + } +} +``` + +For automatically statically optimized and non-dynamic `getStaticProps` pages a version of the page will be generated for each locale. This is important to consider since it can increase build times depending on how many locales are configured and what data fetching is being done inside of `getStaticProps`. + +If you have 50 locales configured with 10 non-dynamic pages with `getStaticProps` this means `getStaticProps` will be called 500 times and 50 version of these 10 pages will be generated during each build. + +To improve the performance of generating these pages during build time dynamic pages with `getStaticProps` and [a `fallback` mode](https://nextjs.org/docs/basic-features/data-fetching#fallback-true) can be leveraged instead. This allows you to return only the most popular paths and locales from `getStaticPaths` to prerender during the build and then lazily build the rest during runtime when they are requested. + ### Automatically Statically Optimized Pages For pages that are [automatically statically optimized](/docs/advanced-features/automatic-static-optimization.md), a version of the page will be generated for each locale. @@ -265,24 +289,9 @@ export async function getStaticProps({ locale }) { } ``` -### Dynamic getStaticProps Pages - -For dynamic `getStaticProps` pages, any locale variants of the page that is desired to be prerendered needs to be returned from [`getStaticPaths`](/docs/basic-features/data-fetching.md#getstaticpaths-static-generation). Along with the `params` object that can be returned for the `paths`, you can also return a `locale` field specifying which locale you want to render. For example: - -```js -// pages/blog/[slug].js -export const getStaticPaths = ({ locales }) => { - return { - paths: [ - { params: { slug: 'post-1' }, locale: 'en-US' }, - { params: { slug: 'post-1' }, locale: 'fr' }, - ], - fallback: true, - } -} -``` - ## Limits for the i18n config - `locales`: 100 total locales - `domains`: 100 total locale domain items + +> These limits are initial to provide a upper bound on how many locales should be configured to prevent performance impacts, we will re-visit these if they appear to be too low for valid use cases. diff --git a/packages/next/server/config.ts b/packages/next/server/config.ts index a07d610f1e607..f7953a615520e 100644 --- a/packages/next/server/config.ts +++ b/packages/next/server/config.ts @@ -329,8 +329,8 @@ function assignDefaults(userConfig: { [key: string]: any }) { } if (i18n.locales.length > 100) { - throw new Error( - `Received ${i18n.locales.length} i18n.locales items which exceeds the max of 100, please reduce the number of items to continue.\nSee more info here: https://nextjs.org/docs/messages/invalid-i18n-config` + console.warn( + `Received ${i18n.locales.length} i18n.locales items which exceeds the recommended max of 100.\nSee more info here: https://nextjs.org/docs/advanced-features/i18n-routing#how-does-this-work-with-static-generation` ) } From 58ff62dda8e8364c06948e57be99b8356ea6d535 Mon Sep 17 00:00:00 2001 From: "jj@jjsweb.site" Date: Mon, 23 Aug 2021 20:47:11 -0500 Subject: [PATCH 2/5] update version -> versions --- docs/advanced-features/i18n-routing.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/advanced-features/i18n-routing.md b/docs/advanced-features/i18n-routing.md index 1eabca890ce19..6f24e3daa4ba0 100644 --- a/docs/advanced-features/i18n-routing.md +++ b/docs/advanced-features/i18n-routing.md @@ -254,7 +254,7 @@ export const getStaticPaths = ({ locales }) => { For automatically statically optimized and non-dynamic `getStaticProps` pages a version of the page will be generated for each locale. This is important to consider since it can increase build times depending on how many locales are configured and what data fetching is being done inside of `getStaticProps`. -If you have 50 locales configured with 10 non-dynamic pages with `getStaticProps` this means `getStaticProps` will be called 500 times and 50 version of these 10 pages will be generated during each build. +If you have 50 locales configured with 10 non-dynamic pages with `getStaticProps` this means `getStaticProps` will be called 500 times and 50 versions of these 10 pages will be generated during each build. To improve the performance of generating these pages during build time dynamic pages with `getStaticProps` and [a `fallback` mode](https://nextjs.org/docs/basic-features/data-fetching#fallback-true) can be leveraged instead. This allows you to return only the most popular paths and locales from `getStaticPaths` to prerender during the build and then lazily build the rest during runtime when they are requested. From b47228b6fd4fc92740e2399ec6179f6e1f32906c Mon Sep 17 00:00:00 2001 From: "jj@jjsweb.site" Date: Mon, 23 Aug 2021 21:35:03 -0500 Subject: [PATCH 3/5] bump From c83327e41828955037b0022e33a8702ce58bfcd7 Mon Sep 17 00:00:00 2001 From: "jj@jjsweb.site" Date: Tue, 24 Aug 2021 11:12:14 -0500 Subject: [PATCH 4/5] Use Log.warn instead --- packages/next/server/config.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/next/server/config.ts b/packages/next/server/config.ts index f7953a615520e..52f10d91ebde9 100644 --- a/packages/next/server/config.ts +++ b/packages/next/server/config.ts @@ -329,7 +329,7 @@ function assignDefaults(userConfig: { [key: string]: any }) { } if (i18n.locales.length > 100) { - console.warn( + Log.warn( `Received ${i18n.locales.length} i18n.locales items which exceeds the recommended max of 100.\nSee more info here: https://nextjs.org/docs/advanced-features/i18n-routing#how-does-this-work-with-static-generation` ) } From 5a2dfcb0d6e1a0945f155d1cf38f331e15639b66 Mon Sep 17 00:00:00 2001 From: JJ Kasper Date: Tue, 24 Aug 2021 23:45:07 -0500 Subject: [PATCH 5/5] Apply suggestions from code review Co-authored-by: Lee Robinson --- docs/advanced-features/i18n-routing.md | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/docs/advanced-features/i18n-routing.md b/docs/advanced-features/i18n-routing.md index 6f24e3daa4ba0..219a9956e5aa1 100644 --- a/docs/advanced-features/i18n-routing.md +++ b/docs/advanced-features/i18n-routing.md @@ -234,9 +234,9 @@ Next.js doesn't know about variants of a page so it's up to you to add the `href > Note that Internationalized Routing does not integrate with [`next export`](/docs/advanced-features/static-html-export.md) as `next export` does not leverage the Next.js routing layer. Hybrid Next.js applications that do not use `next export` are fully supported. -### Dynamic getStaticProps Pages +### Dynamic Routes and `getStaticProps` Pages -For dynamic `getStaticProps` pages, any locale variants of the page that is desired to be prerendered needs to be returned from [`getStaticPaths`](/docs/basic-features/data-fetching.md#getstaticpaths-static-generation). Along with the `params` object that can be returned for the `paths`, you can also return a `locale` field specifying which locale you want to render. For example: +For pages using `getStaticProps` with [Dynamic Routes](/docs/routing/dynamic-routes.md), all locale variants of the page desired to be prerendered need to be returned from [`getStaticPaths`](/docs/basic-features/data-fetching.md#getstaticpaths-static-generation). Along with the `params` object returned for `paths`, you can also return a `locale` field specifying which locale you want to render. For example: ```js // pages/blog/[slug].js @@ -252,11 +252,11 @@ export const getStaticPaths = ({ locales }) => { } ``` -For automatically statically optimized and non-dynamic `getStaticProps` pages a version of the page will be generated for each locale. This is important to consider since it can increase build times depending on how many locales are configured and what data fetching is being done inside of `getStaticProps`. +For [Automatically Statically Optimized](/docs/advanced-features/automatic-static-optimization.md) and non-dynamic `getStaticProps` pages, **a version of the page will be generated for each locale**. This is important to consider because it can increase build times depending on how many locales are configured inside `getStaticProps`. -If you have 50 locales configured with 10 non-dynamic pages with `getStaticProps` this means `getStaticProps` will be called 500 times and 50 versions of these 10 pages will be generated during each build. +For example, if you have 50 locales configured with 10 non-dynamic pages using `getStaticProps`, this means `getStaticProps` will be called 500 times. 50 versions of the 10 pages will be generated during each build. -To improve the performance of generating these pages during build time dynamic pages with `getStaticProps` and [a `fallback` mode](https://nextjs.org/docs/basic-features/data-fetching#fallback-true) can be leveraged instead. This allows you to return only the most popular paths and locales from `getStaticPaths` to prerender during the build and then lazily build the rest during runtime when they are requested. +To decrease the build time of dynamic pages with `getStaticProps`, use a [`fallback` mode](https://nextjs.org/docs/basic-features/data-fetching#fallback-true). This allows you to return only the most popular paths and locales from `getStaticPaths` for prerendering during the build. Then, Next.js will build the remaining pages at runtime as they are requested. ### Automatically Statically Optimized Pages @@ -294,4 +294,4 @@ export async function getStaticProps({ locale }) { - `locales`: 100 total locales - `domains`: 100 total locale domain items -> These limits are initial to provide a upper bound on how many locales should be configured to prevent performance impacts, we will re-visit these if they appear to be too low for valid use cases. +> **Note:** These limits have been added initially to prevent potential [performance issues at build time](#dynamic-routes-and-getStaticProps-pages). We are continuing to evaluate if these limits are sufficient.