React Native에서 설정된 언어를 Next.js에 전달하기

 

React Native에서 Next.js로 웹뷰 이동을 할 때,

React Native에 미리 세팅된 언어를 Next.js에도 똑같이 적용을 하고 싶다.

 

1) localStorage에 저장해서 클라이언트 렌더링 때 context 등의 전역변수로 관리한다.

- 클라이언트 렌더링 할 때서야 언어를 감지하므로 UX 상 좋지 않다.

 

2) Next.js는 서버사이드 렌더링이기 때문에 서버에서 미리 유저의 언어를 알아낸다.

- 이거다! HTTP Aceept-Language 헤더에 기반해 사용자의 local을 감지하면 된다.

 

// RN 코드

import WebView from "react-native-webview";

<WebView
    ...
    source={{
      uri: "이동할 URL",
      headers: {
        'Accept-Language': `${사용자 언어}`, // ex) "ko", "en"
      },
    }}
/>

// next.js 코드
// next-18next.config.js

/** @type {import('next-i18next').UserConfig} */
module.exports = {
  i18n: {
    defaultLocale: "en",
    locales: ["en", "ko", "es"], // 영어, 한국어, 스페인어 지원
    localeDetection: true, // 디폴트 값. 이것이 true여야 'Accept-Language'에 있는 locale을 감지한다.
  },
};

 

이것이 SSR이로구나 👀 👀 👀

 

 

참고

https://velog.io/@jeonbyeongmin/Next.js%EB%A1%9C-%EB%8B%A4%EA%B5%AD%EC%96%B4i18n-%EC%A0%9C%EA%B3%B5%ED%95%98%EA%B8%B0

Next.js로 다국어(i18n) 제공하기

https://jake-seo-dev.tistory.com/483

HTTP 헤더란? (Http headers)

https://nextjs.org/docs/pages/building-your-application/routing/internationalization