react-i18 next:initReactI18 next를 사용하여 i18 다음 인스턴스로 패스해야 합니다.
react-i18 next:initReactI18 next를 사용하여 i18 다음 인스턴스로 패스해야 합니다.
최근에 패키지를 추가했는데 이 오류가 발생했습니다.제가 아는 한 모든 단계를 따랐습니다.
Next.js를 사용하고 있습니다.next-i18next
패키지는 보통 자동으로 초기화됩니다.
https://github.com/m2vi/downloader
문서에서:
그리고 우리는 추가한다.
serverSideTranslation
로.getStaticProps
또는getServerSideProps
(경우에 따라 다름)를 페이지 레벨의 컴포넌트로 설정합니다.
번역이 필요한 페이지에 추가해야 합니다.
예를 들어,pages/d/[tab]/index
파일:
import Head from 'next/head';
import { Input } from '../../../components/Input';
import YouTube from '../../../components/youtube/Main';
import { serverSideTranslations } from 'next-i18next/serverSideTranslations';
const index = () => {
return (
<>
<Head>
<title>YouTube</title>
</Head>
<YouTube />
</>
);
};
export const getServerSideProps = async ({ locale }) => ({
props: {
...(await serverSideTranslations(locale, ['common']))
}
});
export default index;
그리고 더 아래쪽으로Main
액세스 할 수 있는 컴포넌트documentation
번역 방법:
t('pages.documentation')
업데이트 next-i18next.config.config.disc
module.exports = {
i18n: {
defaultLocale: 'en',
locales: ['en', 'de', 'fr'],
},
react: { useSuspense: false },//this line
};
저도 이 문제가 있었어요.
하지만 getStaticProps에는 "재검증" 속성이 있습니다.제거했더니 오류가 사라졌어요.
추신. 아마 이게 다른 사람에게 도움이 될 거예요.
이 오류 메시지는 문제의 근본 원인은 아니지만 표시될 수 있습니다.
다음 빌드 오류 메시지가 표시되었습니다.
react-i18next:: You will need to pass in an i18next instance by using initReactI18next
TypeError: Cannot read properties of undefined (reading 'split')
at LanguageSwitcherLink ...
여기서의 근본 원인은 TypeError였습니다.
이 경우 파라미터가 포함된 컴포넌트가 있기 때문에 TypeError가 발생하였습니다.pages
디렉토리로 이동합니다.그 때문에,next build
이 컴포넌트는 정적 페이지로 빌드하려고 시도되었습니다.필요한 매개 변수가 누락되었기 때문에 이 매개 변수가 정의되지 않았습니다.
솔루션: 컴포넌트를 외부로 이동하다pages
폴더입니다.그 후, 에러 메세지도 표시되지 않게 되었습니다.initReactI18next
.
언급URL : https://stackoverflow.com/questions/67894982/react-i18next-you-will-need-to-pass-in-an-i18next-instance-by-using-initreacti
'programing' 카테고리의 다른 글
스프링 부트 application.properties에서 신뢰 저장소 정보 지정 (0) | 2023.03.18 |
---|---|
JPA 및 휴지 상태를 사용하여 MySQL JSON 열을 Java 엔티티 속성에 매핑하는 방법 (0) | 2023.03.18 |
테이블에서 값이 null이 아닌 열을 선택하려면 어떻게 해야 합니까? (0) | 2023.03.18 |
url 인수(쿼리 문자열)를 Angular의 HTTP 요청에 전달하려면 어떻게 해야 합니까? (0) | 2023.03.13 |
멀티파트 파일 업로드 스프링 부트 (0) | 2023.03.13 |