Tailwind Logo

Using Nextjs' App Route's Dynamic Route to create blog pages (Part 2)

Content Hub ONENext.js

Published: 2023-09-29

In the last issue, we showed you how to create a Dynamic Route for an individual blog page using an ID. This time, we will make one more improvement and proceed so that the URL paths can be processed using dates and Slug.

Customize Content Type

I would like to add Slug to the list of items to manage in Content Hub ONE. Open the Blog content type in Content Hub ONE and add Slug as shown below. This field is required.

nextappdynamicroute04.png

Then complete the work on the Content Hub ONE side by filling in the empty Slug fields for the existing content.

Interface Changes

This time, since the data structure has changed, the code in interfaces/blog/index.ts, which manages type definitions and queries for blogs, must be rewritten. Add a slug as shown in the following code.

TypeScript
export interface Blog {
  id: string;
  name: string;
  title: string;
  description: string;
  publishDate: string;
  slug: string;
  blogImage: {
    results: Partial<Media>[];
  };
}

Also add slug to the related query. After making the changes, rewrite the part of the file app/blog/[slug]/page.tsx that describes the data as follows

TypeScript
  return (
    <div>
      {post.title} :{post.publishDate} {post.slug}
    </div>
  );

The actual publishDate and slug are displayed.

nextappdynamicroute05.png

Also, api/queries/getBlog/index.tsx processes the acquired data. Please add the slug line in the following reference code.

TypeScript
      title: post.title,
      slug: post.slug,
      publishDate: post.publishDate,

We have confirmed that we are getting the necessary data for the URL.

Switch from ID to Slug

Change the value used as the URL from the ID to the Slug value. First, to use Slug to display blog posts, change the query as follows

TypeScript
export const getBlogSlugQuery = (slug: string) => {
  return `query AllBlog {
    allBlog(where: {slug_eq: "${slug}"}) {
      total
      results {
        description
        id
        name
        publishDate
        slug
        title
        blogImage {
          total
          results {
            id
            name
            description
            fileHeight
            fileId
            fileName
            fileSize
            fileType
            fileUrl
            fileWidth
          }
        }
      }
    }
  }
  `;
};

The above query is a form of retrieving the same Slug value from all blog posts. For this reason, set a unique value for Slug. Next, add the following code to api/queries/getBlog/index.tsx, which defines the function to retrieve articles.

TypeScript
export async function getBlogBySlug(slug: string): Promise<Partial<Blog>> {
  const results: AllBlogResponse = (await fetchGraphQL(
    getBlogSlugQuery(slug)
  )) as AllBlogResponse;

  return results.data.allBlog.results[0];
}

Note that the name of the query has been changed, so change the name of the query in the import to getBlogSlugQuery. This will make it possible to retrieve the corresponding article using Slug.

Now, in order to actually use slug in URLs, change post.id given to slug to post.slug in the description of generateStaticParams in the file app/blog/[slug]/page.tsx.

TypeScript
export async function generateStaticParams() {
  const posts = await getAllBlog();

  return posts.map((post) => ({
    slug: post.slug,
  }));
}

Also, change the content to be retrieved on the page as follows

TypeScript
  const post = await getBlogBySlug(params.slug);

This will display the page using the Slug value. For ease of testing, also change the output part of the app/page.tsx file on the top page as follows

TypeScript
      <ul>
        {posts.map((post) => (
          <li key={post.id}>
            <a href={"/blog/" + post.slug}>
              {post.title} {post.slug}
            </a>
          </li>
        ))}
      </ul>

When executed, you will see that the blog page is displayed using slug as shown below.

nextappdynamicroute06.png

Summary

In this article, we introduced the procedure for adding a field to be used as a slug to control URLs. The only content displayed is the title, but since the data has been acquired, we can now create the blog page and so on.

Tags