ページネーションの実装方法
Next.js と TypeScript を使って、WordPress から乗り換えた際のページネーションを作成する方法を解説します。まずは、Next.js の getStaticProps を利用してデータを取得し、ページネーションを構築していきます。
getStaticProps を使ったデータ取得
まず、ページネーション用のデータを取得するために、Next.js の getStaticProps を使います。ここでは、例として、ブログ記事のデータを取得するものとします。
import { GetStaticProps } from 'next'
type Post = {
id: number
title: string
content: string
}
type Props = {
posts: Post[]
currentPage: number
totalPages: number
}
export const getStaticProps: GetStaticProps<Props> = async (context) => {
const page = context.params?.page ? parseInt(context.params.page as string) : 1
const postsPerPage = 10
// データ取得処理 (例: APIからデータ取得)
const { posts, totalCount } = await fetchPosts(page, postsPerPage)
const totalPages = Math.ceil(totalCount / postsPerPage)
return {
props: {
posts,
currentPage: page,
totalPages,
},
}
}
ページネーションコンポーネントの作成
次に、ページネーションを表示するコンポーネントを作成します。
type PaginationProps = {
currentPage: number
totalPages: number
}
const Pagination = ({ currentPage, totalPages }: PaginationProps) => {
const isFirstPage = currentPage === 1
const isLastPage = currentPage === totalPages
return (
<div>
{!isFirstPage && <a href={`/posts/page/${currentPage - 1}`}>前へ</a>}
<span>{currentPage}</span> / <span>{totalPages}</span>
{!isLastPage && <a href={`/posts/page/${currentPage + 1}`}>次へ</a>}
</div>
)
}
ページネーションを使ったページの表示
最後に、ページネーションコンポーネントを使ってページを表示します。
const Blog = ({ posts, currentPage, totalPages }: Props) => {
return (
<div>
<h1>ブログ記事一覧</h1>
<ul>
{posts.map((post) => (
<li key={post.id}>{post.title}</li>
))}
</ul>
<Pagination currentPage={currentPage} totalPages={totalPages} />
</div>
)
}
export default Blog
これで、Blog コンポーネントにページネーションが実装されました。posts に表示する記事データが入り、currentPage と totalPages によってページネーションが制御されます。
動的なページ生成の設定
ページネーションによって生成される各ページに対応するために、Next.js の動的なページ生成機能を利用します。これにより、記事一覧ページの URL にパラメータを付与してアクセスすることができます。
getStaticPaths の設定
getStaticPaths を使って、動的に生成されるページのパスを設定します。
import { GetStaticPaths } from 'next'
export const getStaticPaths: GetStaticPaths = async () => {
const postsPerPage = 10
// 全記事数を取得 (例: APIからデータ取得)
const totalCount = await fetchTotalPosts()
const totalPages = Math.ceil(totalCount / postsPerPage)
const paths = Array.from({ length: totalPages }, (_, index) => ({
params: { page: (index + 1).toString() },
}))
return { paths, fallback: false }
}
これで、動的に生成されるページのパスが設定されました。fetchTotalPosts 関数は、全記事数を取得するために使用されます。API などのデータソースからデータを取得する関数を実装してください。
動的なページのファイル名設定
pages ディレクトリ内に、動的なページを生成するためのファイルを作成します。ファイル名は、[page].tsx としてください。
pages/
posts/
[page].tsxこれで、/posts/page/2 などの URL でページネーションされた記事一覧ページにアクセスできます。
まとめ
今回は、WordPress から Next.js に乗り換えた際のページネーションを Next.js と TypeScript を使って実装する方法を解説しました。getStaticProps と getStaticPaths を使ってデータ取得と動的なページ生成を行い、ページネーションコンポーネントを作成して表示する方法を紹介しました。
この方法を応用すれば、WordPress 以外のデータソースからもページネーションを実装することができます。さらに、デザインや機能をカスタマイズして、独自のページネーションを作成することも可能です。