반응형
next-i18next 에러 해결
설치 패키지
next-i18next
Next.js는 국제화된 라우팅을 직접 제공하지만 번역 콘텐츠 관리나 실제 번역 기능 자체는 처리하지 않습니다. Next.js가 하는 모든 일은 로케일과 URL을 동기화 상태로 유지하는 것입니다.
한마디로 next-i18next 는 다국어를 지원해주는 라이브러리 이다.
next-i18next
The easiest way to translate your NextJs apps.. Latest version: 14.0.0, last published: 13 days ago. Start using next-i18next in your project by running `npm i next-i18next`. There are 124 other projects in the npm registry using next-i18next.
www.npmjs.com
i18next Text content did not match. Server: "introMessage" Client:
다번역을 지원하는 next 라이브러리를 설치하고 테스트용 사이트까지 확인한 후 실제 서비스에 적용하려고 하는데 해당 에러가 발생했다.
처음에 안내 url을 따라 들어가 이것저것 뒤져보았지만 해결되지 않았다.
그러던 중에 금쪽같은 글을 보게되었다.
위와 동일한 에러들로 인해 여러 사람들이 문제를 나누고 있었는데 그중에 마지막 댓글방법을 적용하니 에러가 사라졋다! i18next 는 useTranslation라는 훅을 사용하는데, 사용지점에는 next의 i18next를 사용하고 provider을 넘겨주는 부분에서는 react 버전을 사용하고있는게 문제였다.
😈 hook 사용지점
import React from "react";
import { useRouter } from "next/router";
import { useTranslation } from "next-i18next";
import { Button } from "@mantine/core";
export function Header() {
const router = useRouter();
const { t, i18n } = useTranslation(["common"]);
const onToggleLanguageClick = (newLocale: string) => {
const { pathname, asPath, query } = router;
router.push({ pathname, query }, asPath, { locale: newLocale });
};
return (
<div>
<Button onClick={() => onToggleLanguageClick("kr")}>Kr</Button>
<Button onClick={() => onToggleLanguageClick("en")}>En</Button>
</div>
);
}
😈 호출
pages / index.tsx
import React from "react";
import { Button, Group } from "@mantine/core";
import { Header } from "../src/components/Header";
import { useTranslation } from "next-i18next";
import { GetStaticProps } from "next";
import { serverSideTranslations } from "next-i18next/serverSideTranslations";
export default function IndexPage() {
const { t } = useTranslation(["common"]);
return (
<Group mt={50} position="center">
<Header />
<Button size="xl">{t("introMessage")}</Button>
</Group>
);
}
type Props = {};
export const getStaticProps: GetStaticProps<Props> = async ({ locale }) => ({
props: {
...(await serverSideTranslations(locale ?? "kr", ["common"])),
},
});
😈 _documents
import { createGetInitialProps } from "@mantine/next";
import Document, { Head, Html, Main, NextScript } from "next/document";
import i18nextConfig from "../next-i18next.config";
const getInitialProps = createGetInitialProps();
export default class _Document extends Document {
static getInitialProps = getInitialProps;
render() {
const currentLocale =
this.props.__NEXT_DATA__.locale ?? i18nextConfig.i18n.defaultLocale;
return (
<Html lang={currentLocale}>
<Head />
<body>
<Main />
<NextScript />
</body>
</Html>
);
}
}
반응형
'쬬의 React' 카테고리의 다른 글
| 리액트 네이티브 styled-components unable to resolve dependency tree 오류 해결! (0) | 2023.08.03 |
|---|---|
| 비밀번호 유효성 테스트 로직 짜기 / 영문포함 / 숫자포함 / 특수문자 / 길이제한 (0) | 2023.07.26 |
| [React] useEffect 와 CleanUp 작동방식 이해하기 + input 입력완료 후 감지 코드예시 (0) | 2023.04.09 |
| [React] 렌더링 상태 체크하기 (크롬 익스텐션 활용) (0) | 2023.04.09 |
| [React] input 상태 업데이트 useState,useRef (0) | 2023.04.08 |
