Filter posts with tags in ssg

[MejanH]

I created my SSG by following the docs with typescript. and I added tags in the blog posts(ex: tags: ["tech", "music"]). I want simply to implement a category page in my blog. How can I fetch posts by category or single tag?

what i want is: localhost:port/tags/tech

file tree: /pages/tags/[tag].tsx

getStaticPaths:

export const getStaticPaths: GetStaticPaths = async () => {
  const postsData = await getSortedPostsData()
  const paths = postsData.map(({ tags }) => ({
    params: {
      tags: tags as string[],
    },
  }));

  console.log(paths);

  return { paths, fallback: false };
};

getStaticProps:

export const getStaticProps: GetStaticProps = async ({ params }) => {
  const data = await getSortedPostsData();

  const allPostsData = data.filter((t) =>
    t.tags.includes(params.tags as string)
  );

  return {
    props: {
      allPostsData,
    },
  };
};

getSortedPostData:

export function getSortedPostsData() {
  const filenames = fs.readdirSync(postsDirectory);

  const allPostsData = filenames.map((filename) => {
    const id = filename.replace(/\.md$/, "");

    const fullPath = path.join(postsDirectory, filename);
    const fullContents = fs.readFileSync(fullPath, "utf8");

    const matterResult = matter(fullContents);

    return {
      id,
      ...(matterResult.data as {
        date: string;
        title: string;
        cover: string;
        tags: string[];
      }),
    };
  });

[leerob]

In getStaticPaths, params.tags shouldn't be an array. Try this.

// pages/tags/[tag].tsx
export const getStaticPaths = async () => {
  const tags = await getAllTags()
  const paths = tags.map(({ tag }) => ({
    params: {
      tag
    },
  }));

  return { paths, fallback: false };
};

In getStaticProps, I don't think includes will work when you're comparing two arrays of tags. Instead, you probably want something like array2.filter(e => !array1.includes(e)).

[MejanH]

I can't return string instead of array in params. it still returning an array. its saying (tags) not provided as a string.

// /tags/[tags].tsx
export const getStaticPaths: GetStaticPaths = async () => {
  const postsData = await getSortedPostsData();

  const tags = await postsData.map(({ tags }) => {
    return tags;
  });

  console.log(tags);

  const paths = tags.map((t) => ({
    params: {
      tags: t,
    },
  }));
  console.log(paths);
  return { paths, fallback: false };
};

[leerob]

You have an array of arrays. You only need to create three pages here, one for each tag. So the array you pass to create the paths should only be ['tech', 'music', 'business'].

[MejanH]

Please forgive me, I am new to Next JS. What do you mean by I have to create three pages? should I change my file tree like /pages/[tags]/[tag].tsx or something else?

[leerob]

When getStaticPaths runs, it will create three different pages.

1. /pages/tags/tech
2. /pages/tags/music
3. /pages/tags/business

For example...

// pages/tags/[tag].tsx 
export const getStaticPaths = () => {
  const tags = ['tech', 'music', 'business'];

  const paths = tags.map((tag) => ({
    params: {
      tag
    },
  }));

  return { paths, fallback: false };
};

Note that the dynamic value is tag, not tags, based on the filename and [tag]. Here's a video with an example.

[MejanH]

Thanks, it worked.

My problem was, I thought i could filter posts by an array. after I convert my multiple arrays of tags into a single array it worked.

So, filtering with multiple strings from multiple arrays is not possible with getStaticPaths?

my tags are like this:

[
['tech', music'],
['music', 'song'],
['business']
]