Next.js prismic custom blog post tags

July 13th, 2020 - Justin Friebel
Next.js, prismic

This will show you how to setup blog post tags with Next.js and prismic. First you'll want to create a new custom type in prismic and in your code with the following. We keep the custom_types up to date in our repository so it's easy to keep track of their evolution.

custom_types/blog_post_tag.json

1{
2  "Main": {
3    "uid": {
4      "type": "UID",
5      "config": {
6        "label": "UID",
7        "placeholder": "blogposttag"
8      }
9    },
10    "title": {
11      "type": "StructuredText",
12      "config": {
13        "single": "heading1, heading2, heading3, heading4, heading5, heading6",
14        "label": "Title",
15        "placeholder": "Tag Title"
16      }
17    }
18  }
19}

Then you'll want to add the new tag type to your blog post type in both your code and in prismic.

custom_types/blog_post.json

1{
2  "SEO": {
3    "uid": {
4      "type": "UID",
5      "config": {
6        "label": "Unique ID",
7        "placeholder": "Type an SEO-friendly identifier..."
8      }
9    },
10    "meta_title": {
11      "type": "Text",
12      "config": {
13        "label": "Meta Title",
14        "placeholder": "Meta title..."
15      }
16    },
17    "meta_description": {
18      "type": "Text",
19      "config": {
20        "label": "Meta Description",
21        "placeholder": "Meta Description..."
22      }
23    },
24    "canonical": {
25      "type": "Link",
26      "config": {
27        "select": "document",
28        "customtypes": ["brewery", "country"],
29        "label": "Canonical URL",
30        "placeholder": "Select the category to use in the canonical URL"
31      }
32    }
33  },
34  "Blog Post": {
35    "title": {
36      "type": "StructuredText",
37      "config": {
38        "single": "heading1",
39        "label": "Title",
40        "placeholder": "Blog Post Title..."
41      }
42    },
43    "date": {
44      "type": "Date",
45      "config": {
46        "label": "Date"
47      }
48    },
49    "blog_post_tags": {
50      "type": "Group",
51      "config": {
52        "fields": {
53          "tag": {
54            "type": "Link",
55            "config": {
56              "select": "document",
57              "customtypes": ["blog_post_tag"],
58              "label": "Tag",
59              "placeholder": "Select a tag"
60            }
61          }
62        },
63        "label": "Blog Post Tags"
64      }
65    },
66    "author": {
67      "type": "Link",
68      "config": {
69        "select": "document",
70        "customtypes": ["author"],
71        "label": "Author",
72        "placeholder": "Select an author"
73      }
74    },
75    "body": {
76      "type": "Slices",
77      "fieldset": "Slice zone",
78      "config": {
79        "labels": {},
80        "choices": {
81          "text": {
82            "type": "Slice",
83            "fieldset": "Text",
84            "description": "A Rich Text section",
85            "icon": "text_fields",
86            "non-repeat": {
87              "rich_text": {
88                "type": "StructuredText",
89                "config": {
90                  "multi": "paragraph, preformatted, heading2, heading3, heading4, heading5, heading6, strong, em, hyperlink, embed, list-item, o-list-item",
91                  "allowTargetBlank": true,
92                  "label": "Rich Text",
93                  "labels": ["code"],
94                  "placeholder": "Enter your text..."
95                }
96              }
97            },
98            "repeat": {}
99          },
100          "code_snippet": {
101            "type": "Slice",
102            "fieldset": "Code Snippet",
103            "description": "A code snippet section for example code",
104            "icon": "code",
105            "non-repeat": {
106              "code_snippet": {
107                "type": "StructuredText",
108                "config": {
109                  "multi": "preformatted",
110                  "label": "Code Snippet",
111                  "placeholder": "Enter code snippet..."
112                }
113              }
114            },
115            "repeat": {}
116          },
117          "image": {
118            "type": "Slice",
119            "fieldset": "Image",
120            "description": "An image section",
121            "icon": "image",
122            "non-repeat": {
123              "image": {
124                "type": "Image",
125                "config": {
126                  "constraint": {},
127                  "thumbnails": [],
128                  "label": "Image"
129                }
130              }
131            },
132            "repeat": {}
133          }
134        }
135      }
136    }
137  }
138}

You can now add a shared component to handle the listing of tags wherever we'll need to list them.

components/Tags.tsx

1import { RichText } from "prismic-reactjs";
2import Link from "next/link";
3import { tagHrefResolver, tagLinkResolver } from "prismic-configuration";
4
5export interface TagsProps {
6  blogPostTags: [];
7}
8
9const Tags = ({ blogPostTags }: TagsProps) => {
10  return (
11    <div>
12      {blogPostTags.map(({ tag }: any, index: number) => {
13        if (!tag?.data) return;
14
15        const { title } = tag?.data;
16
17        return (
18          <span key={tag.uid}>
19            {index ? ", " : ""}
20            <Link
21              href={tagHrefResolver()}
22              as={tagLinkResolver(tag.uid)}
23              passHref
24            >
25              <a className="blogPostTag">{RichText.asText(title)}</a>
26            </Link>
27          </span>
28        );
29      })}
30    </div>
31  );
32};
33
34export { Tags };

Next you'll need to add some tag link resolvers.

prismic-configuration.js

1// -- Link resolution rules
2// Manages links to internal Prismic documents
3// Modify as your project grows to handle any new routes you've made
4export const linkResolver = (doc) => {
5  if (doc.type === "blog_post") {
6    return `/blog/${doc.uid}`;
7  }
8  return "/";
9};
10
11// Additional helper function for Next/Link components
12export const hrefResolver = (doc) => {
13  if (doc.type === "blog_post") {
14    return `/blog/[uid]`;
15  }
16  return "/";
17};
18
19export const tagLinkResolver = (tag) => {
20  return `/blog/tag/${tag}`;
21};
22
23export const tagHrefResolver = () => {
24  return `/blog/tag/[uid]`;
25};

In the blog listing page you'll add the code needed to get the tags with the posts in getStaticProps. We also use the tags component we created earlier to list the tags for each post.

pages/blog/index.tsx

1import React from "react";
2import Prismic from "prismic-javascript";
3import { RichText } from "prismic-reactjs";
4import { GetStaticProps } from "next";
5import Link from "next/link";
6import { linkResolver, hrefResolver } from "prismic-configuration";
7import { Layout } from "components/Layout";
8import { PageHeading } from "components/PageHeading";
9import { Head } from "components/Head";
10import { PrettyDate } from "components/PrettyDate";
11import { Author } from "components/Author";
12import { colors } from "colors";
13import { Tags } from "components/Tags";
14
15const BlogHome = ({ home, posts }) => {
16  const { headline, meta_title, meta_description } = home.data;
17
18  return (
19    <Layout>
20      <Head title={meta_title} description={meta_description} />
21      <PageHeading heading={RichText.asText(headline)} />
22
23      <ul>
24        {posts.results.map((post: any) => {
25          const { blog_post_tags, date, author } = post.data;
26
27          return (
28            <li key={post.uid} className="blogPost">
29              <Link href={linkResolver(post)} passHref>
30                <a>
31                  <h2 className="subtitle">
32                    {RichText.asText(post.data.title)}
33                  </h2>
34                </a>
35              </Link>
36
37              <span className="dateAuthorContainer">
38                {PrettyDate(date)}
39                <Author author={author.data} />
40              </span>
41
42              <Tags blogPostTags={blog_post_tags} />
43            </li>
44          );
45        })}
46      </ul>
47      <style jsx>{`
48        .blogPost {
49          margin-bottom: 40px;
50        }
51        .subtitle {
52          margin-bottom: 12px;
53          line-height: 30px;
54          color: ${colors.link};
55        }
56        .subtitle:hover {
57          -webkit-filter: drop-shadow(0px 0px 3px ${colors.linkHover});
58          filter: drop-shadow(0px 0px 3px ${colors.linkHover});
59        }
60        .dateAuthorContainer {
61          display: flex;
62          align-items: center;
63        }
64      `}</style>
65    </Layout>
66  );
67};
68
69export const getStaticProps: GetStaticProps = async () => {
70  if (!process.env.PRISMIC_API_ENDPOINT || !process.env.PRISMIC_ACCESS_TOKEN)
71    return { props: {} };
72
73  const home = await Prismic.client(process.env.PRISMIC_API_ENDPOINT, {
74    accessToken: process.env.PRISMIC_ACCESS_TOKEN,
75  }).getSingle("blog_home", {});
76
77  const posts = await Prismic.client(process.env.PRISMIC_API_ENDPOINT, {
78    accessToken: process.env.PRISMIC_ACCESS_TOKEN,
79  }).query(Prismic.Predicates.at("document.type", "blog_post"), {
80    orderings: "[my.blog_post.date desc]",
81    fetchLinks: [
82      "author.author_name",
83      "author.author_image",
84      "blog_post_tag.title",
85    ],
86  });
87
88  return { props: { home, posts } };
89};
90
91export default BlogHome;

Next you'll want to update the file handles the pages for our individual blog posts. As you can see it also uses fetchLinks to get the tag titles with the posts and passes them the the shared tags component we created earlier.

pages/blog/[uid].tsx

1import React from "react";
2import { GetStaticProps, GetStaticPaths } from "next";
3import Prismic from "prismic-javascript";
4import { RichText } from "prismic-reactjs";
5import { Layout } from "components/Layout";
6import { PageHeading } from "components/PageHeading";
7import { Head } from "components/Head";
8import { PrettyDate } from "components/PrettyDate";
9import { Tags } from "components/Tags";
10import { Author } from "components/Author";
11import { CodeSlice } from "components/CodeSlice";
12import { TextSlice } from "components/TextSlice";
13
14const Post = ({ post }) => {
15  const {
16    author,
17    blog_post_tags,
18    title,
19    date,
20    post_body,
21    body,
22    meta_title,
23    meta_description,
24  } = post.data;
25
26  const blogContent = body.map((slice, index) => {
27    if (slice.slice_type === "text") {
28      return <TextSlice slice={slice} key={index} />;
29    } else if (slice.slice_type === "code_snippet") {
30      return <CodeSlice content={slice.primary.code_snippet} key={index} />;
31    } else {
32      return null;
33    }
34  });
35
36  return (
37    <Layout>
38      <Head title={meta_title} description={meta_description} />
39      <PageHeading heading={RichText.asText(title)} />
40
41      <span className="dateAuthorContainer">
42        {PrettyDate(date)}
43        <Author author={author.data} />
44      </span>
45
46      <Tags blogPostTags={blog_post_tags} />
47
48      {blogContent}
49
50      <style jsx>{`
51        .dateAuthorContainer {
52          display: flex;
53          align-items: center;
54        }
55      `}</style>
56    </Layout>
57  );
58};
59
60export const getStaticPaths: GetStaticPaths = async () => {
61  if (!process.env.PRISMIC_API_ENDPOINT || !process.env.PRISMIC_ACCESS_TOKEN)
62    return { paths: [], fallback: false };
63
64  const posts = await Prismic.client(process.env.PRISMIC_API_ENDPOINT, {
65    accessToken: process.env.PRISMIC_ACCESS_TOKEN,
66  }).query(Prismic.Predicates.at("document.type", "blog_post"), {
67    orderings: "[my.blog_post.date desc]",
68  });
69
70  const paths = posts.results.map((post) => `/blog/${post.uid}`);
71
72  return { paths, fallback: false };
73};
74
75export const getStaticProps: GetStaticProps = async ({ params }) => {
76  if (
77    !params?.uid ||
78    !process.env.PRISMIC_API_ENDPOINT ||
79    !process.env.PRISMIC_ACCESS_TOKEN
80  )
81    return { props: {} };
82
83  const post = await Prismic.client(process.env.PRISMIC_API_ENDPOINT, {
84    accessToken: process.env.PRISMIC_ACCESS_TOKEN,
85  }).getByUID("blog_post", params?.uid as string, {
86    fetchLinks: [
87      "author.author_name",
88      "author.author_image",
89      "blog_post_tag.title",
90    ],
91  });
92
93  return { props: { post } };
94};
95
96export default Post;

Last you'll add a new component to handle the listing of blog posts that have a specific tag.

pages/blog/tag/[uid].tsx

1import React from "react";
2import Prismic from "prismic-javascript";
3import { RichText } from "prismic-reactjs";
4import { GetStaticProps, GetStaticPaths } from "next";
5import Link from "next/link";
6import { linkResolver, hrefResolver } from "prismic-configuration";
7import { Layout } from "components/Layout";
8import { PageHeading } from "components/PageHeading";
9import { Head } from "components/Head";
10import { PrettyDate } from "components/PrettyDate";
11import { Author } from "components/Author";
12import { colors } from "colors";
13import { Tags } from "components/Tags";
14
15const BlogTagListing = ({ posts, singleTagTitle }) => {
16  const tagPageTitle = `${RichText.asText(singleTagTitle)} blog posts`;
17
18  return (
19    <Layout>
20      <Head
21        title={tagPageTitle}
22        description={`Find and read ${tagPageTitle}.`}
23      />
24      <PageHeading heading={tagPageTitle} />
25
26      <ul>
27        {posts.results.map((post) => {
28          const { blog_post_tags, date, author } = post.data;
29
30          return (
31            <li key={post.uid} className="blogPost">
32              <Link href={linkResolver(post)} passHref>
33                <a>
34                  <h2 className="subtitle">
35                    {RichText.asText(post.data.title)}
36                  </h2>
37                </a>
38              </Link>
39
40              <span className="dateAuthorContainer">
41                {PrettyDate(date)}
42                <Author author={author.data} />
43              </span>
44
45              <Tags blogPostTags={blog_post_tags} />
46            </li>
47          );
48        })}
49      </ul>
50      <style jsx>{`
51        .blogPost {
52          margin-bottom: 40px;
53        }
54        .subtitle {
55          margin-bottom: 12px;
56          line-height: 30px;
57          color: ${colors.link};
58        }
59        .subtitle:hover {
60          -webkit-filter: drop-shadow(0px 0px 3px ${colors.linkHover});
61          filter: drop-shadow(0px 0px 3px ${colors.linkHover});
62        }
63        .dateAuthorContainer {
64          display: flex;
65          align-items: center;
66        }
67      `}</style>
68    </Layout>
69  );
70};
71
72export const getStaticPaths: GetStaticPaths = async () => {
73  if (!process.env.PRISMIC_API_ENDPOINT || !process.env.PRISMIC_ACCESS_TOKEN)
74    return { paths: [], fallback: false };
75
76  const tags = await Prismic.client(process.env.PRISMIC_API_ENDPOINT, {
77    accessToken: process.env.PRISMIC_ACCESS_TOKEN,
78  }).query(Prismic.Predicates.at("document.type", "blog_post_tag"), {});
79
80  const paths = tags.results.map((tag) => `/blog/tag/${tag.uid}`);
81
82  return { paths, fallback: false };
83};
84
85export const getStaticProps: GetStaticProps = async ({ params }) => {
86  if (
87    !params?.uid ||
88    !process.env.PRISMIC_API_ENDPOINT ||
89    !process.env.PRISMIC_ACCESS_TOKEN
90  )
91    return { props: {} };
92
93  const allTags = await Prismic.client(process.env.PRISMIC_API_ENDPOINT, {
94    accessToken: process.env.PRISMIC_ACCESS_TOKEN,
95  }).query([Prismic.Predicates.at("document.type", "blog_post_tag")], {});
96
97  const singleTag = allTags.results.filter((tag) => {
98    return tag.uid === params.uid;
99  });
100
101  const tagId = singleTag.map((tag) => {
102    return tag.id;
103  });
104
105  const tagTitle = singleTag.map((tag) => {
106    return tag.data.title;
107  });
108
109  const singleTagId = tagId.values().next().value;
110  const singleTagTitle = tagTitle.values().next().value;
111
112  const posts = await Prismic.client(process.env.PRISMIC_API_ENDPOINT, {
113    accessToken: process.env.PRISMIC_ACCESS_TOKEN,
114  }).query(
115    [
116      Prismic.Predicates.at("document.type", "blog_post"),
117      Prismic.Predicates.at("my.blog_post.blog_post_tags.tag", singleTagId),
118    ],
119    {
120      orderings: "[my.blog_post.date desc]",
121      fetchLinks: [
122        "author.author_name",
123        "author.author_image",
124        "blog_post_tag.title",
125      ],
126    }
127  );
128
129  return { props: { posts, singleTagTitle } };
130};
131
132export default BlogTagListing;

You now have a working blog post tag system using prismic and Next.js! The complete working code can be found in my Next.js prismic blog GitHub repo.

© 2021 Justin Friebel. Powered by Next.js, prismic, & Vercel.