Dynami c сегмент маршрута в следующей JS stati c js build

Question

можно ли использовать динамический c путь маршрутизации со следующим JS в контексте сборки stati c?

Предполагая, что моя сборка представляет собой набор html, js, css ресурсы, которые могут быть размещены на любом веб-сервере (Apache, Nginx, S3, Netlify и т.д. c ...).

Например, у меня есть путь, определенный /pages/[article].js/read и я хотел бы иметь возможность использовать структуру: /page/articleA/read, где articleA - динамическая c переменная.

Если это возможно, как этого добиться?

Answer 1

Да, можно использовать динамические c маршруты при использовании stati c -site-generation со следующим js. Вы должны использовать метод выборки данных getStaticProps для извлечения необходимых данных на основе параметра маршрута c Dynami. Кроме того, вы должны использовать другую функцию getStaticPaths для создания списка paths, для которого следующий js будет строить stati c страницы во время сборки. Например,

Предположим, для страницы /pages/articles/[articleId].js. Вот как может выглядеть псевдокод для вас.

// you have to generate and return a list of paths 
export const getStaticPaths = async () => {
    const articles = await /*Fetch the articles from backend or make a db query*/
    const paths = articles.map(article => ({ params: { articleId: article.id }}));

    return {
       paths,
       fallback: false
    }
}


export const getStaticProps = async (ctx) => {
   const articleId = ctx.params.articleId;


   // fetch the data using the article id and return as props

  return {
     props: /* fetched data */

  }
}

// create the page component and export it as the default export

Подробнее об этом можно прочитать в docs . Имейте в виду, потому что для fallback установлено значение false next js, будет отображаться страница 404 для любого пути, который не возвращается из функции getStaticPaths, вы можете прочитать о fallback здесь .