Next.JS 홈페이지의 언어를 바꾸는 쉬운 방법?

Next.JS 홈페이지의 언어를 바꾸는 쉬운 방법?

 

안녕하세요.

요즘 홈페이지는 한 가지 언어가 아닌 여러 나라의 언어를 제공하는 경우가 많습니다.

이러한 경우 사용자가 원하는 언어를 내비게이션이나 설정에서 바꿀 수 있는 경우가 많죠.

하지만 사용자 즉 유저가 현재 사용하는 혹은 자주 사용하는 언어를 기본값으로 제공한다면,

사용자는 번거롭게 자신에게 맞는 언어 바꾸는 번거로움이 덜게 될 것입니다.

이번 시간은 Next.JS에서 제공하는 훅을 사용하여 사용자가 현재 사용하는 브라우저의 언어에 따라

그에 상응하는 언어를 기본값으로 보여주는 방법을 알아보겠습니다.

 

 

1. useRouter 훅을 사용하자.
2. 마치며

 

 

1. useRouter 훅을 사용하자.

 

useRouter는 Next.JS에서 기본으로 제공하는 훅입니다.

대부분 다른 페이지로 이동하거나 url을 변경하는데만 사용하지 않았나 싶습니다.

useRouter를 사용하는 방법은 이렇습니다.

(push 혹은 replace의 함수들 경우 여기서 다루지는 않겠습니다.)

import { useRouter } from 'next/router';

const TestComponent = () => {
  const router = useRouter();

return <div>Test</div>
};

export default TestComponent;

 

이때 router는 몇가지 오브젝트를 가지게 되는데 그중 하나는 locale입니다.

코드 예시를 보겠습니다.

 

import { useRouter } from 'next/router';

const TestComponent = () => {
  const router = useRouter();
  const { locale } = router;

return <div>Test</div>
};

export default TestComponent;

 

이 locale이라는 오브젝트는 현재 사용자의 기본 브라우저 언어를 값으로 가지게 됩니다.

영어라면 'en' 독일어라면 'de'와 같이 말이죠.

그럼 이미 끝났습니다.

현재 사용자가 브라우저에서 사용하는 언어를 알았으니 그에 맞는 언어를 설정만 해주면 됩니다.

예시를 보겠습니다.

 

import { useRouter } from 'next/router';
import de from '../../locale/de.json';
import en from '../../locale/en.json';


const TestComponent = () => {
  const router = useRouter();
  const { locale } = router;
  
  const texts = locale === 'de' ? de : en;
	
  console.log(texts);

return <div>Test</div>
};

export default TestComponent;

 

위의 코드를 보시면 locale이 'de'라면? 즉 독일어라면 de.json을 그렇지 않다면 en.json을 사용하라고 지정하였습니다.

당연히 언어가 많아지면 그에따라 코드를 변경하고 리팩터링 해야겠지만 현재 대략 2가지의 언어를 제공한다면 이렇게 하는 것도 문제없을 것입니다. 

이렇게 locale을 사용한다면 독일어 사용자가 홈페이지를 방문하였을때 기본값으로 독일어로 된 홈페이지가 제공될 것이고 그렇지 않다면 영어로 된 홈페이지가 제공될 것입니다. 

사실 브라우저의 언어를 사용하는 방법은 기본 자바스크립트에도 존재합니다.

window.navigator.language를 이용하면 말이죠. 하지만 Next.JS를 사용하신다면 더군다나 타입스크립트를 사용하신다면, 번거롭게 window의 타입을 지정해주실 필요가 없고 또한 Next.JS에서 권장하는 사용방법이기에 사용하실 기회가 있다면 사용해보시길 바랍니다.

 

 

2. 마치며

 

SSR이 쉽게 가능해짐에따라 현재 다니는 회사에서도 모든 리액트 프로젝트를 Next.JS로 변경하려고 하고 있습니다.

SSR는 단순하게 로딩 속도가 빠르다 혹은 클라이언트가 다운로드할 자바스크립트 파일이 작다에 그치지 않습니다.

이는 유저의 편의를 높이고 트래킹에 큰 장점이 있습니다. Next.JS에 흥미가 있으시다면 한번 배워보시는 것도 정말 좋을 것 같습니다.

 

오늘도 블로그를 방문해주셔서 감사합니다.

무슨 일이든 처음이 가장 힘든 법입니다. 하지만 처음 그 힘든 순간만 이겨내면, 그다음부터는 수월할 것입니다.

하시는 모든 일이 잘 되길 바라겠습니다.

 

 

완벽한 준비란 없다, 완벽한 준비란 영원히 시작하지 않는 것과 같다.

Es gibt keine perfekte Vorbereitung.

Perfekte Vorbereitung ist das Gleiche, wie nie anzufangen.