From fbc18afaff749f2b1fc15975ddaacc2abb2fadd2 Mon Sep 17 00:00:00 2001
From: Leonardo Lemos <leo.lemos.ds@icloud.com>
Date: Sun, 24 Mar 2024 22:22:29 -0300
Subject: [PATCH] fix(blog-post): inject timestamp in the URL to cache burst
 the image optimization when the page is statically generated

---
 src/domains/blog-post/read-post.tsx | 15 +++++++++++++--
 1 file changed, 13 insertions(+), 2 deletions(-)

diff --git a/src/domains/blog-post/read-post.tsx b/src/domains/blog-post/read-post.tsx
index 0520296..e370ab9 100644
--- a/src/domains/blog-post/read-post.tsx
+++ b/src/domains/blog-post/read-post.tsx
@@ -4,6 +4,7 @@ import {
 	type RenderNode,
 	documentToReactComponents,
 } from '@contentful/rich-text-react-renderer';
+import { BLOCKS } from '@contentful/rich-text-types';
 
 import Badge from '~/components/badge/badge';
 import Image from '~/components/image/image';
@@ -32,7 +33,7 @@ const INSTAPAPER_URL = 'https://instapaper.com' as const;
  *  				 contains the render functions for each type of node.
  */
 const renderNode: RenderNode = {
-	'embedded-asset-block': ({
+	[BLOCKS.EMBEDDED_ASSET]: ({
 		data: {
 			target: {
 				fields: {
@@ -42,10 +43,20 @@ const renderNode: RenderNode = {
 			},
 		},
 	}) => {
-		const src = `https://${url}`;
+		const timestamp = Date.now();
+		const src = `https:${url}?timestamp=${timestamp}`;
 
 		return (
 			<Image
+				// NOTE: The "?timestamp=${timestamp}" above is the only workaround to
+				//       fix the issue with the `next/image` component not rendering the
+				//       assets from Contentful. This is a known issue with the
+				//       `next/image` component and a few remote Content Delivery
+				//       Networks (CDNs) like Contentful's. It works on the local
+				//       environment, however, when we deploy the changes to the Vercel
+				//       cloud, the error occurs. The following discussion on GitHub
+				//       explains the problem and the workaround:
+				//       https://github.com/vercel/next.js/discussions/20138
 				src={src}
 				alt={title}
 				width={600}