fix(frontend): align paginated posts routing

src/app/(frontend)/posts/page/[pageNumber]/page.tsx

@@ -7,11 +7,12 @@ import { getPayload } from 'payload'
 import React from 'react'
 import PageClient from './page.client'
 import { Heading } from '@/components/atoms/Heading'
-import { notFound } from 'next/navigation'
+import { notFound, redirect } from 'next/navigation'
 import { Container } from '@/components/molecules/Container'
 import { normalizePost } from '@/utilities/blog/normalizePost'
 
 export const revalidate = 600
+const POSTS_PER_PAGE = 12
 
 type Args = {
   params: Promise<{
@@ -23,14 +24,17 @@ export default async function Page({ params: paramsPromise }: Args) {
   const { pageNumber } = await paramsPromise
   const payload = await getPayload({ config: configPromise })
 
-  const sanitizedPageNumber = Number(pageNumber)
+  if (!/^\d+$/.test(pageNumber)) notFound()
 
-  if (!Number.isInteger(sanitizedPageNumber)) notFound()
+  const sanitizedPageNumber = Number.parseInt(pageNumber, 10)
+
+  if (!Number.isSafeInteger(sanitizedPageNumber) || sanitizedPageNumber < 1) notFound()
+  if (sanitizedPageNumber === 1) redirect('/posts')
 
   const posts = await payload.find({
     collection: 'posts',
     depth: 1,
-    limit: 12,
+    limit: POSTS_PER_PAGE,
     page: sanitizedPageNumber,
     overrideAccess: false,
     select: {
@@ -49,6 +53,9 @@ export default async function Page({ params: paramsPromise }: Args) {
       },
     },
   })
+
+  if (!posts.docs.length || sanitizedPageNumber > posts.totalPages) notFound()
+
   const normalizedPosts = posts.docs.map(normalizePost)
   const remainingArticlesCount = Math.max((posts.totalDocs || 0) - 1, 0)
 
@@ -95,11 +102,11 @@ export async function generateStaticParams() {
     overrideAccess: false,
   })
 
-  const totalPages = Math.ceil(totalDocs / 10)
+  const totalPages = Math.ceil(totalDocs / POSTS_PER_PAGE)
 
   const pages: { pageNumber: string }[] = []
 
-  for (let i = 1; i <= totalPages; i++) {
+  for (let i = 2; i <= totalPages; i++) {
     pages.push({ pageNumber: String(i) })
   }
 

src/components/molecules/Pagination/index.tsx

@@ -30,7 +30,8 @@ export const Pagination: React.FC<{
 
   const goToPage = (targetPage: number) => {
     if (targetPage < 1 || targetPage > totalPages) return
-    navigate(`/posts/page/${targetPage}`)
+    const targetPath = targetPage === 1 ? '/posts' : `/posts/page/${targetPage}`
+    navigate(targetPath)
   }
 
   return (

tests/unit/app/frontend/posts/paginatedPostsPage.test.ts

@@ -0,0 +1,84 @@
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+
+const mocks = vi.hoisted(() => ({
+  findMock: vi.fn(),
+  countMock: vi.fn(),
+  notFoundMock: vi.fn(() => {
+    throw new Error('notFound')
+  }),
+  redirectMock: vi.fn((path: string) => {
+    throw new Error(`redirect:${path}`)
+  }),
+}))
+
+vi.mock('next/navigation', () => ({
+  notFound: mocks.notFoundMock,
+  redirect: mocks.redirectMock,
+}))
+
+vi.mock('@payload-config', () => ({
+  default: {},
+}))
+
+vi.mock('payload', async (importOriginal) => {
+  const actual = await importOriginal<typeof import('payload')>()
+  return {
+    ...actual,
+    getPayload: vi.fn().mockResolvedValue({
+      find: mocks.findMock,
+      count: mocks.countMock,
+    }),
+  }
+})
+
+describe('Paginated posts page route', () => {
+  beforeEach(() => {
+    vi.clearAllMocks()
+  })
+
+  const getModule = async () => import('@/app/(frontend)/posts/page/[pageNumber]/page')
+
+  it('redirects page 1 to canonical /posts', async () => {
+    const pageModule = await getModule()
+
+    await expect(pageModule.default({ params: Promise.resolve({ pageNumber: '1' }) })).rejects.toThrow(
+      'redirect:/posts',
+    )
+
+    expect(mocks.redirectMock).toHaveBeenCalledWith('/posts')
+    expect(mocks.findMock).not.toHaveBeenCalled()
+  })
+
+  it('returns notFound for non-numeric page params', async () => {
+    const pageModule = await getModule()
+
+    await expect(pageModule.default({ params: Promise.resolve({ pageNumber: 'abc' }) })).rejects.toThrow('notFound')
+
+    expect(mocks.notFoundMock).toHaveBeenCalled()
+    expect(mocks.findMock).not.toHaveBeenCalled()
+  })
+
+  it('returns notFound for out-of-range pages', async () => {
+    mocks.findMock.mockResolvedValueOnce({
+      docs: [],
+      totalPages: 2,
+      totalDocs: 24,
+      page: 3,
+    })
+
+    const pageModule = await getModule()
+
+    await expect(pageModule.default({ params: Promise.resolve({ pageNumber: '3' }) })).rejects.toThrow('notFound')
+
+    expect(mocks.findMock).toHaveBeenCalled()
+    expect(mocks.notFoundMock).toHaveBeenCalled()
+  })
+
+  it('builds static params with page size 12 and skips page 1', async () => {
+    mocks.countMock.mockResolvedValueOnce({ totalDocs: 25 })
+
+    const pageModule = await getModule()
+
+    await expect(pageModule.generateStaticParams()).resolves.toEqual([{ pageNumber: '2' }, { pageNumber: '3' }])
+  })
+})

tests/unit/components/paginationMolecule.test.tsx

@@ -0,0 +1,35 @@
+// @vitest-environment jsdom
+import React from 'react'
+import '@testing-library/jest-dom'
+import { fireEvent, render, screen } from '@testing-library/react'
+import { describe, expect, it, vi } from 'vitest'
+
+vi.mock('next/navigation', () => ({
+  useRouter: () => ({
+    push: vi.fn(),
+  }),
+}))
+
+import { Pagination } from '@/components/molecules/Pagination'
+
+describe('Pagination molecule', () => {
+  it('navigates previous from page 2 to canonical /posts', () => {
+    const onNavigate = vi.fn()
+
+    render(<Pagination page={2} totalPages={5} onNavigate={onNavigate} />)
+
+    fireEvent.click(screen.getByLabelText('Go to previous page'))
+
+    expect(onNavigate).toHaveBeenCalledWith('/posts')
+  })
+
+  it('navigates page 1 button to canonical /posts', () => {
+    const onNavigate = vi.fn()
+
+    render(<Pagination page={1} totalPages={3} onNavigate={onNavigate} />)
+
+    fireEvent.click(screen.getByRole('button', { name: '1' }))
+
+    expect(onNavigate).toHaveBeenCalledWith('/posts')
+  })
+})