MUIは非常に便利なライブラリでかっこいいコンポーネントが一通り揃っていますしドキュメントも充実しています。
さすが天下のGoogleさんです。
ただ、使ってみると思うのですがMUIのコンポーネント自体は非常に豊富な機能を有している一方、ドキュメントに関しては案外痒いところに手が届かない説明になっていたりします。
今回は自分と同じ痒さを患っている方の手助けをするためにも、Next.jsのLinkコンポーネントとMUIのPaginationコンポーネントを使った簡単なページネーションの実装方法を書き残します。
実際の動きを見たい方はこのブログのホームを見てみてください。
また、今回の実装の内容は私のgithubにおいてあるので、全貌を知りたい方は参照してみてください。
環境
- OS: Ubuntu 20.04.3 LTS
- Node: 16.13.1
- next: 12.1.5
- @mui/material: 5.6.2
事前準備
Next.jsアプリの作成
まずターミナルから適当な空ディレクトリを作り、そこに入ります。
mkdir pagination-sample
cd pagination-sample
次に、Next.jsアプリを作るために次のコマンドをターミナルで実行します。
yarn create next-app .
create next-appの引数はアプリ名を指すので.をつけることで当該ディレクトリに諸々のファイルを展開できます。
試しに次のコマンドを実行すれば下の画像のような画面をブラウザに表示することができます。
yarn dev
MUIのインストール
MUIのインストールは公式に従って次のコマンドを実行します。
yarn add @mui/material @emotion/react @emotion/styled
実装
基本的なページネーションの実装
pagesと同じディレクトリにcomponents/Pagination.jsxを作ります。
mkdir components
touch Pagination.jsx
Paginationは次のように実装ができます。
import { Link as MuiLink, Pagination as MuiPagination, PaginationItem } from '@mui/material'
const Pagination = ({ pageNumber, totalCount }) => {
return (
<MuiPagination
page={pageNumber}
count={totalCount}
renderItem={item => (
<PaginationItem
component={MuiLink}
href={item.page === 1 ? `/` : `/${item.page}`}
{...item}
/>
)}
/>
)
}
export default Pagination
引数のpageNumberは現在のページ数、totalCountは最後のページのページ番号を表しています。
注意としては、PaginationItemのpageは1から始まるので1ページめをホームにしたい場合は上のような書き方をします。
これを実際に動かすと次のようになります。
next/linkと組み合わせる
次にNext.jsのルーティング用コンポーネントのnext/linkと組み合わせてみます。
といっても、そんなに難しい話ではなく、ただPaginationItemをnext/linkでラップすればよいだけです。
import { Link as MuiLink, Pagination as MuiPagination, PaginationItem } from '@mui/material'
import Link from 'next/link'
const Pagination = ({ pageNumber, totalCount }) => {
return (
<MuiPagination
page={pageNumber}
count={totalCount}
renderItem={item => (
<Link href={item.page === 1 ? `/` : `/${item.page}`} passHref>
<PaginationItem
{...item}
component={MuiLink}
/>
</Link>
)}
/>
)
}
export default Pagination
注意としてはLinkコンポーネントにpassHrefを入れています。
これはラップされているaタグ（MuiLinkコンポーネント）にhref属性を渡すためです。
というのも、aタグがhref属性を持っていないのはSEO的に不利らしいので、多くの場合next/linkでaタグをラップする場合にはpassHrefをTrueにします。
このときのPaginationの動きは次のようになります。
まとめ
今回はMUIのPaginationコンポーネントとNextのLinkコンポーネントを使って簡単なページネーション機能を実装しました。
MUIを使うとおしゃれなUIが簡単に作れるので本当に便利ですね。
これからもおせわになりそうです。
なお、今回の実装はMUIの公式ドキュメントを参考にしています。
気になる方は参照してみてください。
