Далее JS: Как мне получить данные страницы exportPathMap? Я не вижу этого в getStaticProps - PullRequest
Новая
       8

Далее JS: Как мне получить данные страницы exportPathMap? Я не вижу этого в getStaticProps

0 голосов
/ 26 апреля 2020

Я настроил exportPathMap, но при экспорте getStaticProps из моего компонента я получаю пустой объект. Я не понимаю, как я должен получить к нему доступ? 

// next.config.js
exportPathMap: async function (
    defaultMapPath,
    { dev, dir, outDir, distDir, buildId }
  ) {
    const paths = {}
    const response = await fetch(...)
    const data = await response.json()
    data.forEach((item) => {
      paths[`/item/${item.id}`] = {
        page: '/itemPage',
        query: {
          item,
        },
      }
    })

    return paths
  },

И 

// itemPage.js
...
export async function getStaticProps(props) {
  console.log('props', props) // returns "props {}""

  return {
    props: props
  }
}
...

1 Ответ

0 голосов
/ 26 апреля 2020

Сложно найти это прямо сейчас в документации, но вот ваши варианты.

ОПЦИЯ 1

Используйте getStaticPaths и getStaticProps примерно так (из "with-stati c -export" в следующих JS примерах) 

// [id].js post file

export async function getStaticPaths() {
  const response = await fetch(
    'https://jsonplaceholder.typicode.com/posts?_page=1'
  )
  const postList = await response.json()
  return {
    paths: postList.map(post => {
      return {
        params: {
          id: `${post.id}`,
        },
      }
    }),
    fallback: false,
  }
}

export async function getStaticProps({ params }) {
  // fetch single post detail
  const response = await fetch(
    `https://jsonplaceholder.typicode.com/posts/${params.id}`
  )
  const post = await response.json()
  return {
    props: post,
  }
}

ВАРИАНТ 2

Использование exportPathMap И getInitialProps

// item.js
...
Page.getInitialProps = function (context) {
  return context.query.item
}

// next.config.js
module.exports = {
  // ...Same as in your question...
}

Оба позволят вам для оптимизации c. При использовании варианта 1 экспорт не требуется, достаточно next build. Для варианта 2 вам нужно будет выполнить next export

From: https://nextjs.org/docs/advanced-features/static-html-export

Если на ваших страницах нет getInitialProps, вам может не потребоваться следующий вывоз вообще; Следующая сборка уже достаточна благодаря Automati c Stati c Оптимизация.

Еще одно примечание: вы можете использовать оба метода в одном проекте.

...