import of old blog posts

app/posts/[slug]/page.tsx

@@ -1,5 +1,5 @@
 import Link from "next/link";
-import { getPostData, getAllPostIds } from "@/lib/posts";
+import { getPostData, getAllPostIds, getAdjacentPosts } from "@/lib/posts";
 import type { PostData } from "@/lib/posts";
 import Window from "@/components/window";
 import TableOfContents from "@/components/table-of-contents";
@@ -28,6 +28,7 @@ export async function generateMetadata({ params }: PageProps) {
 export default async function Post({ params }: PageProps) {
   const { slug } = await params;
   const postData: PostData = await getPostData(slug);
+  const { prev, next } = getAdjacentPosts(slug);
 
   return (
     <div className="mx-auto max-w-6xl">
@@ -92,13 +93,37 @@ export default async function Post({ params }: PageProps) {
         )}
       </div>
 
-      <div className="mt-8 text-center">
+      <div className="mt-8 flex items-center justify-between gap-4">
+        {prev ? (
+          <Link
+            href={`/posts/${prev.id}`}
+            className="inline-block max-w-[38%] truncate rounded-full bg-white/80 px-6 py-2 font-semibold text-blue-700 shadow-md transition-all hover:bg-white"
+            title={prev.title}
+          >
+            ← {prev.title}
+          </Link>
+        ) : (
+          <span />
+        )}
+
         <Link
           href="/"
-          className="inline-block rounded-full bg-white/80 px-6 py-2 font-semibold text-blue-700 shadow-md transition-all hover:bg-white"
+          className="inline-block shrink-0 rounded-full bg-white/80 px-6 py-2 font-semibold text-blue-700 shadow-md transition-all hover:bg-white"
         >
-          ← Back to home
+          Home
         </Link>
+
+        {next ? (
+          <Link
+            href={`/posts/${next.id}`}
+            className="inline-block max-w-[38%] truncate rounded-full bg-white/80 px-6 py-2 font-semibold text-blue-700 shadow-md transition-all hover:bg-white"
+            title={next.title}
+          >
+            {next.title} →
+          </Link>
+        ) : (
+          <span />
+        )}
       </div>
     </div>
   );