diff --git a/frontend/apps/service-site/src/features/posts/components/index.ts b/frontend/apps/service-site/src/features/posts/components/index.ts
index 76609d12c..956d547f5 100644
--- a/frontend/apps/service-site/src/features/posts/components/index.ts
+++ b/frontend/apps/service-site/src/features/posts/components/index.ts
@@ -2,6 +2,8 @@ export * from './Code'
export * from './Heading'
export * from './LinkHeading'
export * from './LinkCard'
+export * from './NavNextPost'
+export * from './NavPreviousPost'
export * from './TableOfContents'
export * from './PostHero'
diff --git a/frontend/apps/service-site/src/features/posts/factories.ts b/frontend/apps/service-site/src/features/posts/factories.ts
new file mode 100644
index 000000000..06d10962f
--- /dev/null
+++ b/frontend/apps/service-site/src/features/posts/factories.ts
@@ -0,0 +1,61 @@
+import type { Post } from 'contentlayer/generated'
+
+export const aPost = (): Post => {
+ return {
+ _id: 'posts/14/en.mdx',
+ _raw: {
+ sourceFilePath: 'posts/14/en.mdx',
+ sourceFileName: 'en.mdx',
+ sourceFileDir: 'posts/14',
+ contentType: 'mdx',
+ flattenedPath: 'posts/14/en',
+ },
+ type: 'Post',
+ title:
+ 'Managing Data with No-Code: The Best Tools for Complex Business Needs',
+ date: '2024-09-12T00:00:00.000Z',
+ tags: ['No-code', 'App Development', 'Tech Trends'],
+ categories: ['Technology', 'App Development'],
+ writer: 'Skyler Knox',
+ image: '/images/posts/14/image.png',
+ introduction:
+ 'No-code platforms are revolutionizing the way businesses approach application development by empowering users to create software without traditional coding skills. In this post, we explore the profound impact of no-code platforms on the tech industry and what the future holds. First, the emergence of no-code platforms has democratized software development, making it accessible to a much wider audience beyond those with specialized programming knowledge. This shift has significantly lowered the barriers to innovation, enabling a diverse range of ideas to come to fruition. By providing intuitive, visual interfaces and pre-built components, these platforms allow individuals from various backgrounds to transform their concepts into functional applications',
+ body: {
+ raw:
+ '\n' +
+ 'The rise of no-code application platforms is changing the landscape of software development. These platforms allow users with little to no coding knowledge to create fully functional applications, reducing the barrier to entry for innovation. The convenience, flexibility, and speed offered by no-code tools are helping businesses of all sizes innovate at unprecedented rates.\n' +
+ '\n' +
+ '## What is a No-Code Platform?\n' +
+ '\n' +
+ 'A no-code platform provides a user-friendly interface where developers, or even non-developers, can build applications through drag-and-drop functionality and pre-built components. These platforms abstract away the complexity of traditional coding, allowing anyone with a vision to bring their ideas to life.\n' +
+ '\n' +
+ '## The Benefits of No-Code Platforms\n' +
+ '\n' +
+ '1. **Speed and Agility**: No-code platforms allow for rapid prototyping and development, reducing the time it takes to bring a product to market.\n' +
+ '2. **Cost-Effective**: Without the need for dedicated development teams, businesses can significantly reduce costs.\n' +
+ '3. **Empowerment**: Business users can create applications themselves, reducing the reliance on IT departments.\n' +
+ '\n' +
+ '## The Future of No-Code\n' +
+ '\n' +
+ 'As the capabilities of no-code platforms continue to expand, more complex applications can be built without needing to write a single line of code. AI integration and automation are the next frontiers in no-code development, offering even more opportunities for innovation.\n' +
+ '\n' +
+ 'The no-code movement is democratizing the app development process, empowering more people to participate in creating the future of software. As these platforms evolve, they will continue to blur the line between developer and non-developer, making app development accessible to everyone.\n',
+ code:
+ 'var Component=(()=>{var h=Object.create;var r=Object.defineProperty;var f=Object.getOwnPropertyDescriptor;var m=Object.getOwnPropertyNames;var u=Object.getPrototypeOf,g=Object.prototype.hasOwnProperty;var v=(o,e)=>()=>(e||o((e={exports:{}}).exports,e),e.exports),w=(o,e)=>{for(var n in e)r(o,n,{get:e[n],enumerable:!0})},s=(o,e,n,a)=>{if(e&&typeof e=="object"||typeof e=="function")for(let i of m(e))!g.call(o,i)&&i!==n&&r(o,i,{get:()=>e[i],enumerable:!(a=f(e,i))||a.enumerable});return o};var b=(o,e,n)=>(n=o!=null?h(u(o)):{},s(e||!o||!o.__esModule?r(n,"default",{value:o,enumerable:!0}):n,o)),y=o=>s(r({},"__esModule",{value:!0}),o);var d=v((C,l)=>{l.exports=_jsx_runtime});var T={};w(T,{default:()=>p,frontmatter:()=>x});var t=b(d()),x={title:"Managing Data with No-Code: The Best Tools for Complex Business Needs",date:"2024-09-12",tags:["No-code","App Development","Tech Trends"],categories:["Technology","App Development"],image:"/images/posts/14/image.png",writer:"Skyler Knox",introduction:"No-code platforms are revolutionizing the way businesses approach application development by empowering users to create software without traditional coding skills. In this post, we explore the profound impact of no-code platforms on the tech industry and what the future holds. First, the emergence of no-code platforms has democratized software development, making it accessible to a much wider audience beyond those with specialized programming knowledge. This shift has significantly lowered the barriers to innovation, enabling a diverse range of ideas to come to fruition. By providing intuitive, visual interfaces and pre-built components, these platforms allow individuals from various backgrounds to transform their concepts into functional applications"};function c(o){let e={h2:"h2",li:"li",ol:"ol",p:"p",strong:"strong",...o.components};return(0,t.jsxs)(t.Fragment,{children:[(0,t.jsx)(e.p,{children:"The rise of no-code application platforms is changing the landscape of software development. These platforms allow users with little to no coding knowledge to create fully functional applications, reducing the barrier to entry for innovation. The convenience, flexibility, and speed offered by no-code tools are helping businesses of all sizes innovate at unprecedented rates."}),`\n' +
+ '`,(0,t.jsx)(e.h2,{id:"what-is-a-no-code-platform",children:"What is a No-Code Platform?"}),`\n' +
+ '`,(0,t.jsx)(e.p,{children:"A no-code platform provides a user-friendly interface where developers, or even non-developers, can build applications through drag-and-drop functionality and pre-built components. These platforms abstract away the complexity of traditional coding, allowing anyone with a vision to bring their ideas to life."}),`\n' +
+ '`,(0,t.jsx)(e.h2,{id:"the-benefits-of-no-code-platforms",children:"The Benefits of No-Code Platforms"}),`\n' +
+ '`,(0,t.jsxs)(e.ol,{children:[`\n' +
+ '`,(0,t.jsxs)(e.li,{children:[(0,t.jsx)(e.strong,{children:"Speed and Agility"}),": No-code platforms allow for rapid prototyping and development, reducing the time it takes to bring a product to market."]}),`\n' +
+ '`,(0,t.jsxs)(e.li,{children:[(0,t.jsx)(e.strong,{children:"Cost-Effective"}),": Without the need for dedicated development teams, businesses can significantly reduce costs."]}),`\n' +
+ '`,(0,t.jsxs)(e.li,{children:[(0,t.jsx)(e.strong,{children:"Empowerment"}),": Business users can create applications themselves, reducing the reliance on IT departments."]}),`\n' +
+ '`]}),`\n' +
+ '`,(0,t.jsx)(e.h2,{id:"the-future-of-no-code",children:"The Future of No-Code"}),`\n' +
+ '`,(0,t.jsx)(e.p,{children:"As the capabilities of no-code platforms continue to expand, more complex applications can be built without needing to write a single line of code. AI integration and automation are the next frontiers in no-code development, offering even more opportunities for innovation."}),`\n' +
+ '`,(0,t.jsx)(e.p,{children:"The no-code movement is democratizing the app development process, empowering more people to participate in creating the future of software. As these platforms evolve, they will continue to blur the line between developer and non-developer, making app development accessible to everyone."})]})}function p(o={}){let{wrapper:e}=o.components||{};return e?(0,t.jsx)(e,{...o,children:(0,t.jsx)(c,{...o})}):c(o)}return y(T);})();\n' +
+ ';return Component;',
+ },
+ lang: 'en',
+ slug: '14',
+ }
+}
diff --git a/frontend/apps/service-site/src/features/posts/utils/createPostDetailLink.ts b/frontend/apps/service-site/src/features/posts/utils/createPostDetailLink.ts
new file mode 100644
index 000000000..357d69148
--- /dev/null
+++ b/frontend/apps/service-site/src/features/posts/utils/createPostDetailLink.ts
@@ -0,0 +1,14 @@
+import type { Lang } from '@/features/i18n'
+
+type Params = {
+ lang: Lang | undefined
+ slug: string
+}
+
+export function createPostDetailLink({ lang, slug }: Params) {
+ if (lang) {
+ return `/${lang}/posts/${slug}`
+ }
+
+ return `/posts/${slug}`
+}
diff --git a/frontend/apps/service-site/src/features/posts/utils/getNextPost.ts b/frontend/apps/service-site/src/features/posts/utils/getNextPost.ts
new file mode 100644
index 000000000..72be55904
--- /dev/null
+++ b/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]
+}
diff --git a/frontend/apps/service-site/src/features/posts/utils/getPrevPost.ts b/frontend/apps/service-site/src/features/posts/utils/getPrevPost.ts
new file mode 100644
index 000000000..8f69b0319
--- /dev/null
+++ b/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]
+}
diff --git a/frontend/apps/service-site/src/features/posts/utils/index.ts b/frontend/apps/service-site/src/features/posts/utils/index.ts
index 824f2cbb9..482fc9e00 100644
--- a/frontend/apps/service-site/src/features/posts/utils/index.ts
+++ b/frontend/apps/service-site/src/features/posts/utils/index.ts
@@ -1,2 +1,6 @@
+export * from './createPostDetailLink'
export * from './filterPostsByLang'
export * from './findPostByLangAndSlug'
+export * from './getNextPost'
+export * from './getPrevPost'
+export * from './sortPostsByDate'
diff --git a/frontend/apps/service-site/src/features/posts/utils/sortPostsByDate.ts b/frontend/apps/service-site/src/features/posts/utils/sortPostsByDate.ts
new file mode 100644
index 000000000..6df2f4ed9
--- /dev/null
+++ b/frontend/apps/service-site/src/features/posts/utils/sortPostsByDate.ts
@@ -0,0 +1,6 @@
+import type { Post } from 'contentlayer/generated'
+import { compareDesc } from 'date-fns'
+
+export function sortPostsByDate(posts: Post[]) {
+ return posts.sort((a, b) => compareDesc(new Date(a.date), new Date(b.date)))
+}
diff --git a/frontend/apps/service-site/src/features/top/components/TopPage/TopPage.tsx b/frontend/apps/service-site/src/features/top/components/TopPage/TopPage.tsx
index 412fc8012..b8f75bf65 100644
--- a/frontend/apps/service-site/src/features/top/components/TopPage/TopPage.tsx
+++ b/frontend/apps/service-site/src/features/top/components/TopPage/TopPage.tsx
@@ -1,18 +1,15 @@
import { TopCards } from '@/components'
-import type { Lang } from '@/features/i18n'
-import { filterPostsByLang } from '@/features/posts'
-import { compareDesc } from 'date-fns'
+import { type Lang, fallbackLang } from '@/features/i18n'
+import { filterPostsByLang, sortPostsByDate } from '@/features/posts'
import type { FC } from 'react'
type Props = {
- lang: Lang
+ lang?: Lang
}
export const TopPage: FC
= ({ lang }) => {
- const posts = filterPostsByLang(lang)
- const sortedPosts = posts.sort((a, b) =>
- compareDesc(new Date(a.date), new Date(b.date)),
- )
+ const posts = filterPostsByLang(lang ?? fallbackLang)
+ const sortedPosts = sortPostsByDate(posts)
- return
+ return
}