Блог

Главная - Вопросы по программированию - Как настроить getStaticPaths для динамических страниц с несколькими языками в Next.js

Как настроить getStaticPaths для динамических страниц с несколькими языками в Next.js

#reactjs #next.js #locale #multilingual #getstaticpaths

Вопрос:

Сегодня в моем сайд-проекте у меня возникла проблема, связанная с настройкой getStaticPaths динамических страниц с несколькими языками в Next.js. Я исследовал и выяснил, что есть так много людей, застрявших в этих проблемах.

Я создал динамическую страницу [slug].js для обработки всех динамических данных, которые я получил из базы данных. И мой веб-сайт, над которым я работал, также является многоязычным веб-сайтом, который использует next-translate для handle i18n.

В [slug].js мы должны настроить функцию getStaticPaths для обработки всех статических URL-адресов. Было бы проще, если бы на веб-сайте был 1 язык, но с более чем 2 языками мы должны зациклить его.

Ответ №1:

Вот код, который я использовал для его обработки, я работал с API понятия и использовал его в качестве базы данных для многоязычного веб-сайта:

 export async function getStaticPaths({ locales }) {
  const notion = new Client({ auth: process.env.NOTION_API_OFFICIAL_KEYS });

  const databaseId = process.env.NOTION_PAGE_ID_EMBVN_DATABASE_PAGE;
  const response = await notion.databases.query({
    database_id: databaseId,
  });

  let paths = [];

  response.results.forEach((block) => {
    for (const locale of locales) {
      paths.push({
        params: {
          slug: block.properties.embcode.title[0].plain_text.toString(),
        },
        locale,
      });
    }
  });

  return {
    paths,
    fallback: false,
  };
}

С помощью forEach мы добавим каждый путь каждой локали в массив путей, чтобы вернуть его в конечном результате getStaticPaths.

Комментарии:

1. При возврате в пути объектов, содержащих оба params , и locale я обнаружил, что нет никакой разницы, если вы включаете языковой стандарт, чем если вы этого не делаете. Не могли бы вы объяснить, почему вы добавили локаль в пути?

2. @MikeMajara При использовании веб-сайта на 2 или более языках с Next.js и используя динамический URL-адрес, если мы не создадим цикл для локали, чтобы getStaticPaths мог генерировать оба типа URL-адресов для локали, ошибка 404 возникнет, когда пользователь перейдет непосредственно к URL-адресу 2-й локали. Мы все еще можем загружать страницы с языка по умолчанию, переключать их туда и обратно без перезагрузки через nextLink. Однако, если пользователь переходит непосредственно на страницу или перезагружает ее во 2-м языковом стандарте, произойдет ошибка 404, поскольку Next.js не создал статический путь.

3. Удивительно, спасибо за понимание! И последний вопрос, если позволите: где я мог бы найти это в документации, или это знание, которое можно/должно быть выведено откуда-то еще? Я не мог найти его поблизости… и упоминания locale или каких-либо других дополнительных ключей там нет.

4. @MikeMajara Я всего лишь младший разработчик в Next.js сейчас же. Я столкнулся с этой проблемой давным-давно и везде нахожу в Интернете даже документ о Next.js но не смог найти никакого решения. К счастью, один из моих друзей-разработчик полного стека в Javascript, и он объяснил мне это и помог мне исправить это. Я думаю, что в будущем мне следует снова поделиться этим с кем-нибудь другим.

Метки: