Skip to content

Commit 94e87c9

Browse files
timlrxtimlrx
authored
Merge pull request #1091 from timlrx/tag-paginated
static paginated tag pages
2 parents 3e1d43d + c39796e commit 94e87c9

File tree

8 files changed

+1830
-1672
lines changed

8 files changed

+1830
-1672
lines changed

‎app/blog/page.tsx‎

Lines changed: 5 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,28 +1,20 @@
1-
import ListLayout from '@/layouts/ListLayoutWithTags'
21
import { allCoreContent, sortPosts } from 'pliny/utils/contentlayer'
32
import { allBlogs } from 'contentlayer/generated'
43
import { genPageMetadata } from 'app/seo'
5-
import { notFound } from 'next/navigation'
4+
import ListLayout from '@/layouts/ListLayoutWithTags'
65

76
const POSTS_PER_PAGE = 5
87

98
export const metadata = genPageMetadata({ title: 'Blog' })
109

1110
export default async function BlogPage(props: { searchParams: Promise<{ page: string }> }) {
1211
const posts = allCoreContent(sortPosts(allBlogs))
13-
const searchParams = await props.searchParams
14-
const pageNumber = parseInt(searchParams.page || '1')
15-
const initialDisplayPosts = posts.slice(
16-
POSTS_PER_PAGE * (pageNumber - 1),
17-
POSTS_PER_PAGE * pageNumber
18-
)
19-
if (initialDisplayPosts.length === 0) {
20-
return notFound()
21-
}
22-
12+
const pageNumber = 1
13+
const totalPages = Math.ceil(posts.length / POSTS_PER_PAGE)
14+
const initialDisplayPosts = posts.slice(0, POSTS_PER_PAGE * pageNumber)
2315
const pagination = {
2416
currentPage: pageNumber,
25-
totalPages: Math.ceil(posts.length / POSTS_PER_PAGE),
17+
totalPages: totalPages,
2618
}
2719

2820
return (

‎app/blog/page/[page]/page.tsx‎

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
import ListLayout from '@/layouts/ListLayoutWithTags'
2+
import { allCoreContent, sortPosts } from 'pliny/utils/contentlayer'
3+
import { allBlogs } from 'contentlayer/generated'
4+
import { notFound } from 'next/navigation'
5+
6+
const POSTS_PER_PAGE = 5
7+
8+
export const generateStaticParams = async () => {
9+
const totalPages = Math.ceil(allBlogs.length / POSTS_PER_PAGE)
10+
const paths = Array.from({ length: totalPages }, (_, i) => ({ page: (i + 1).toString() }))
11+
12+
return paths
13+
}
14+
15+
export default async function Page(props: { params: Promise<{ page: string }> }) {
16+
const params = await props.params
17+
const posts = allCoreContent(sortPosts(allBlogs))
18+
const pageNumber = parseInt(params.page as string)
19+
const totalPages = Math.ceil(posts.length / POSTS_PER_PAGE)
20+
21+
// Return 404 for invalid page numbers or empty pages
22+
if (pageNumber <= 0 || pageNumber > totalPages || isNaN(pageNumber)) {
23+
return notFound()
24+
}
25+
const initialDisplayPosts = posts.slice(
26+
POSTS_PER_PAGE * (pageNumber - 1),
27+
POSTS_PER_PAGE * pageNumber
28+
)
29+
const pagination = {
30+
currentPage: pageNumber,
31+
totalPages: totalPages,
32+
}
33+
34+
return (
35+
<ListLayout
36+
posts={posts}
37+
initialDisplayPosts={initialDisplayPosts}
38+
pagination={pagination}
39+
title="All Posts"
40+
/>
41+
)
42+
}

‎app/tags/[tag]/page.tsx‎

Lines changed: 6 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,6 @@ import { allBlogs } from 'contentlayer/generated'
66
import tagData from 'app/tag-data.json'
77
import { genPageMetadata } from 'app/seo'
88
import { Metadata } from 'next'
9-
import { notFound } from 'next/navigation'
109

1110
const POSTS_PER_PAGE = 5
1211

@@ -30,37 +29,23 @@ export async function generateMetadata(props: {
3029
export const generateStaticParams = async () => {
3130
const tagCounts = tagData as Record<string, number>
3231
const tagKeys = Object.keys(tagCounts)
33-
const paths = tagKeys.map((tag) => ({
32+
return tagKeys.map((tag) => ({
3433
tag: encodeURI(tag),
3534
}))
36-
return paths
3735
}
3836

39-
export default async function TagPage(props: {
40-
params: Promise<{ tag: string }>
41-
searchParams: Promise<{ page: string }>
42-
}) {
37+
export default async function TagPage(props: { params: Promise<{ tag: string }> }) {
4338
const params = await props.params
4439
const tag = decodeURI(params.tag)
45-
const searchParams = await props.searchParams
46-
const pageNumber = parseInt(searchParams.page || '1')
47-
// Capitalize first letter and convert space to dash
4840
const title = tag[0].toUpperCase() + tag.split(' ').join('-').slice(1)
4941
const filteredPosts = allCoreContent(
5042
sortPosts(allBlogs.filter((post) => post.tags && post.tags.map((t) => slug(t)).includes(tag)))
5143
)
52-
const initialDisplayPosts = filteredPosts.slice(
53-
POSTS_PER_PAGE * (pageNumber - 1),
54-
POSTS_PER_PAGE * pageNumber
55-
)
56-
57-
if (initialDisplayPosts.length === 0) {
58-
return notFound()
59-
}
60-
44+
const totalPages = Math.ceil(filteredPosts.length / POSTS_PER_PAGE)
45+
const initialDisplayPosts = filteredPosts.slice(0, POSTS_PER_PAGE)
6146
const pagination = {
62-
currentPage: pageNumber,
63-
totalPages: Math.ceil(filteredPosts.length / POSTS_PER_PAGE),
47+
currentPage: 1,
48+
totalPages: totalPages,
6449
}
6550

6651
return (

‎app/tags/[tag]/page/[page]/page.tsx‎

Lines changed: 53 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,53 @@
1+
import { slug } from 'github-slugger'
2+
import { allCoreContent, sortPosts } from 'pliny/utils/contentlayer'
3+
import ListLayout from '@/layouts/ListLayoutWithTags'
4+
import { allBlogs } from 'contentlayer/generated'
5+
import tagData from 'app/tag-data.json'
6+
import { notFound } from 'next/navigation'
7+
8+
const POSTS_PER_PAGE = 5
9+
10+
export const generateStaticParams = async () => {
11+
const tagCounts = tagData as Record<string, number>
12+
return Object.keys(tagCounts).flatMap((tag) => {
13+
const postCount = tagCounts[tag]
14+
const totalPages = Math.ceil(postCount / POSTS_PER_PAGE)
15+
return Array.from({ length: totalPages - 1 }, (_, i) => ({
16+
tag: encodeURI(tag),
17+
page: (i + 2).toString(),
18+
}))
19+
})
20+
}
21+
22+
export default async function TagPage(props: { params: Promise<{ tag: string; page: string }> }) {
23+
const params = await props.params
24+
const tag = decodeURI(params.tag)
25+
const title = tag[0].toUpperCase() + tag.split(' ').join('-').slice(1)
26+
const pageNumber = parseInt(params.page)
27+
const filteredPosts = allCoreContent(
28+
sortPosts(allBlogs.filter((post) => post.tags && post.tags.map((t) => slug(t)).includes(tag)))
29+
)
30+
const totalPages = Math.ceil(filteredPosts.length / POSTS_PER_PAGE)
31+
32+
// Return 404 for invalid page numbers or empty pages
33+
if (pageNumber <= 0 || pageNumber > totalPages || isNaN(pageNumber)) {
34+
return notFound()
35+
}
36+
const initialDisplayPosts = filteredPosts.slice(
37+
POSTS_PER_PAGE * (pageNumber - 1),
38+
POSTS_PER_PAGE * pageNumber
39+
)
40+
const pagination = {
41+
currentPage: pageNumber,
42+
totalPages: totalPages,
43+
}
44+
45+
return (
46+
<ListLayout
47+
posts={filteredPosts}
48+
initialDisplayPosts={initialDisplayPosts}
49+
pagination={pagination}
50+
title={title}
51+
/>
52+
)
53+
}

‎layouts/ListLayout.tsx‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,11 @@ interface ListLayoutProps {
2222

2323
function Pagination({ totalPages, currentPage }: PaginationProps) {
2424
const pathname = usePathname()
25-
const basePath = pathname.split('/')[1]
25+
const segments = pathname.split('/')
26+
const lastSegment = segments[segments.length - 1]
27+
const basePath = pathname
28+
.replace(/^\//, '') // Remove leading slash
29+
.replace(/\/page\/\d+$/, '') // Remove any trailing /page
2630
const prevPage = currentPage - 1 > 0
2731
const nextPage = currentPage + 1 <= totalPages
2832

‎layouts/ListLayoutWithTags.tsx‎

Lines changed: 9 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -23,6 +23,13 @@ interface ListLayoutProps {
2323

2424
function Pagination({ totalPages, currentPage }: PaginationProps) {
2525
const pathname = usePathname()
26+
const segments = pathname.split('/')
27+
const lastSegment = segments[segments.length - 1]
28+
const basePath = pathname
29+
.replace(/^\//, '') // Remove leading slash
30+
.replace(/\/page\/\d+$/, '') // Remove any trailing /page
31+
console.log(pathname)
32+
console.log(basePath)
2633
const prevPage = currentPage - 1 > 0
2734
const nextPage = currentPage + 1 <= totalPages
2835

@@ -36,7 +43,7 @@ function Pagination({ totalPages, currentPage }: PaginationProps) {
3643
)}
3744
{prevPage && (
3845
<Link
39-
href={currentPage - 1 === 1 ? `${pathname}/` : `${pathname}/?page=${currentPage - 1}`}
46+
href={currentPage - 1 === 1 ? `/${basePath}/` : `/${basePath}/page/${currentPage - 1}`}
4047
rel="prev"
4148
>
4249
Previous
@@ -51,7 +58,7 @@ function Pagination({ totalPages, currentPage }: PaginationProps) {
5158
</button>
5259
)}
5360
{nextPage && (
54-
<Link href={`${pathname}/?page=${currentPage + 1}`} rel="next">
61+
<Link href={`/${basePath}/page/${currentPage + 1}`} rel="next">
5562
Next
5663
</Link>
5764
)}

‎package.json‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@
1313
},
1414
"dependencies": {
1515
"@headlessui/react": "2.2.0",
16-
"@next/bundle-analyzer": "15.0.2",
16+
"@next/bundle-analyzer": "15.1.4",
1717
"@tailwindcss/forms": "^0.5.9",
1818
"@tailwindcss/typography": "^0.5.15",
1919
"autoprefixer": "^10.4.13",
@@ -24,7 +24,7 @@
2424
"gray-matter": "^4.0.2",
2525
"hast-util-from-html-isomorphic": "^2.0.0",
2626
"image-size": "1.0.0",
27-
"next": "15.0.2",
27+
"next": "15.1.4",
2828
"next-contentlayer2": "0.5.3",
2929
"next-themes": "^0.3.0",
3030
"pliny": "0.4.0",
@@ -56,7 +56,7 @@
5656
"@typescript-eslint/parser": "^8.12.0",
5757
"cross-env": "^7.0.3",
5858
"eslint": "^9.14.0",
59-
"eslint-config-next": "15.0.2",
59+
"eslint-config-next": "15.1.4",
6060
"eslint-config-prettier": "^9.1.0",
6161
"eslint-plugin-prettier": "^5.2.0",
6262
"globals": "^15.12.0",

0 commit comments

Comments
 (0)