로케일을 사용하여 사이트를 다국어로 만드는 방법

사용자가 사이트에 더 쉽게 액세스할 수 있도록 하는 한 가지는 사이트를 확장명 없이 사용자가 선호하는 언어로 번역하는 것입니다.

이 자습서에서는 Next.js 앱과 locale 패키지를 사용하여 사이트에 여러 언어를 추가하는 간단한 방법을 보여줍니다.

앱 만들기

이를 위해 터미널을 열고 다음을 입력합니다.

npx create-next-app multi-language-tutorial

이렇게 하면 Next.js 앱이 생성되고 이제 선호하는 IDE로 열 수 있으며 프로젝트는 다음과 같이 표시됩니다.

의존성 설치

이 프로젝트에는 다음 명령을 실행하여 설치할 수 있는 1개의 종속성인 로케일만 필요합니다.

npm install --save locale

필요한 파일 생성

이제 프로젝트가 있으므로 utils라는 폴더를 만들고(간단히 말해서 util은 우리가 많이 사용하는 함수이며 코드를 반복할 필요가 없도록 하나의 파일로 만듭니다.) locales라는 폴더에 이 폴더에는 언어 파일이 포함됩니다.

utils 폴더 안에는 페이지에서 사용할 util이기 때문에 pages.js라는 파일을 생성합니다.

그리고 로케일 폴더 내에서 언어 코드의 이름을 사용하여 로케일 파일을 생성합니다. 예를 들어 내 앱을 영어와 스페인어로 번역하려는 경우 해당 코드는 각각 en과 es이므로 파일 이름은 수: en.js 및 es.js
지금까지 우리 프로젝트는 다음과 같습니다.


언어 코드 목록을 보려면 this website을 방문하세요.

로케일 파일 만들기

이를 위해 en.js 또는 es.js를 열고 다음 구조를 따르기만 하면 됩니다.

module.exports = {
    pageName: {
        property: "Translated text",
    },
};

예를 들어 en.js의 경우 다음을 입력합니다.

module.exports = {
    index: {
        welcome: "Welcome to my site",
    },
};

그리고 es.js의 경우 다음을 입력합니다.

module.exports = {
    index: {
        welcome: "Bienvenido a mi sitio",
    },
};

모든 로캘 파일의 속성이 동일해야 하며 그렇지 않으면 오류가 발생할 수 있습니다.

함수 코딩

이 함수가 하는 일은 사용자로부터 허용 언어 헤더와 지원되는 언어 파일을 가져옴으로써 요청된 페이지에 대한 언어 파일을 얻을 수 있다는 것입니다.

이제 파일이 있으므로 pages.js 파일을 열고 다음 단계를 따릅니다.

먼저 로케일을 파일로 가져옵니다.

const locale = require("locale")

로케일을 사용하여 로케일 목록을 만들고 배열을 매개변수로 전달할 것입니다. 이 배열 안에는 앱을 번역할 언어의 언어 코드가 있어야 합니다. 우리는 영어와 스페인어를 사용했습니다. 배열에 en과 es를 추가합니다.

const supportedLanguages = new locale.Locales(["en", "es"]);

그런 다음 로케일 파일을 util로 가져와야 합니다. 이를 위해 개체를 만들고 다음과 같이 추가합니다.

const languages = {
    en: require("../locales/en"),
    es: require("../locales/es"),
};

이렇게 하면 나중에 로케일 파일을 쉽게 가져올 수 있습니다.

이제 메인 함수를 코딩할 것입니다. 여기에는 2개의 매개변수, 사용자의 언어 헤더인 header와 언어 파일을 가져오려고 시도할 페이지의 이름인 page가 필요합니다.

function getLanguageFile(header, page) {
    // This creates a language list of the user's preferred languages
    const locales = new locale.Locales(header); 

    // This gets the best matching language, considering our supported languages, and the ones the user prefers
    // This will returns an object but we're only interested in the code propety of this object
    // So it will return a code like "en" or "es"
    const languageCode= locales.best(supportedLanguages).code;

    // Using the language code and the page parameter, we can navigate the locale files, and get the one we need
    const langFile = languages[languageCode][page];

    // And then return that locale file
    return langFile;
}

따라서 전체 pages.js 파일은 다음과 같습니다.

const locale = require("locale");

const supportedLanguages = new locale.Locales(["en", "es"]);
const languages = {
    en: require("../locales/en"),
    es: require("../locales/es"),
};

function getLanguageFile(header, page) {
    const locales = new locale.Locales(header);
    const langCode = locales.best(supportedLanguages).code;

    const langFile = languages[langCode][page];
    return langFile;
}

module.exports = { getLanguageFile };

페이지에서 기능 사용

이제 함수가 있으므로 페이지에서 사용할 수 있습니다. 이를 위해 pages/index.js로 이동하여 다음 코드를 작성합니다.

// Import our function to the page
import { getLanguageFile } from "../utils/pages"

// Generate the props for our page
export const getServerSideProps = (context) => {
    // Get the language header from our page context
    const languageHeader = context.req.headers["accept-language"]

    // Using that header, get our locale file
    // We pass "index" as argument because that's our page name, and that's what we added to our locale files
    const languageFile = getLanguageFile (languageHeader , "index")

    // Return the props to the page to render
    return {
        props: {
            lang: languageFile,
        },
    };
};

const Index = (props) => {
    return (
        <div>
            {/* Example of usage */}
            <h1>{props.lang.welcome}</h1>
        </div>
    );
};

export default Index;

다음 이미지에서 볼 수 있듯이 둘 다 관련이 있습니다.

더 많은 언어 추가

앱에 더 많은 언어를 추가하려면 locales 폴더에 언어 코드가 포함된 파일을 만들고 util의 지원되는 언어 배열에 추가하기만 하면 됩니다.


읽어 주셔서 감사합니다. 이 가이드가 도움이 되었기를 바랍니다. 의견에 질문을 할 수 있습니다.