Multiple Params With Single Slug Page

Question

We have a fun problem. Trying to figure out how to get two params because we have different API endpoints using different data. interface StaticProps {
  id: number;
  slug: string;
}

export async function getStaticProps(context) {
  const params: StaticProps = context.params;
  const post = await axios({
    method: 'get',
    url: '',
    data: {
      slug: params.slug
    }
  });
  const postMeta = await axios({
    method: 'get',
    url: '',
    data: {
      id: params.id
    }
  });

return {
    props: {
      post: post.data.data,
      seo: postMeta.data.data
    }
  };
}

export async function getStaticPaths() {
// awesome axios here
  const paths = postList.data.data.map((item: Post) => ({
    params: { slug: item.slug, id: item.id }
  }));

return { paths, fallback: false };
}

Asian paper wasp · Answer

Right now, we are using a slug page ([slug].tsx), and not an ID page. From what I can tell, the ID only works on the ID page. I could retool the path return value for just an ID, but I need the slug for the page URL. I can't retool the API endpoint that is currently using the ID because it uses an eternal API based on the ID. Which doesn't contain the slug value.

Multiple Params With Single Slug Page

2 Replies