NextJS catch all route structure

71 Views Asked by At

I have a Next.js website which gets news from Wordpress with WPGraphQl. User can filter posts with categories and goals. I'm trying to set a catch all route which will replace the current structure which I have here: current catch route

Here are my current getStaticProps and getStaticPaths functions inside category catch all route:

export const getStaticProps = async (ctx) => {
  const { params } = ctx;
  const { slug } = params;

  const newsPage = await fetchApi(newsQuery.call(this, { category: slug }));

  return {
    props: {
      initialGoal: newsPage?.cilj,
      initialGoals: newsPage?.ciljevi.nodes,
      initialPosts: newsPage?.posts?.nodes,
      initialCategory: newsPage?.category,
      initialCategories: newsPage?.categories?.nodes,
      initialEndCursor: newsPage.posts.pageInfo.endCursor,
      initialLoadMore: newsPage.posts.pageInfo.hasNextPage,
    },
  };
};

export const getStaticPaths = async () => {
  const allCategories = await fetchApi(allCategoriesQuery);

  const categoryArray = allCategories.categories.nodes.map((category) => `/news/categories/${category.slug}`);

  return {
    paths: categoryArray || [],
    fallback: true,
  };
};

This structure is working but I would like to get rid of the two folders and just have one catch all route like this: single catch all

How do I achieve this and how do getStaticProps and getStaticPaths functions look like for this case?

0

There are 0 best solutions below