Next.js에서 HTML lang 속성을 설정하는 방법

12239 단어 javascripthtmlnextjsreact
lang attribute에서 HTML element을 변경하면 콘텐츠가 작성된 언어를 검색 엔진에 알리는 데 유용할 수 있습니다.

HTML lang 속성은 문서의 언어를 나타내는 데 사용됩니다. 이는 브라우저에서 사용자의 언어에 더 적합한 방식으로 콘텐츠를 표시하는 데 사용할 수 있습니다.

또한 일부 검색 엔진에서 사용자의 언어 기본 설정에 따라 결과를 색인화하고 순위를 매기는 데 사용할 수 있습니다.

HTML 태그는 문서의 문자 인코딩을 선언하는 데에도 사용됩니다. 이것은 다른 언어로 볼 때 텍스트가 올바르게 표시되도록 하는 데 중요합니다.

lang 속성은 지정하는 것이 매우 중요하므로 검색 색인 순위를 위험에 빠뜨리지 않습니다.

NextJS에서 lang 속성을 변경하는 방법



일반 HTML 파일에서 lang 속성을 변경하는 것은 매우 간단합니다.

<html lang="en">
  <!-- Your content here -->
</html>


Next.Js은 React framework이므로 편집할 HTML 파일이 없기 때문에 동일한 방식으로 작동하지 않습니다. npx create-next-app 명령으로 다음 응용 프로그램을 처음 생성할 때 자동으로 lang 속성을 영어로 설정하지 않습니다. .



lang 속성이 next.js에 의해 웹 페이지 또는 페이지로 설정되지 않았습니다.

Next.js를 사용하면 애플리케이션이 여러 언어를 지원하도록 쉽게 만들 수 있으며 next.config.js 파일에서 lang 속성을 변경할 수 있습니다.

다음 구성 파일 내에서 i18n ( i18next ) 속성만 변경하면 됩니다.

/** @type {import('next').NextConfig} */
const nextConfig = {
  ...
  i18n: {
    locales: ["en"],
    defaultLocale: "en",
  },
}

module.exports = nextConfig


값을 갖는 데 필요한 Next.js 구성 파일 내부에 두 개의 속성이 있습니다.

로케일



애플리케이션에서 지원하는 로케일 목록, 애플리케이션이 영어만 지원하는 경우 영어만 추가하면 됩니다ISO language code. 또는 응용 프로그램이 영어 및 스페인어와 같은 여러 언어를 지원하는 경우 두 언어를 모두 목록에 추가해야 합니다. 예를 들면 다음과 같습니다.

const nextConfig = {
  ...
  i18n: {
    locales: ["en", "esp"],
    defaultLocale: "en",
  },
}


lang 속성이 Next.js에 의해 추가되지 않았습니다.



언어 속성이 추가되었습니다. next.js

기본 로케일



Next.js 구성 파일의 defaultLocale 속성은 애플리케이션이 지원하는 기본 ISO 언어 코드인 문자열만 허용합니다. 애플리케이션의 기본 언어가 프랑스어인 경우 기본 로케일 값은 다음과 같아야 합니다.

const nextConfig = {
  ...
  i18n: {
    locales: ["en", "fr"],
    defaultLocale: "fr", // default lang fr
  },
}


원하는 언어 코드를 모를 경우 사용할 수 있는 here is a list of all the language codes.

여러 언어에 대한 여러 도메인



웹 사이트에 다른 언어에 대한 여러 도메인 이름이 있는 경우 Next.js가 제공하는 다른 속성인 domains 속성을 사용할 수 있습니다.

"도메인" 속성



domains 속성은 특정 언어에 대한 도메인 목록입니다.

예를 들어 이름이 "example.com"인 도메인이 있고 영어를 사용하고 "example.fr"이라는 프랑스어용 다른 도메인도 있는 경우 domains를 설정하면 됩니다. 매우 유용합니다.

예시

/** @type {import('next').NextConfig} */
const nextConfig = {
  i18n: {
    locales: ["en", "fr"],
    defaultLocale: "en",
    domains: [
      {
        /**
         *  the domain example.com will
         *  have english language
         */
        domain: "example.com",
        defaultLocale: "en-US",
      },
      {
        /**
         * the domain example.fr will
         * have french language
         */
        domain: "example.fr",
        defaultLocale: "fr",
      },
      {
        domain: "example.nl",
        defaultLocale: "nl-NL",
        /**
         * Other locales in the list
         * will be redirected to this domain
         */
        locales: ["nl-BE"],
      },
    ],
  },
}

module.exports = nextConfig


위의 예에서 "example.com"인 기본 도메인에는 "en"으로 설정된 lang 속성이 있으며 이는 영어를 사용함을 의미합니다.

"example.fr"(s) HTML lang 속성은 "fr"(프랑스어)로 설정됩니다.

"example.nl"(s) HTML lang 속성은 "nl"(네덜란드어)로 설정되며 로케일 목록의 모든 로케일은 이 도메인으로 리디렉션됩니다. 이 경우 "nl-BE"로케일이 리디렉션됩니다. "example.nl"도메인에.

다른 로케일 간 전환



Next.js router 을 사용하여 Next.js에서 다른 로케일 간에 전환할 수 있습니다.

사용자를 홈 페이지/로 리디렉션하고 싶지만 다른 로케일을 사용한다고 가정해 보겠습니다. 방법은 다음과 같습니다.

const changeLocale = () => {
  router.push(
    "/todo",
    {},
    { locale: locale ? (locale === "en" ? "fr" : "en") : "en" }
  )
}


Next.js 링크 사용



Next.js Link component을 사용하여 동일한 결과를 얻을 수 있습니다.

<Link
  href="/todo"
  locale={router.locale ? (router.locale === "en" ? "fr" : "en") : "en"}
>
  <button>Change locale</button>
</Link>


결론



블로그 게시물에서는 Next.js를 설정하고 여러 언어를 추가하는 방법을 보여주었습니다. 응용 프로그램이 둘 이상의 언어를 지원하도록 만드는 데 사용할 수 있는 쉬운 프로세스입니다. 애플리케이션에 여러 언어를 포함하는 쉬운 방법을 찾고 있다면 Next.js가 훌륭한 옵션입니다.

그게 다야, 이 블로그 게시물이 가치가 있다고 생각되면 다른 멋진 개발자와 공유하십시오.
Aprenda a explorar o potential escondido do console em JS
webrtc를 이용한 영상통화 앱

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage