How to Display the Date of When a Blog Was Created in Next.js and TypeScript

When building a blog using Next.js and TypeScript, it’s important to display the date of when each blog post was created. This not only provides useful information to readers but also adds a professional touch to your website. In this article, we will explore two solutions to achieve this.

Solution 1: Using JavaScript’s Date Object

The first solution involves using JavaScript’s built-in Date object to retrieve the current date and time. We can then format this information to display the creation date of the blog post.

Here’s an example code snippet:

import React from 'react';

const BlogPost = ({ title, content }) => {
  const creationDate = new Date().toLocaleDateString();

  return (
    

      
{title}
      {content}
      Created on: {creationDate}
    
  );
};

export default BlogPost;

In the above code, we create a new instance of the Date object and use the toLocaleDateString() method to format the date as a string in the user’s local time zone. We then display the formatted date within the blog post component.

Solution 2: Using a Third-Party Library

If you prefer a more advanced solution with additional formatting options, you can use a third-party library like date-fns. This library provides various date manipulation and formatting functions.

First, install the library by running the following command:

npm install date-fns

Then, import the necessary functions and use them in your code:

import React from 'react';
import { format } from 'date-fns';

const BlogPost = ({ title, content }) => {
  const creationDate = format(new Date(), 'MMMM dd, yyyy');

  return (
    

      
{title}
      {content}
      Created on: {creationDate}
    
  );
};

export default BlogPost;

In this example, we use the format function from the date-fns library to format the date as “Month dd, yyyy”. You can customize the format according to your preference by referring to the library’s documentation.

These two solutions provide different approaches to displaying the creation date of a blog post in Next.js and TypeScript. Choose the one that best suits your needs and enhances the user experience of your blog.

Happy coding!