Home ≫ Blog ≫ Next-js-다국어페이지-lang-설정하는-방법

[Next Js] 다국어 페이지 lang 설정방법

JuneTein

September 21, 2023

Next Js 이용해서 다국어 웹사이트를 만들려고 시도하는 와중에 Html lang attribute 설정을 하는 방법에 대한 글입니다.

보통은 _document.js 파일에서 Html 태그에 lang="" 이렇게 추가를 하실텐데요. 여기서 lang attribute를 설정하면 모든 페이지에 언어설정이 추가되어 버립니다.

Next js에서 기본으로 제공하는 언어설정

i18n이라는 라이브러리가 Next js에 기본적으로 설정이 되어있습니다. 이것을 활용하면 됩니다.

저는 하위 도메인을 설정하지 않고, 페이지별로 lang을 설정하고 싶었기 때문에 어렵지 않게 구현할 수 있었습니다.

먼저 next.config.js파일에서

/** @type {import('next').NextConfig} */
const nextConfig = {
  reactStrictMode: true,
  i18n: {
    locales: ['en-US', 'ko', 'es'],
    defaultLocale: 'en-US',
  },
}

module.exports = nextConfig

이렇게 바꿔줍니다. 저는 디폴트가 영어인 페이지라서 영어가 기본이고 두번째가 한국어 그리고 스페인어가 세번째 입니다.

페이지 설정

먼저 _document.js에서 lang attribute를 지워버립니다.

이제 페이지를 구성할 때 순서가 중요합니다.

페이지 트리를 구성할 때 page/(언어)/index.js 이런식으로 트리를 구성해야 언어설정이 제대로 적용됩니다.

  
page - folder - index.js ---> 영어페이지(default)   
     - ko - folder - index.js ---> 한국어페이지
     - es - folder - index.js ---> 스페인어페이지

이렇게 구성을 하면 각각의 url에 따라서 언어설정이 알맞게 적용이 됩니다.

파일트리에서 page 다음은 무조건 language attribute입니다. 이게 바뀌면 언어설정이 바뀌지 않습니다.

이제 각각의 페이지로 접속을 해보면 언어설정이 바뀐것을 보실 수 있습니다.


localhost:3000/     접속 시     <html lang=en-US>
localhost:3000/ko   접속 시     <html lang=ko>
localhost:3000/es   접속 시     <html lang=es>

문제점

i18n라이브러리를 선택했을 때의 문제점은 모든 텍스트의 번역본을 json형식으로 바꿔서 따로 저장을 해줘야 한다는 것입니다.

코드블럭이 엄청 지저분해지고, 페이지의 모습이 조금만 달라져도 까다롭게 페이지를 수정해야하는 문제점이 있습니다.

그냥 페이지별로 lang만 바꾸는 방법

페이지트리는 위와 똑같이 설정을 하고, 한글 페이지를 따로 똑같이 만든다는 가정 하에 그저 lang attribute만 바꿔주도록 _document.js파일을 수정해봤습니다.

import Document, { Html, Head, Main, NextScript } from 'next/document';

class MyDocument extends Document {
  render() {
    const lang = this.props.__NEXT_DATA__.page.split('/')[1] === 'ko' ? 'ko' : 'en';

    return (
      <Html lang={lang}>
        <Head />
        <body>
          <Main />
          <NextScript />
        </body>
      </Html>
    );
  }
}

export default MyDocument;

참고

useEffect를 써서 바꾸는 방법은 SEO상 전혀 도움이 안됩니다. lang 속성을 바꾸는 이유가 서치엔진에 노출을 위한 것인데, useEffect를 써서 바꾸는 것은 로봇이 페이지를 크롤링 할 때의 lang 속성은 변하기 전의 속성이기에 무의미하기 때문이죠.

이번 글에서는 Nest js에서 lang 속성을 바꾸는 방법에 대해서 알아보았습니다. 도움이 되시길 바랍니다.

참고

[Next Js] sitemap 만들고 업로드 하는 방법

[Next Js] Error with permissions-Policy header

[Next Js]a title element error

카카오톡 공유하기 →