Astro Build를 사용하여 국제화(i)를 위한 동적 경로 만들기

이 기사를 영어로 읽고 싶다면 여기

저는 최근 대시보드 스타일의 프로젝트를 만들기 위해 Astro를 배우기 시작했습니다.

이 프로젝트에서는 국제화(i18n)를 구현하고 싶습니다. 언어에 관계없이 누구나 사용할 수 있도록 하는 것이 목표입니다.

문제

Astro의 i18n 지원은 매우 좋습니다. 파일/폴더 구조를 기반으로 라우팅하는 Next.js 또는 기타 프레임워크와 유사하게 작동합니다.

따라서 영어 페이지와 포르투갈어 페이지를 갖고 싶다면 다음과 같이 파일을 구성할 수 있습니다.

.
└── src/
    └── pages/
        ├── en/
        │   ├── login.astro
        │   └── dashboard.astro
        └── pt-br/
            ├── login.astro
            └── dashboard.astro

그리고 각 페이지에는 고유한 i18n 문자열이 있습니다. 멋지네요!

하지만 여기서 문제가 시작됩니다. 모든 페이지를 복제하고 싶지는 않습니다. 해당 페이지의 문자열을 변경하고 싶습니다.

/[any-언어-플래그]/all-my-routes와 같은 것이 필요합니다.

"react-intl과 같은 것을 사용하면 어떨까요?"라고 물을 수도 있습니다. 내 대답은 특히 SSG/SSR의 경우 Astro 엔진을 최대한 활용하고 클라이언트 측 구성 요소를 피하고 싶다는 것입니다. 일반적으로 이러한 프레임워크는 클라이언트 측에서만 렌더링되는 React Context를 사용합니다.

시도와 실패

우선 이 문제를 해결하기 위해 Astro의 i18n 레시피를 읽고 몇몇 커뮤니티 라이브러리를 찾아봤습니다.

제가 처음 시도한 라이브러리는 astro-i18next였는데, 딱 제가 필요했던 라이브러리 같았어요!

구성 파일의 배열을 기반으로 astro-i18next는 빌드 시 i18n 페이지를 생성하므로 한 번만 코딩하면 되며 페이지 복제에 대해 걱정할 필요가 없습니다.

문제는 astro-i18next가 보관되어 있거나 더 이상 유지되지 않는 것처럼 보인다는 것입니다. 문제가 많고 마지막 커밋이 1년이 넘었습니다.

해결책

다른 라이브러리(astro-i18n에 대한 명예로운 언급)를 시도한 후 Paraglide를 찾았고 이것이 내 프로젝트의 판도를 바꾸었습니다.

패러글라이드를 선택한 이유는 다음과 같습니다.

• 타입이 안전하므로 TypeScript와 함께 사용할 수 있고 자동 완성 기능도 활용할 수 있습니다.
• i18n 문자열을 함수로 변환하므로 문자열 키가 변경되면 빌드가 실패하고 오류가 조기에 포착됩니다.
• i18n 기능을 사용하면 더 나은 트리 쉐이킹이 가능하고 사용하지 않는 기능을 제거할 수 있습니다.
• 개발 경험을 향상시키는 VS Code 확장이 있습니다.

참고: JS 프로젝트에서도 Paraglide를 사용할 수 있으며 Next.js도 지원합니다.

설치 및 구성 후 다음과 같은 메시지를 사용했습니다.

---
import * as m from "../paraglide/messages.js";
---

<h1>{m.hello({ name: "Alan" })}</h1>

그러나 라우팅 문제는 해결되지 않았습니다. 여전히 추가하고 싶은 각 언어에 대해 페이지를 복제하고 있었습니다.

이 문제를 해결하기 위해 루트 경로에서 동적 경로를 사용하도록 프로젝트를 변경했으므로 이제 모든 경로가 언어 플래그로 시작됩니다.

내 폴더 구조는 다음과 같습니다.

.
└── src/
    └── pages/
        └── [lang]/
            ├── login.astro
            └── dashboard.astro

이 변경 후 Paraglide는 경로 매개변수의 언어를 자동으로 가져올 수 있습니다.

• http://localhost:4321/en/login
• http://localhost:4321/pt-br/login

이제 astro.config.ts에서 구성하고 문자열 파일을 번역하기만 하면 새 언어를 추가할 수 있습니다.

하지만 아직 해결해야 할 두 가지 문제가 있습니다.

1. 사용자가 언어 플래그 없이 처음으로 http://localhost:4321/에 액세스하는 경우
2. 사용자가 특정 경로에서 언어를 변경하는 경우 동일한 경로를 유지해야 합니다(예: /en/create-account는 /pt-br/create-account 또는 /pt-br/criar-account로 리디렉션되어야 함) ).

언어 리디렉션을 위한 미들웨어

첫 번째 언어 리디렉션 문제를 해결하기 위해 Astro 미들웨어를 사용했습니다.

src/middleware/index.ts에 다음 코드를 추가했습니다.

import { defineMiddleware } from 'astro:middleware';
import {
  languageTag,
  setLanguageTag,
  type AvailableLanguageTag,
} from '../paraglide/runtime';

export const onRequest = defineMiddleware((context, next) => {
  // Obter o idioma do parâmetro da URL
  const lang = context.params.lang;

  // Se mudou
  if (lang !== languageTag()) {
    setLanguageTag(lang as AvailableLanguageTag);
    // Redirecionar para o idioma alterado ou padrão (en)
    return context.redirect(`/${lang ?? 'en'}`);
  }

  return next();
});

현재 경로가 포함된 언어 선택기

언어를 변경할 때 사용자가 동일한 경로를 유지하기 위해 다음 구성 요소를 추가했습니다.

---
import { languageTag } from '../paraglide/runtime';

const pathName = Astro.url.pathname.replace(`/${languageTag()}/`, '');
---

<ul>
  <li>
    <a href={`/pt-br/${pathName}`}>Ir para Português</a>
  </li>
  <li>
    <a href={`/en/${pathName}`}>Go to English</a>
  </li>
</ul>

또한 Paraglide 메시지 기능의 두 번째 매개변수를 사용하여 이러한 메시지도 번역할 수 있습니다.

<ul>
  <li>
    <a href={`/pt-br/${pathName}`}>{m.goToLanguage(undefined, { languageTag: 'pt-br' })}</a>
  </li>
  <li>
    <a href={`/en/${pathName}`}>{m.goToLanguage(undefined, { languageTag: 'en' })}</a>
  </li>
</ul>

고려사항

저는 제 솔루션이 최고라고 생각하지 않습니다. 특히 아직 Astro를 배우는 중이기 때문에 다른 솔루션이 있을 수도 있습니다. 혹시 아시는 분 계시면 댓글 달아주시면 시도해보겠습니다 :)

이 글을 읽어주셔서 감사합니다! 궁금한 사항은 댓글 달아주시면 답변해드리겠습니다.

위 내용은 Astro Build를 사용하여 국제화(i)를 위한 동적 경로 만들기의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!