w

frontend/apps/service-site/src/features/posts/components/PostDetailPage/PostDetailPage.module.css

@@ -0,0 +1,12 @@
+.navPostWrapper {
+  display: grid;
+  grid-auto-flow: row;
+  gap: var(--spacing-8);
+}
+
+@media screen and (min-width: 768px) {
+  .navPostWrapper {
+    grid-auto-flow: column;
+    gap: var(--spacing-10);
+  }
+}

frontend/apps/service-site/src/features/posts/components/PostDetailPage/PostDetailPage.tsx

@@ -4,8 +4,11 @@ import { PostHero } from '@/features/posts/components/PostHero'
 import { MDXContent } from '@/libs/contentlayer'
 import { notFound } from 'next/navigation'
 import type { FC } from 'react'
-import { findPostByLangAndSlug } from '../../utils'
+import { findPostByLangAndSlug, getNextPost, getPrevPost } from '../../utils'
+import { NavNextPost } from '../NavNextPost'
+import { NavPreviousPost } from '../NavPreviousPost'
 import { TableOfContents } from '../TableOfContents'
+import styles from './PostDetailPage.module.css'
 
 const TOC_TARGET_CLASS_NAME = 'target-toc'
 
@@ -18,13 +21,20 @@ export const PostDetailPage: FC<Props> = ({ lang, slug }) => {
   const post = findPostByLangAndSlug({ lang, slug })
   if (!post) notFound()
 
+  const prevPost = getPrevPost({ lang, targetPost: post })
+  const nextPost = getNextPost({ lang, targetPost: post })
+
   return (
     <article className={TOC_TARGET_CLASS_NAME} style={{ padding: '0 120px' }}>
       <PostHero post={post} />
       <TableOfContents contentSelector={TOC_TARGET_CLASS_NAME} />
       {/* FIXME: Add href props after implementing categories single page */}
       <LinkHeading href="/">Categories</LinkHeading>
       <MDXContent code={post.body.code} />
+      <div className={styles.navPostWrapper}>
+        <NavPreviousPost post={prevPost} />
+        <NavNextPost post={nextPost} />
+      </div>
     </article>
   )
 }

frontend/apps/service-site/src/features/posts/utils/getNextPost.ts

@@ -0,0 +1,24 @@
+import type { Lang } from '@/features/i18n'
+import type { Post } from 'contentlayer/generated'
+import { filterPostsByLang } from './filterPostsByLang'
+import { sortPostsByDate } from './sortPostsByDate'
+
+type Params = {
+  lang: Lang
+  targetPost: Post
+}
+
+export function getNextPost({ lang, targetPost }: Params) {
+  const posts = filterPostsByLang(lang)
+  const sortedPosts = sortPostsByDate(posts)
+
+  const targetIndex = sortedPosts.findIndex(
+    (post) => post._id === targetPost._id,
+  )
+
+  if (targetIndex === -1 || targetIndex === sortedPosts.length - 1) {
+    return undefined
+  }
+
+  return sortedPosts[targetIndex + 1]
+}

frontend/apps/service-site/src/features/posts/utils/getPrevPost.ts

@@ -0,0 +1,24 @@
+import type { Lang } from '@/features/i18n'
+import type { Post } from 'contentlayer/generated'
+import { filterPostsByLang } from './filterPostsByLang'
+import { sortPostsByDate } from './sortPostsByDate'
+
+type Params = {
+  lang: Lang
+  targetPost: Post
+}
+
+export function getPrevPost({ lang, targetPost }: Params) {
+  const posts = filterPostsByLang(lang)
+  const sortedPosts = sortPostsByDate(posts)
+
+  const targetIndex = sortedPosts.findIndex(
+    (post) => post._id === targetPost._id,
+  )
+
+  if (targetIndex === -1 || targetIndex === 0) {
+    return undefined
+  }
+
+  return sortedPosts[targetIndex - 1]
+}

frontend/apps/service-site/src/features/posts/utils/index.ts

@@ -1,3 +1,5 @@
 export * from './filterPostsByLang'
 export * from './findPostByLangAndSlug'
+export * from './getNextPost'
+export * from './getPrevPost'
 export * from './sortPostsByDate'