From 82003e3ce4d15503a50858501f0fdd373fbad9f2 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Mateus=20Felipe=20Gon=C3=A7alves?=
 <mateusfelipefg77@gmail.com>
Date: Sat, 9 Mar 2024 11:48:27 +0000
Subject: [PATCH] chore(contet/til): add
 "2024_03_09-supress_hydration_warning_on_nextjs"

---
 ...024_03_09-supress_hydration_warning_on_nextjs.mdx | 12 ++++++++++++
 src/app/blog/til/page.tsx                            |  2 +-
 2 files changed, 13 insertions(+), 1 deletion(-)
 create mode 100644 content/til/2024_03_09-supress_hydration_warning_on_nextjs.mdx

diff --git a/content/til/2024_03_09-supress_hydration_warning_on_nextjs.mdx b/content/til/2024_03_09-supress_hydration_warning_on_nextjs.mdx
new file mode 100644
index 00000000..3068e8c4
--- /dev/null
+++ b/content/til/2024_03_09-supress_hydration_warning_on_nextjs.mdx
@@ -0,0 +1,12 @@
+---
+title: 'Supress hydration warning on Next.js'
+description: 'Supress "Text content does not match server-rendered HTML"'
+date: '2024-03-09'
+tags: [next.js,javascript,workaround,errors]
+---
+
+Just use `suppressHydrationWarning` on the component that is causing the warning:
+
+```tsx
+<time datetime="2016-10-25" suppressHydrationWarning />
+```
diff --git a/src/app/blog/til/page.tsx b/src/app/blog/til/page.tsx
index 937374b1..4f2ab2a7 100644
--- a/src/app/blog/til/page.tsx
+++ b/src/app/blog/til/page.tsx
@@ -16,7 +16,7 @@ export const metadata: Metadata = {
 
 const TILComponent = ({ til }: { til: TIL }) => {
   return (
-    <div className="relative flex flex-col gap-6 border-b border-b-neutral-200 py-12 last:border-none dark:border-b-neutral-800 md:flex-row md:gap-1">
+    <div className="relative flex flex-col gap-6 border-b border-b-neutral-200 py-12 last:border-none dark:border-b-neutral-800 md:flex-row md:gap-3">
       <div className="top-24 h-fit flex-1 space-y-2 md:sticky md:space-y-5">
         <div className="space-y-3">
           <h2 className="text-xl font-bold">{til.title}</h2>