next translate
2.6.2
다음 i18N 다음에 쉬운 i18n .js +10
다음 플러그인 + i18n API
메모
우리는 Next-Translate의 버전 3.0.0 으로 작업하고 있습니다. 최근 몇 달 동안 우리는 Brisa 에 매우 집중했습니다. 그래서 마지막 릴리스 이후 오랜 시간이 지났지 만, 우리는 다음 번의 번역에 대해 잊어 버리지 않았습니다. 우리는 많은 개선과 새로운 기능을 제공하는 새로운 버전을 연구하고 있습니다. 우리는 여러분 모두와 공유하게되어 매우 기쁩니다.
이 라이브러리의 주요 목표는 Next.js 환경에서 번역을 가능한 한 간단하게 유지하는 것입니다.
Next-Translate에는 다음 두 부분이 있습니다 : JS 플러그인 + i18N API .
특징
구성 파일에서 네임 스페이스가 필요한 각 페이지를 지정합니다.
i18n.json
{
"pages" : {
"*" : [ "common" ] ,
"/" : [ "home" ] ,
"/cart" : [ "cart" ] ,
"/content/[slug]" : [ "content" ] ,
"rgx:^/account" : [ "account" ]
}
// rest of config here...
}네임 스페이스 JSON 파일을 추가하는 방법에 대해 여기를 읽으십시오.
Next Translate는 각 페이지에 현재 언어의 네임 스페이스 만 가지고 있는지 확인합니다. 따라서 100 개의 지역이 있으면 1 만로드됩니다.
이를 위해 우리는 다음에 필요한 번역 파일을 다음에로드하는 웹 팩 로더를 사용합니다 ( getStaticProps , GetServersideProps 또는 GetInitialProps ). 이 메소드 중 하나가 이미 페이지에있는 경우 Webpack Loader는 자신의 방법을 사용하지만 사용할 기본값은 다음과 같습니다.
getStaticProps . 다음 두 지점에 지정된 페이지가 아닌 한 대부분의 페이지에서 사용되는 기본 메소드 입니다. 이것은 성능을위한 것이므로 계산은 요청 시간 대신 빌드 시간으로 수행됩니다.getServerSideProps . [slug].js 또는 [...catchall].js 와 같은 동적 페이지의 기본 메소드 입니다. 이 페이지의 경우 getStaticPaths 정의해야하며 각 로케일에 대한 슬러그가 어떻게되어야하는지에 대한 지식이 없기 때문입니다. 마찬가지로, 기본적으로 어떻게되며, GetStaticPaths를 작성하면 이미 GetStaticProps를 사용하여 번역을로드합니다.getInitialProps . 이것은 HOC를 사용하는이 페이지의 기본 메소드 입니다. HOC가 getInitialProps 덮어 쓸 수 있기 때문에 충돌을 피하기위한 것입니다. 이 전체 프로세스는 투명하므로 페이지에서 useTranslation 후크를 직접 소비하여 네임 스페이스를 사용할 수 있으며 다른 작업을 수행 할 필요가 없습니다.
어떤 이유로 _app.js 파일에서 getInitialProps 사용하는 경우 번역은 _app.js 의 getInitialProps 에만로드됩니다. 최적화 이유로 절대적으로 필요한 경우이 접근법을 사용하지 않는 것이 좋습니다.
yarn add next-translate next-translate-plugin 개발자가 빌드 프로세스 중에 페이지별로 한 페이지별로 번역을 효율적으로 처리 할 수있는 도구입니다. next-translate 패키지와는 다릅니다.이 패키지는 개발자가 필요한 코드의 번역에 액세스 할 수 있습니다. 플러그인은 모든 페이지를 구문 분석하고 번역을 검색하고 번역을 추가하여 페이지 파일을 다시 작성하여 작동합니다. 이로 인해 플러그인은 Next.js 응용 프로그램 내에서 번역을 처리하기위한보다 효율적이고 유연한 솔루션으로 만듭니다. 플러그인을 devddependency로 설치하는 것이 좋습니다.
yarn add next-translate-plugin -D다음 .config.js 파일에서 :
const nextTranslate = require ( 'next-translate-plugin' )
module . exports = nextTranslate ( ) 또는 이미 Next.config.js 파일이 있고 변경 사항을 유지하려면 구성 객체를 nextTranslate() 로 전달하십시오. 예를 들어 웹 팩의 경우 다음과 같이 할 수 있습니다.
const nextTranslate = require ( 'next-translate-plugin' )
module . exports = nextTranslate ( {
webpack : ( config , { isServer , webpack } ) => {
return config ;
}
} ) 프로젝트의 루트에 구성 파일 i18n.json (또는 module.exports 가있는 i18n.js ) 을 추가하십시오. 각 페이지에는 네임 스페이스가 있어야합니다. 자세한 내용은 구성 섹션에서 확인하십시오.
{
"locales" : [ " en " , " ca " , " es " ],
"defaultLocale" : " en " ,
"pages" : {
"*" : [ " common " ],
"/" : [ " home " , " example " ],
"/about" : [ " about " ]
}
}구성 파일에서 여기에 지정한 구성과 Next.js 10의 국제화에 대한 자체 기능을 모두 사용할 수 있습니다.
기본적으로 네임 스페이스는 /Locales 루트 디렉토리에 지정되어 있습니다.
/로케일
.
├── ca
│ ├── common.json
│ └── home.json
├── en
│ ├── common.json
│ └── home.json
└── es
├── common.json
└── home.json 각 파일 이름은 pages 구성 속성에 지정된 네임 스페이스와 일치하지만 각 파일 콘텐츠는 다음과 유사해야합니다.
{
"title" : " Hello world " ,
"variable-example" : " Using a variable {{count}} "
}그러나 다른 대상을 사용하여 구성 속성에서 LoadLocale을 사용하여 네임 스페이스 파일을 저장할 수 있습니다.
i18n.js
{
// ...rest of config
"loadLocaleFrom" : ( lang , ns ) =>
// You can use a dynamic import, fetch, whatever. You should
// return a Promise with the JSON file.
import ( `./myTranslationsFiles/ ${ lang } / ${ ns } .json` ) . then ( ( m ) => m . default ) ,
}그런 다음 페이지의 변환과 구성 요소를 사용하십시오.
pages/example.js
import useTranslation from 'next-translate/useTranslation'
export default function ExamplePage ( ) {
const { t , lang } = useTranslation ( 'common' )
const example = t ( 'variable-example' , { count : 42 } )
return < div > { example } </ div > // <div>Using a variable 42</div>
}페이지에서 번역을 직접 소비 할 수 있으며 각 페이지에서 네임 스페이스 파일을 수동으로로드하는 것에 대해 걱정할 필요가 없습니다. 다음 번도 플러그인은 페이지가 필요한 네임 스페이스 만 현재 언어로만로드합니다.
구성 파일에서 여기에 지정한 구성과 Next.js 10의 국제화에 대한 자체 기능을 모두 사용할 수 있습니다.
| 옵션 | 설명 | 유형 | 기본 |
|---|---|---|---|
defaultLocale | 기본 로케일의 ISO ( "en"). | string | "en" |
locales | 프로젝트에 사용할 모든 언어가 포함 된 배열. | string[] | [] |
loadLocaleFrom | 네임 스페이스를로드하는 방식을 변경하십시오. | JSON 과 Promise 반환하는 function . | 기본적으로 Locales Root 디렉토리에서 네임 스페이스를로드하고 있습니다. |
pages | 각 페이지에 사용 된 네임 스페이스를 정의하는 객체. 객체의 예 : {"/": ["home", "example"]} . 모든 페이지에 네임 스페이스를 추가하려면 키 "*" , 예 : {"*": ["common"]} 사용해야합니다. rgx: {"rgx:/form$": ["form"]} . 배열 대신 함수를 사용하여 일부 규칙에 따라 일부 네임 스페이스를 제공 할 수도 있습니다. 예 : { "/": ({ req, query }) => query.type === 'example' ? ['example'] : []} | Object<string[] or function> | {} |
logger | 기능 개발 및 생산에서 누락 된 키를 기록하는 기능. i18n.json 구성 파일로 사용하는 경우 i18n.js 로 변경해야합니다. | function | 기본적으로 Logger는 개발 중에만 console.warn 수행하는 기능입니다. |
loggerEnvironment | 로거가 브라우저, 노드 또는 둘 다에서 실행되는지 정의하는 문자열 | "node" | "browser" | "both" | "browser" |
logBuild | 각 페이지에는 네임 스페이스, 현재 언어 및 네임 스페이스를로드하는 데 사용되는 메소드를 나타내는 로그가 있습니다. 이것으로 당신은 그것을 비활성화 할 수 있습니다. | Boolean | true |
loader | 웹 팩 로더를 비활성화하고 각 페이지에 네임 스페이스를 수동으로로드하려면이 옵션을 비활성화하여 가능성이 있습니다. | Boolean | true |
interpolation | 보간에 사용되는 구분기를 변경하십시오. | {prefix: string; suffix: string, formatter: function } | {prefix: '{{', suffix: '}}'} |
keySeparator | 중첩 키에 사용되는 분리기를 변경하십시오. JSON 번역 파일에서 둥지를 비활성화하려면 false 로 설정하십시오. 자연 텍스트를 키로 사용하려는 경우 유용 할 수 있습니다. | string | false | '.' |
nsSeparator | char to Key에서 네임 스페이스를 분할. 자연스러운 텍스트를 키로 사용하려면 false 로 설정해야합니다. | string | false | ':' |
defaultNS | useTranslation 또는 변환 키에 전달되지 않은 경우 사용되는 기본 네임 스페이스. | string | undefined |
staticsHoc | 우리가 API (AppWithi18n)에있는 HOC는 필요한 것보다 더 많은 KB를 포함시키지 않기 위해 Hoist-Non-React-Statics를 사용하지 않습니다 (페이지의 GetinitialProps와는 다른 정적 값이 거의 사용되지 않습니다) . 통계와 충돌하는 경우 여기에 호이스트-비아크 스테이션 (또는 다른 대안)을 추가 할 수 있습니다. 예를 참조하십시오. | Function | null |
extensionsRgx | Webpack Loader에서 사용하는 Regex를 변경하여 Next.js 페이지를 찾으십시오. | Regex | /.(tsx|ts|js|mjs|jsx)$/ |
revalidate | 각 페이지에서 기본 리발 리이트를 원한다면 숫자를 재평가하여 숫자를 전달하여 그렇게 할 수있는 기회를 제공합니다. 여전히 다른 재평가 금액으로 페이지에서 getStaticProps를 정의 하고이 기본 오버라이드를 재정의 할 수 있습니다. | Number | 정의하지 않으면 기본적으로 페이지는 재평가가 없습니다. |
pagesInDir | next ./my-app 실행하여 페이지가있는 곳으로 변경되면 여기에서 my-app/pages 정의하여 다음 번의 트랜지 레이트가 어디에 있는지 추측 할 수 있습니다. | String | 정의하지 않으면 기본적으로 페이지는 pages 및 src/pages 와 같은 클래식 장소에서 검색됩니다. |
localesToIgnore | 미들웨어를 사용하여 기본 로케일을 접두사 할 때이 로케일이 무시할 때 (다음 +12에서, 그것을하는 방법을 알아보십시오). | Array<string> | ['default'] |
allowEmptyStrings | 번역 된 빈 줄을 처리하는 방법을 변경하십시오. 진실로 생략되거나 전달되면 빈 문자열을 반환합니다. 거짓으로 전달되면 키 이름 자체 (NS 포함)를 반환합니다. | Boolean | true |
크기 : ~ 150b?
이 후크는 페이지 / 구성 요소에서 번역을 사용하는 권장 방법입니다.
예:
import React from 'react'
import useTranslation from 'next-translate/useTranslation'
export default function Description ( ) {
const { t , lang } = useTranslation ( 'ns1' ) // default namespace (optional)
const title = t ( 'title' )
const titleFromOtherNamespace = t ( 'ns2:title' )
const description = t `description` // also works as template string
const example = t ( 'ns2:example' , { count : 3 } ) // and with query params
const exampleDefault = t ( 'ns:example' , { count : 3 } , { default : "The count is: {{count}}." } ) // and with default translation
return (
< >
< h1 > { title } </ h1 >
< p > { description } </ p >
< p > { example } </ p >
< >
)
} t 함수 :
i18nKey 에 포함되지 않은 경우 사용할 네임 스페이스. useTranslation 과 유사하지만 후크는 없습니다. 이 헬퍼는 App Dir 에서만 작동합니다 .
const { t , lang } = createTranslation ( 'ns1' ) // default namespace (optional)
const title = t ( 'title' )크기 : ~ 560b?
useTranslation 후크의 대안이지만 기능이없는 이러한 구성 요소에 대한 대안입니다. (권장하지 않으면 useTranslation 후크를 사용하는 것이 좋습니다.) .
withTranslation HOC는 i18n (object {t : function, lang : string})이라는 추가 소품으로 구성 요소를 반환합니다.
예:
import React from 'react'
import withTranslation from 'next-translate/withTranslation'
class Description extends React . Component {
render ( ) {
const { t , lang } = this . props . i18n
const description = t ( 'common:description' )
return < p > { description } </ p >
}
}
export default withTranslation ( NoFunctionalComponent ) useTranslation("common") 과 유사하게 사용할 기본 네임 스페이스를 정의하는 두 번째 매개 변수와 함께 withTranslation 호출 할 수 있습니다.
export default withTranslation(NoFunctionalComponent, "common")
크기 : ~ 1.4KB?
때로는 텍스트 (Bolds, Links 등) 내부에서 HTML로 일부 번역을해야합니다. Trans 구성 요소는 정확히 필요한 것입니다. 이 경우이 구성 요소를 사용하는 것이 좋습니다.이 경우 다른 경우 대신 useTranslation Hook의 사용법을 적극 권장합니다.
예:
// The defined dictionary entry is like:
// "example": "<0>The number is <1>{{count}}</1></0>",
< Trans
i18nKey = "common:example"
components = { [ < Component /> , < b className = "red" /> ] }
values = { { count : 42 } }
/> 또는 components 사용 소품 사용 객체 :
// The defined dictionary entry is like:
// "example": "<component>The number is <b>{{count}}</b></component>",
< Trans
i18nKey = "common:example"
components = { {
component : < Component /> ,
b : < b className = "red" /> ,
} }
values = { { count : 42 } }
defaultTrans = "<component>The number is <b>{{count}}</b></component>"
/>i18nKey 문자열 - i18n 항목의 키 (네임 스페이스 : 키)components - 배열 | 개체 - 배열의 경우 각 인덱스는 정의 된 태그 <0> / <1> 에 해당합니다. 객체의 경우 각 키는 정의 된 태그 <example> 에 해당합니다.values - 객체 - 쿼리 매개 변수fallback - 문자열 | 문자열 [] - 선택 사항. 폴백 i18nkey i18nkey가 일치하지 않으면.defaultTrans 문자열 - 키의 기본 변환. 폴백 키를 사용하는 경우 모든 폴백을 소진 한 후에 만 사용됩니다.ns i18nKey 에 포함되지 않은 경우 사용할 네임 스페이스returnObjects -Boolean- 모든 번역과 함께 JSON의 일부를 얻으십시오. 더보십시오. Trans 구성 요소의 기능이 필요하지만 t(props.i18nKey) 함수의 출력 대신 문자열 을 보간 해야하는 경우, i18nKey 대신 text 소품을 취하는 TransText 구성 요소도 있습니다.
text - 문자열 - 보간이 필요한 태그가 포함 된 문자열components - 배열 | 객체 - 이것은 Trans 와 정확히 동일하게 작동합니다 (위 참조). 이것은 returnObjects: true 사용하여 t() 의 출력을 매핑 할 때 특히 유용합니다.
// The defined dictionary entry is like:
// "content-list": ["List of <link>things</link>", "with <em>tags</em>"]
const contentList = t ( 'someNamespace:content-list' , { } , { returnObjects : true } ) ;
{ contentList . map ( ( listItem : string ) => (
< TransText
text = { listItem }
components = { {
link : < a href = "some-url" /> ,
em : < em /> ,
} }
/>
) }크기 : ~ 1.5KB?
DynamicNamespaces 구성 요소는 예를 들어 모달로 동적 네임 스페이스를로드하는 데 유용합니다.
예:
import React from 'react'
import Trans from 'next-translate/Trans'
import DynamicNamespaces from 'next-translate/DynamicNamespaces'
export default function ExampleWithDynamicNamespace ( ) {
return (
< DynamicNamespaces namespaces = { [ 'dynamic' ] } fallback = "Loading..." >
{ /* ALSO IS POSSIBLE TO USE NAMESPACES FROM THE PAGE */ }
< h1 >
< Trans i18nKey = "common:title" />
</ h1 >
{ /* USING DYNAMIC NAMESPACE */ }
< Trans i18nKey = "dynamic:example-of-dynamic-translation" />
</ DynamicNamespaces >
)
} ['dynamic'] 네임 스페이스는 pages 구성에 나열되어서는 안됩니다 .
pages: {
'/my-page' : [ 'common' ] , // only common namespace
}namespaces - 문자열 [] - 다운로드 할 동적 네임 스페이스 목록 - 필수 .fallback -BectNode- 표시된 폴백이 표시되는 동안 네임 스페이스가로드됩니다. - 선택 사항 .dynamic - 함수 - 기본적으로 구성에서 LoadLocalefr을 사용하여 네임 스페이스를로드하지만 다른 대상을 지정할 수 있습니다. - 선택 사항 .크기 : ~ 1.3KB?
비동기 기능 구성 요소 / 페이지 외부에 t 함수를로드합니다. 서버 측 및 클라이언트 측에서 작동합니다.
Usetranslation 후크와 달리 여기에서 모든 네임 스페이스를 사용할 수 있으며 "페이지"구성에 정의 된 네임 스페이스 일 필요는 없습니다. 런타임시 매개 변수로 표시된 네임 스페이스를 다운로드합니다.
배열을 매개 변수로 제공하여 여러 네임 스페이스를로드 할 수 있습니다.이 경우 기본 네임 스페이스는 주먹이됩니다.
getStaticProps 내부의 예 :
import getT from 'next-translate/getT'
// ...
export async function getStaticProps ( { locale } ) {
const t = await getT ( locale , 'common' )
const title = t ( 'title' )
return { props : { title } }
}API 경로 내부의 예 :
import getT from 'next-translate/getT'
export default async function handler ( req , res ) {
const t = await getT ( req . query . __nextLocale , 'common' )
const title = t ( 'title' )
res . statusCode = 200
res . setHeader ( 'Content-Type' , 'application/json' )
res . end ( JSON . stringify ( { title } ) )
}여러 네임 스페이스로드의 예 :
import getT from 'next-translate/getT'
export default async function handler ( req , res ) {
const t = await getT ( req . query . __nextLocale , [ 'common' , 'errors' ] )
const title = t ( 'title' ) // The default namespace is the first one.
const errorMessage = t ( 'errors:app_error' ) // The default namespace is the first one.
res . statusCode = 200
res . setHeader ( 'Content-Type' , 'application/json' )
res . end ( JSON . stringify ( { title } ) )
}크기 : ~ 3KB?
I18nProvider 다음 번 트랜 지 레이트 가 내부적으로 사용하는 컨텍스트 제공 업체입니다. 그래서 당신은 이것을 필요로하지 않을 것입니다 .
그러나 일부 경우 유용 할 수 있기 때문에 API에 노출됩니다. 예를 들어, 페이지에서 다중 언어 변환을 사용합니다.
I18nProvider 네임 스페이스를 축적하고 있으므로 오래된 것들을 유지하기 위해 새 네임 스페이스 이름을 바꿀 수 있습니다.
import React from 'react'
import I18nProvider from 'next-translate/I18nProvider'
import useTranslation from 'next-translate/useTranslation'
// Import English common.json
import commonEN from '../../locales/en/common.json'
function PageContent ( ) {
const { t , lang } = useTranslation ( )
console . log ( lang ) // -> current language
return (
< div >
< p > { t ( 'common:example' ) /* Current language */ } </ p >
< p > { t ( 'commonEN:example' ) /* Force English */ } </ p >
</ div >
)
}
export default function Page ( ) {
const { lang } = useTranslation ( )
return (
< I18nProvider lang = { lang } namespaces = { { commonEN } } >
< PageContent />
</ I18nProvider >
)
}크기 : ~ 3.7kb?
appWithI18n 은 다음 번의 트랜스 슬레이트에서 내부적으로 사용됩니다. 그래서 당신은 이것을 필요로하지 않을 것입니다 . 그러나 웹 팩 로더 옵션을 비활성화하고 네임 스페이스를 수동으로로드하기로 결정한 경우 API에 노출됩니다.
Webpack Loader를 사용하지 않으려면 _app.js 파일에 넣고 (없는 경우 _app.js 파일을 작성하십시오).
예:
_app.js
import appWithI18n from 'next-translate/appWithI18n'
import i18nConfig from '../i18n'
function MyApp ( { Component , pageProps } ) {
return < Component { ... pageProps } />
}
// Wrapping your _app.js
export default appWithI18n ( MyApp , {
... i18nConfig ,
// Set to false if you want to load all the namespaces on _app.js getInitialProps
skipInitialProps : true ,
} ) skipInitialProps=true 인 경우 LoadNamespaces 도우미를 사용하여 각 페이지의 네임 스페이스를 수동으로로드해야합니다.
크기 : ~ 1.9kb?
loadNamespaces 는 내부적으로 Nextranslate에서 사용됩니다. 그래서 당신은 이것을 필요로하지 않을 것입니다 . 그러나 웹 팩 로더 옵션을 비활성화하고 네임 스페이스를 수동으로로드하기로 결정한 경우 API에 노출됩니다.
네임 스페이스를로드하려면 헬퍼가 제공하는 소품을 페이지에 반환해야합니다.
import loadNamespaces from 'next-translate/loadNamespaces'
export function getStaticProps ( { locale } ) {
return {
props : {
... ( await loadNamespaces ( { locale , pathname : '/about' } ) ) ,
}
}
} 잘 작동하기 위해서는 _app.js 가 AppWithi18N으로 싸여 있어야합니다. 또한 구성 속성에서 loadLocaleFrom 은이를 정의 해야합니다 .
이 접미사를 키에 추가하여 6 개의 복수 형식 (CLDR Plurals 페이지에서 가져옵니다)을 지원합니다 (또는 _ 접두사가없는 키 아래에서 둥지) :
_zero_one (단수)_two (이중)_few (paucal)_many (별도의 클래스가있는 경우 분수에도 사용됨)_other (필수 - 일반 복수 형태 - 언어가 단일 형식 만있는 경우에도 사용됨)복수에 대한 자세한 정보는 여기를 참조하십시오 .
_other 는 모든 지역에서 사용되는 유일한 일반적인 복수형이기 때문에 마지막으로 필요합니다.
다른 모든 복수형은 로케일에 따라 다릅니다. 예를 들어 영어에는 _one and _other (고양이 1 대 2 고양이)가 있습니다. 일부 언어에는 러시아어와 아랍어와 같은 더 많은 언어가 있습니다.
또한, 우리는 또한 숫자 ( _0 , _999 )를 지정하여 정확한 일치를 지원하며 이는 모든 지역에 대해 작동합니다. 예는 다음과 같습니다.
암호:
// **Note**: Only works if the name of the variable is {{count}}.
t ( 'cart-message' , { count } )네임 스페이스 :
{
"cart-message_0" : "The cart is empty" , // when count === 0
"cart-message_one" : "The cart has only {{count}} product" , // singular
"cart-message_other" : "The cart has {{count}} products" , // plural
"cart-message_999" : "The cart is full" , // when count === 999
}또는
{
"cart-message" : {
"0" : "The cart is empty" , // when count === 0
"one" : "The cart has only {{count}} product" , // singular
"other" : "The cart has {{count}} products" , // plural
"999" : "The cart is full" , // when count === 999
}
}intl.pluralrules API는 최신 브라우저에서만 사용할 수 있습니다 . 레거시 브라우저에서 사용하려면 폴리 필드를 추가해야합니다.
번역 내에서 HTML을 정의 할 수 있습니다.
{
"example-with-html" : " <0>This is an example <1>using HTML</1> inside the translation</0> "
}예:
import Trans from 'next-translate/Trans'
// ...
const Component = ( props ) => < p { ... props } />
// ...
< Trans
i18nKey = "namespace:example-with-html"
components = { [ < Component /> , < b className = "red" /> ] }
/ >렌더링 된 결과 :
< p > This is an example < b class =" red " > using HTML </ b > inside the translation </ p > components 배열의 각 인덱스는 정의의 <index></index> 에 해당합니다.
components 배열에서 각 요소의 어린이를 통과 할 필요는 없습니다. 어린이는 계산됩니다.
네임 스페이스에서는 다음과 같이 중첩 된 키를 정의 할 수 있습니다.
{
"nested-example" : {
"very-nested" : {
"nested" : " Nested example! "
}
}
}사용하려면 사용해야합니다. " ID 분리기 :
t `namespace:nested-example.very-nested.nested`배열로 사용할 수도 있습니다.
{
"array-example" : [
{ "example" : " Example {{count}} " },
{ "another-example" : " Another example {{count}} " }
]
} 옵션 returnObjects 로 모든 배열 변환을 받으십시오.
t ( 'namespace:array-example' , { count : 1 } , { returnObjects : true } )
/*
[
{ "example": "Example 1" },
{ "another-example": "Another example 1" }
]
*/ 또한 KeySeparator를 키로 사용하여 모든 번역을 얻을 수 있습니다. 기본값은 '.' :
t ( 'namespace:.' , { count : 1 } , { returnObjects : true } )
/*
{
"array-example": [
{ "example": "Example 1" },
{ "another-example": "Another example 1" }
]
}
*/ 번역이 없으면 다른 번역을 검색하기 위해 폴백 ( string|string[] )을 정의 할 수 있습니다.
const { t } = useTranslation ( )
const textOrFallback = t (
'ns:text' ,
{ count : 1 } ,
{
fallback : 'ns:fallback' ,
}
)폴백 목록 :
const { t } = useTranslation ( )
const textOrFallback = t (
'ns:text' ,
{ count : 42 } ,
{
fallback : [ 'ns:fallback1' , 'ns:fallback2' ] ,
}
)트랜스 구성 요소에서 :
< Trans
i18nKey = "ns:example"
components = { [ < Component /> , < b className = "red" /> ] }
values = { { count : 42 } }
fallback = { [ 'ns:fallback1' , 'ns:fallback2' ] } // or string with just 1 fallback
/> interpolation.format 구성을 사용하여 매개 변수를 포맷 할 수 있습니다.
i18n.js :
const formatters = {
es : new Intl . NumberFormat ( "es-ES" ) ,
en : new Intl . NumberFormat ( "en-EN" ) ,
}
return {
// ...
interpolation : {
format : ( value , format , lang ) => {
if ( format === 'number' ) return formatters [ lang ] . format ( value )
return value
}
}
}영어 네임 스페이스 :
{
"example" : " The number is {{count, number}} "
}스페인 네임 스페이스 :
{
"example" : " El número es {{count, number}} "
}사용 :
t ( 'example' , { count : 33.5 } )보고:
The number is 33.5El número es 33,5 현재 언어를 변경하려면 locale 소품을 전달하는 Next.js Navigation (링크 및 라우터)을 사용할 수 있습니다.
Next.js 의 useRouter hook를 사용하여 가능한 ChangeLanguage 구성 요소의 예입니다.
import React from 'react'
import Link from 'next/link'
import useTranslation from 'next-translate/useTranslation'
import i18nConfig from '../i18n.json'
const { locales } = i18nConfig
export default function ChangeLanguage ( ) {
const { t , lang } = useTranslation ( )
return locales . map ( ( lng ) => {
if ( lng === lang ) return null
return (
< Link href = "/" locale = { lng } key = { lng } >
{ t ( `layout:language-name- ${ lng } ` ) }
</ Link >
)
} )
} setLanguage 사용하여 같은 페이지를 유지하면서 언어를 변경할 수도 있습니다.
import React from 'react'
import setLanguage from 'next-translate/setLanguage'
export default function ChangeLanguage ( ) {
return (
< button onClick = { async ( ) => await setLanguage ( 'en' ) } > EN </ button >
)
} 언어를 변경하기 위해 locales 목록에 액세스하는 또 다른 방법은 Next.js router 사용하는 것입니다. locales 목록은 Next.js Userouter Hook를 사용하여 액세스 할 수 있습니다.
사용자 정의 언어로 NEXT_LOCALE 이라는 쿠키를 값으로 설정할 수 있습니다.이 방법으로 로케일을 강제로 만들 수 있습니다.
후크의 예 :
import { useRouter } from 'next/router'
// ...
function usePersistLocaleCookie ( ) {
const { locale , defaultLocale } = useRouter ( )
useEffect ( persistLocaleCookie , [ locale , defaultLocale ] )
function persistLocaleCookie ( ) {
if ( locale !== defaultLocale ) {
const date = new Date ( )
const expireMs = 100 * 24 * 60 * 60 * 1000 // 100 days
date . setTime ( date . getTime ( ) + expireMs )
document . cookie = `NEXT_LOCALE= ${ locale } ;expires= ${ date . toUTCString ( ) } ;path=/`
}
}
} 경우에 따라 페이지가 현재 언어 일 때 다른 언어로 텍스트를 표시하는 예외를 수행 할 수 있습니다.
이 경우 I18nProvider 사용하여이를 달성 할 수 있습니다.
여기서하는 방법을 배우십시오.
차세대 트랜지 레이트 사용 기본적으로 node.js process ( process.cwd() )의 현재 작업 디렉토리.
변경하려면 사용할 수 있습니다.
NEXT_TRANSLATE_PATH 환경 변수. 상대적 및 절대 경로를 모두 지원합니다process.chdir(PATH_TO_NEXT_TRANSLATE) process.cwd() 서버 구성 요소 및 클라이언트 구성 요소와 관련하여 다른 페이지에 동일한 항목을로드하는 것이 어려울 수 있습니다. 이 과정을 단순화하기 위해 next-translate-plugin 사용하여 모든 복잡성을 추출했습니다 .
Next Translate가 New Next.js 13 App Dir Paradigm과 어떻게 작동하는지에 대해 더 자세히 알고 싶다면 자세한 설명을 보려면 이 기사를 확인하십시오.
"Pages"폴더 대신 "앱"폴더를 사용하는 경우 next-translate-plugin 변경 사항을 자동으로 감지하고 다음 번 트랜스 조정 구성을 터치 할 필요가 없습니다. 유일한 차이점은 "페이지"구성 속성이 "앱"폴더 내에있는 페이지를 참조한다는 것입니다.
i18n.js
module . exports = {
locales : [ 'en' , 'ca' , 'es' ] ,
defaultLocale : 'en' ,
pages : {
'*' : [ 'common' ] ,
'/' : [ 'home' ] , // app/page.tsx
'/second-page' : [ 'home' ] , // app/second-page/page.tsx
} ,
} "페이지"폴더를 "앱"으로 간단히 변경하면 useTranslation Hook 또는 Trans 구성 요소를 사용하여 페이지 내에서 번역을 소비 할 수 있습니다. 각 페이지에 어떤 네임 스페이스가로드되었는지 알 수있는 로그 (활성화 된 경우)가 여전히 표시되며 다른 모든 것이 동일해야합니다.
? 서버 페이지/구성 요소 (+0KB) : app/page.js :
import useTranslation from 'next-translate/useTranslation'
export default function HomePage ( ) {
const { t , lang } = useTranslation ( 'home' )
return < h1 > { t ( 'title' ) } </ h1 >
} ? 닐 클라이언트 페이지/구성 요소 (+498b) : app/checkout/page.js
"use client"
import useTranslation from 'next-translate/useTranslation'
export default function CheckoutPage ( ) {
const { t , lang } = useTranslation ( 'checkout' )
return < h1 > { t ( 'title' ) } </ h1 >
} Next.js 10은 i18N 라우팅 지원을 도입하여 /es/page-name 탐색하여 페이지를 렌더링 할 수 있습니다. 여기서 페이지 pages/page-name.js useRouter 후크를 사용하여 액세스하여 locale 얻습니다.
그러나 페이지가 pages 에서 앱 Dir 로 이동 했으므로이 i18n 라우팅은 더 이상 올바르게 작동하지 않습니다 .
Nextranslate에서, 우리는 페이지를 라우팅하는 대신 번역을위한 라이브러리가되는 것을 목표 로이 기능을 다시 구현하지 않기로 선택했습니다. 앞으로이 기능이 app 디렉토리에서 구현되기를 바랍니다.
다음을 권장합니다.
[lang] 첫 번째 레벨에 추가하십시오. 즉, 모든 페이지가 내부 /app/[lang] 에 있습니다.i18n.(js|json) 파일 내부의 모든 페이지를 처음 시작할 수 있도록 /[lang] 포함하십시오. module.exports = {
locales: ['en', 'ca', 'es'],
defaultLocale: 'en',
pages: {
'*': ['common'],
- '/': ['home'],
+ '/[lang]': ['home'],
- '/second-page': ['home'],
+ '/[lang]/second-page': ['home'],
},
} 다음 번의 번역 수준에서 우리는 searchParams.get('lang') 및 params.lang 에 따라 이미 언어를 자동으로 감지합니다 . 따라서 각 페이지에 대해 구성 할 필요가 없으므로 서버/클라이언트 페이지/구성 요소 내에서 next-translate 정상 으로 사용할 수 있습니다.
import useTranslation from 'next-translate/useTranslation'
import Trans from 'next-translate/Trans'
export default function Page ( ) {
const { t , lang } = useTranslation ( 'common' )
return (
< >
< h1 > { t `title` } </ h1 >
< Trans i18nKey = "common:another-text" components = { [ < b /> ] } />
</ >
)
} next-translate 데모가 있습니다. JS Repo :
그것을 사용하려면 :
npx create-next-app --example with-next-translate with-next-translate-app
# or
yarn create next-app --example with-next-translate with-next-translate-app이 데모는이 저장소에 있습니다.
git clone [email protected]:aralroca/next-translate.gitcd next-translateyarn && yarn example:basic기본 데모와 유사하지만 일부 엑스트라와 유사하지만 TypeScript, WebPack 5, MDX, _App.js가 상단에, SRC/Pages 폴더에있는 페이지, SRC/Translations의 로컬로드/다른 구조의로드.
이 데모는이 저장소에 있습니다.
git clone [email protected]:aralroca/next-translate.gitcd next-translateyarn && yarn example:complex 복잡한 데모와 유사하지만 일부 추가 기능 : pages 폴더 대신 새로운 레이아웃 시스템과 함께 Next.js +13 앱 폴더를 사용하고 있습니다.
이 데모는이 저장소에 있습니다.
git clone [email protected]:aralroca/next-translate.gitcd next-translateyarn && yarn example:with-app-directory기본 예제와 유사하지만 페이지 네임 스페이스를로드하면 i18n.json 구성 파일에서 웹 팩 로더를 수동으로 비활성화합니다.
우리는 그것이 이런 식으로 사용하는 것을 권장하지 않습니다. 그러나 우리는 웹 팩 로더에 익숙하지 않으면 누구나 그렇게 할 수있는 기회를 제공합니다.
이 데모는이 저장소에 있습니다.
git clone [email protected]:aralroca/next-translate.gitcd next-translateyarn && yarn example:without-loader 이 멋진 사람들에게 감사합니다 (이모티콘 키) :
아랄 로카 고메즈 ? | Vincent Ducorps | Björn Rave | 저스틴 | 폴 ? | Ademílson F. Tonato | faul |
bickmaev5 | 피에르 그 리무드 | 로마인 미친 | 에고르 | 대런 | Giovanni Giordano | 유진 |
앤드류 정 | Thanh Minh | 크루 톤 | 패트릭 | 반 트로이 | 잡역부 | gurkerl83 |
Teemu Perämäki | 루이스 세라노 | J-Schumann | 안드레 hsu | slevy85 | Bernd Artmüller | 리하드 Ščeredins |
N4N5 | 루빈 모야 | Tom Esterez | Dan Needham | 브루노 안티 튜스 | 카안 아타 칸 | 로메인 |
아르 나우 지 메네즈 | Edwin Veldhuizen | Duc Ngo Viet | 빌 헬라 리 | wuif | Michał Bar | wuif |
MARCES ENGEL | Michał Bar | 드래그 | MARCES ENGEL | 바스코 실바 | Vsevolod Volkov | 펠릭스 얀 |
무함마드 알 지크리 | 마르셀로 올리비라 | 잭 선더랜드 | 앤드류 오븐 | 다니 | Mateusz Lesiak | Curetix |
혼자 ? | Hardikbandhiya | 팀 오 피터스 | 리 밍 | 페르난도 가르시아 헤르나데스 | HICHEM FANTAR | Huseyin Onal |
제시 마틴 |
이 프로젝트는 All-Contritors 사양을 따릅니다. 모든 종류의 공헌을 환영합니다!
