From a6e8c373b8a38dc0d7fd7c9287b01bd7f4db25dd Mon Sep 17 00:00:00 2001
From: Ryan Freeman <hello@ryanfreeman.dev>
Date: Thu, 27 Mar 2025 15:47:52 +0000
Subject: [PATCH] Render article nav on server

---
 app/api/articles/route.ts            |  7 ----
 app/api/comments/[slug]/route.ts     |  2 +-
 components/layouts/ArticleLayout.tsx | 36 ++++++++++++----
 components/ui/ArticleNav.tsx         | 61 +---------------------------
 4 files changed, 32 insertions(+), 74 deletions(-)
 delete mode 100644 app/api/articles/route.ts

diff --git a/app/api/articles/route.ts b/app/api/articles/route.ts
deleted file mode 100644
index 359a0bc..0000000
--- a/app/api/articles/route.ts
+++ /dev/null
@@ -1,7 +0,0 @@
-import {getAllArticles} from '@/lib/getAllArticles'
-
-export async function GET(request: Request) {
-    const articles = await getAllArticles(false)
-
-    return new Response(JSON.stringify(articles), {status: 200})
-}
diff --git a/app/api/comments/[slug]/route.ts b/app/api/comments/[slug]/route.ts
index 46c135f..3d93fcb 100644
--- a/app/api/comments/[slug]/route.ts
+++ b/app/api/comments/[slug]/route.ts
@@ -14,7 +14,7 @@ export async function GET(request: Request, {params}: { params: Promise<{ slug:
                     published,
                     created_at,
                     user:users!inner(id, name, image),
-                    article:articles!inner(id, slug)
+                    article:articles!inner(id, title, slug)
                 `)
                 .eq('article.slug', slug)
                 .eq('published', true)
diff --git a/components/layouts/ArticleLayout.tsx b/components/layouts/ArticleLayout.tsx
index 4596e4c..e4d5a6e 100644
--- a/components/layouts/ArticleLayout.tsx
+++ b/components/layouts/ArticleLayout.tsx
@@ -7,6 +7,7 @@ import {ArrowDownIcon} from '@/components/icons/ArrowDownIcon'
 import {formatDate} from '@/lib/formatDate'
 import ArticleNav from '@/components/ui/ArticleNav'
 import Comments from '@/components/ui/Comments'
+import {getAllArticles} from '@/lib/getAllArticles'
 
 type ArticleLayout = {
     title: string
@@ -24,12 +25,33 @@ const gradients = [
     'bg-gradient-to-r from-sky-400 to-blue-500'
 ]
 
-export function ArticleLayout({
-                                  title,
-                                  date,
-                                  slug,
-                                  children
-                              }: ArticleLayout) {
+type Article = {
+    slug: string
+    authors: string
+    title: string
+    date: string
+    description: string
+}
+
+function findAdjacentArticles(articles: Article[], slug: string) {
+    let prev, next
+    if (articles) {
+        const index = articles.findIndex(article => article.slug === slug)
+        prev = index > 0 ? articles[index - 1] : null
+        next = index < articles.length - 1 ? articles[index + 1] : null
+    }
+
+    return {prev, next}
+}
+
+export async function ArticleLayout({
+                                        title,
+                                        date,
+                                        slug,
+                                        children
+                                    }: ArticleLayout) {
+    const articles = await getAllArticles(false)
+    const {prev, next} = findAdjacentArticles(articles, slug)
 
     return (
         <Container className="mt-16 lg:mt-32">
@@ -60,7 +82,7 @@ export function ArticleLayout({
                         <Prose className="mt-8" data-mdx-content>{children}</Prose>
                     </article>
                     <Comments slug={slug}/>
-                    <ArticleNav slug={slug}/>
+                    <ArticleNav prev={prev} next={next}/>
                 </div>
             </div>
         </Container>
diff --git a/components/ui/ArticleNav.tsx b/components/ui/ArticleNav.tsx
index 92db6e0..b0520f3 100644
--- a/components/ui/ArticleNav.tsx
+++ b/components/ui/ArticleNav.tsx
@@ -1,65 +1,8 @@
-'use client'
-
-import React, {ReactElement, useEffect, useState} from 'react'
-import fetcher from '@/lib/fetcher'
-import useSWR from 'swr'
+import React from 'react'
 import {Card} from '@/components/ui/Card'
 import clsx from 'clsx'
 
-
-type Article = {
-    slug: string
-    authors: string
-    title: string
-    date: string
-    description: string
-}
-
-type FetchArticlesResponse = {
-    data: Article[]
-    error: string
-    isLoading: boolean
-}
-
-type ArticleNavProps = {
-    slug: string
-}
-
-type PaginationProps = {
-    next: Article | null
-    prev: Article | null
-}
-
-function useFetchArticles() {
-    const {data, error, isLoading} = useSWR(`/api/articles/`, fetcher) as FetchArticlesResponse
-
-    return {
-        articles: data,
-        isLoading,
-        isError: error
-    }
-}
-
-export default function ArticleNav({slug}: ArticleNavProps): ReactElement | null {
-    const {articles, isLoading, isError} = useFetchArticles()
-    const [{next, prev}, setPagination] = useState<PaginationProps>({next: null, prev: null})
-
-    useEffect(() => {
-        const findAdjacentArticles = (articles: Article[], slug: string) => {
-            if (articles) {
-                const index = articles.findIndex(article => article.slug === slug)
-                const next = index < articles.length - 1 ? articles[index + 1] : null
-                const prev = index > 0 ? articles[index - 1] : null
-
-                setPagination({next, prev})
-            }
-        }
-
-        findAdjacentArticles(articles, slug)
-    }, [articles, slug])
-
-    if (isError) return null
-
+export default function ArticleNav({prev, next}: { prev: any, next: any }) {
     return (
         <section className="mt-24">
             <ul