You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Next.js has built-in support for internationalized ([i18n](https://en.wikipedia.org/wiki/Internationalization_and_localization#Naming)) routing since `v10.0.0`. You can provide a list of locales, the default locale, and domain-specific locales and Next.js will automatically handle the routing.
The i18n routing support is currently meant to complement existing i18n library solutions like `react-intl`, `react-i18next`, `lingui`, `rosetta`, and others by streamlining the routes and locale parsing.
Generally a Locale Identifier is made up of a language, region, and script separated by a dash: `language-region-script`. The region and script are optional. An example:
There are two locale handling strategies: Sub-path Routing and Domain Routing.
62
+
ロケールを扱う戦略は 2 つあります: サブパスルーティングとドメインルーティングです。
66
63
67
-
### Sub-path Routing
64
+
### サブパスルーティング
68
65
69
-
Sub-path Routing puts the locale in the url path.
66
+
サブパスルーティングはロケールを URL パスに含めます。
70
67
71
68
```js
72
69
// next.config.js
@@ -78,17 +75,17 @@ module.exports = {
78
75
}
79
76
```
80
77
81
-
With the above configuration `en-US`, `fr`, and `nl-NL`will be available to be routed to, and `en-US`is the default locale. If you have a `pages/blog.js`the following urls would be available:
By using domain routing you can configure locales to be served from different domains:
88
+
ドメインルーティングを用いると、異なるドメインごとにロケールを設定できます。
92
89
93
90
```js
94
91
// next.config.js
@@ -109,38 +106,37 @@ module.exports = {
109
106
{
110
107
domain:'example.nl',
111
108
defaultLocale:'nl-NL',
112
-
// specify other locales that should be redirected
113
-
// to this domain
109
+
// このドメインにリダイレクトすべき他のロケールを指定
114
110
locales: ['nl-BE'],
115
111
},
116
112
],
117
113
},
118
114
}
119
115
```
120
116
121
-
For example if you have `pages/blog.js`the following urls will be available:
117
+
例えば `pages/blog.js`の場合、以下のような URL が利用できます:
122
118
123
119
-`example.com/blog`
124
120
-`example.fr/blog`
125
121
-`example.nl/blog`
126
122
-`example.nl/nl-BE/blog`
127
123
128
-
## Automatic Locale Detection
124
+
## ロケールの自動検出
129
125
130
-
When a user visits the application root (generally `/`), Next.js will try to automatically detect which locale the user prefers based on the [`Accept-Language`](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Accept-Language)header and the current domain.
-**When using Sub-path Routing:**The locale prefixed path
135
-
-**When using Domain Routing:**The domain with that locale specified as the default
130
+
-**サブパスルーティングを使用する場合:**該当するロケールのプレフィックスパス
131
+
-**ドメインルーティングを使用する場合:**該当するロケールをデフォルトに指定するドメイン
136
132
137
-
When using Domain Routing, if a user with the `Accept-Language`header`fr;q=0.9`visits`example.com`, they will be redirected to `example.fr`since that domain handles the `fr`locale by default.
When using Sub-path Routing, the user would be redirected to `/fr`.
135
+
サブパスルーティングを使用している場合、ユーザーは `/fr` にリダイレクトされます。
140
136
141
-
### Disabling Automatic Locale Detection
137
+
### ロケールの自動検出を無効にする
142
138
143
-
The automatic locale detection can be disabled with:
139
+
ロケールの自動検出は次の設定で無効にできます:
144
140
145
141
```js
146
142
// next.config.js
@@ -151,25 +147,25 @@ module.exports = {
151
147
}
152
148
```
153
149
154
-
When `localeDetection`is set to `false` Next.js will no longer automatically redirect based on the user's preferred locale and will only provide locale information detected from either the locale based domain or locale path as described above.
You can access the locale information via the Next.js router. For example, using the [`useRouter()`](/docs/api-reference/next/router.md#userouter)hook the following properties are available:
-`defaultLocale`contains the configured default locale.
156
+
-`locale`には、現在アクティブなロケールが含まれます。
157
+
-`locales`には、設定されたすべてのロケールが含まれます。
158
+
-`defaultLocale`には、設定されたデフォルトのロケールが含まれます。
163
159
164
-
When [pre-rendering](/docs/basic-features/pages.md#static-generation-recommended) pages with `getStaticProps` or `getServerSideProps`, the locale information is provided in [the context](/docs/basic-features/data-fetching.md#getstaticprops-static-generation) provided to the function.
When leveraging `getStaticPaths`, the configured locales are provided in the context parameter of the function under `locales`and the configured defaultLocale under`defaultLocale`.
You can use `next/link`or`next/router`to transition between locales.
166
+
ロケール間の遷移には、`next/link`または`next/router`を利用できます。
171
167
172
-
For `next/link`, a`locale` prop can be provided to transition to a different locale from the currently active one. If no `locale` prop is provided, the currently active `locale` is used during client-transitions. For example:
@@ -217,34 +213,34 @@ export default function IndexPage(props) {
217
213
}
218
214
```
219
215
220
-
## Leveraging the NEXT_LOCALE cookie
216
+
## NEXT_LOCALE クッキーの活用
221
217
222
-
Next.js supports overriding the accept-language header with a `NEXT_LOCALE=the-locale`cookie. This cookie can be set using a language switcher and then when a user comes back to the site it will leverage the locale specified in the cookie.
For example, if a user prefers the locale `fr`but a `NEXT_LOCALE=en`cookie is set the `en`locale will be used instead until the cookie is removed or expired.
Next.js doesn't know about variants of a page so it's up to you to add the `hreflang` meta tags using [`next/head`](/docs/api-reference/next/head.md). You can learn more about `hreflang`in the [Google Webmasters documentation](https://support.google.com/webmasters/answer/189077).
> 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.
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.
For non-dynamic `getStaticProps`pages, a version is generated for each locale like above. `getStaticProps`is called with each `locale`that is being rendered. If you would like to opt-out of a certain locale from being pre-rendered, you can return `notFound: true`from `getStaticProps` and this variant of the page will not be generated.
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:
0 commit comments