# @etchteam/next-pagination 中文文档

规范地址：https://npmcn.com/package/%40etchteam/next-pagination/

版本：3\.5\.5
npm 元数据更新时间：2025-05-30T12:57:24.611Z
中文译文更新时间：2026-11-14T08:10:43.569Z
软件包许可：MIT

本文由上游 README 翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。

原始 npm 页面：https://www.npmjs.com/package/%40etchteam/next-pagination
原文对照：https://npmcn.com/package/%40etchteam/next-pagination/?lang=original
项目主页：https://github.com/etchteam/next-pagination#readme
源码仓库：https://github.com/etchteam/next-pagination

## 关键信息（来自 npm 元数据）

- 包体积（解压后）：323 kB，16 个文件
- 模块格式：ESM + CJS
- TypeScript 类型：包内自带
- Node.js 要求：\>=10
- 运行依赖：3 个
- peer 依赖：next \>=10，react \>=16
- 首次发布：2022-01-04T17:16:38.541Z
- 最新版本发布：2023-03-02T09:36:29.691Z
- 近 30 天下载量：2107（2026-10-14 至 2026-11-12，npm 官方下载统计）
- 已发布版本数：9（近 12 个月 0 个）

## 中文简介

Next.js apps 的加固组件

## 安装

```sh
npm install @etchteam/next-pagination
```

也可以使用：`pnpm add @etchteam/next-pagination`、`yarn add @etchteam/next-pagination`、`bun add @etchteam/next-pagination`

## README

# 下一个修补

> 最好的东西 下一个.js

[![NPM](https://img.shields.io/npm/v/@etchteam/next-pagination.svg)](https://www.npmjs.com/package/@etchteam/next-pagination) [![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com/)

TL; DR 数据 给我看看 [德莫尔](https://etchteam.github.io/next-pagination)

![An example of the pagination UI in use](https://raw.githubusercontent.com/etchteam/next-pagination/master/example/public/example.png)

## 为什么要使用这个帕吉尼通模块?

-   **无障碍.** 语义 HTML 并完全标出适当的 aria 角色来辅助浏览.
-   **可使用 .** 基础 CSS 样式用于键盘聚焦状态和脂肪指触目标.
-   **相应相.** 所有设备都有用.
-   **有主题的.** 随你怎么说.
-   **自我约束.** 出发只需要一个道具 其余的逻辑都是为你处理的.
-   **与下个.** 与 Next.js 路由器集成.

## 安装

```bash
npm install --save @etchteam/next-pagination
```

## 使用量

这部分是相当自我控制的。 你需要通过 **潜在成果总数** 以计算要显示的页数.

```jsx
import React, { Component } from 'react'

import Pagination from '@etchteam/next-pagination'

class Example extends Component {
  render() {
    return <Pagination total={1000} />
  }
}
```

您需要导入 CSS, 无论是在您的 `_app.js`或者在你的萨斯大楼里.

```jsx
import '@etchteam/next-pagination/dist/index.css'
```

使用时,pagination组件会用添加的pagination查询参数来重新装入相同的路由.

-   `page` 的页码.
-   `size` 每页结果数.

例如:page=4和大小=20

这个 **默认页面** 为 1 **默认大小** 20岁.

你需要自己从API中装入实际数据. 我们只为前端而来!

## 道具

| 名称 | 类型 | 说明 |
| --- | --- | --- |
| `total` | `Number` | **要求.** 页面总数. |
| `theme` | `Object` | CSS 模块样式对象 . |
| `sizes` | `Array` | 页面大小数组 |
| `perPageText` | `String` | 页面大小下拉的标签 |
| `setPageSizeText` | `String` | 隐形页面大小按钮的标签 |
| `linkProps` | `Object` | 额外道具传递给下一个. js 链接 |

## 他们

下一个.js 本地支持 **CSS 模块**,因此此组件支持注入 CSS 模块样式.

导入正常组件的样式, 但通过它们作为道具 .

```jsx
[...]
import styles from '/my/path/to/styles.module.css'

class Example extends Component {
  render() {
    return <Pagination total={1000} theme={styles} />
  }
}
```

主题使用 BEM 类与基类命名 `next-pagination`。文件 `/src/index.module.scss` 应该给你一个可靠的 需要什么.

## 贡献

此软件包创建于 [创建-反应-图书馆](https://github.com/transitive-bullshit/create-react-library#readme)。 。 。 .

### 设置

要装好你就得跑 `npm install && cd example && npm install`

## 发展

在根文件夹中,运行 `npm run start` **同时**,在示例文件夹中,运行 `npm run dev` 然后去那边 `localhost:3000` 以看到实例运行.

## 部署实例

在根文件夹中运行 `npm run deploy` 将示例用于在 `gh-pages` 钱的分枝.

## 发布到 npm

自信吗? 运行 `npm publish` 发送最新版本到 npm.

## 许可证

麻省理工学院 [团队](https://github.com/etchteam)

## 常见问题

### @etchteam/next-pagination 是什么？

Next\.js apps 的加固组件

### 如何安装 @etchteam/next-pagination？

在项目目录运行 npm install @etchteam/next-pagination，或使用 pnpm add / yarn add / bun add。它还需要宿主项目提供 peer 依赖：next（\>=10）、react（\>=16）。npm 7 及以上与 pnpm 8 及以上默认会自动安装必需的 peer 依赖，Yarn 需要手动安装。

### @etchteam/next-pagination 支持 TypeScript 吗？

支持。包内自带 TypeScript 类型声明（package\.json 声明了 types 入口），安装后即可获得类型提示，无需再安装 @types 包。

### @etchteam/next-pagination 支持 ESM 还是 CommonJS？

同时提供 ES Module 与 CommonJS 入口，import 和 require\(\) 都可以使用，打包工具会自动选择合适的版本。

### @etchteam/next-pagination 需要什么版本的 Node\.js？

package\.json 的 engines 字段要求 Node\.js \>=10。版本不符时 npm 默认只给出警告，开启 engine-strict 后会拒绝安装。

### @etchteam/next-pagination 可以商用吗？

@etchteam/next-pagination 使用 MIT 许可。宽松许可：允许商业使用、修改和再分发，通常只需在分发时保留原版权与许可声明。以上为概括，不构成法律意见，请以许可原文为准。

### @etchteam/next-pagination 的下载量有多少？

根据 npm 官方下载统计，@etchteam/next-pagination 在 2026/10/14 – 2026/11/12 这 30 天内被下载 2,107 次，日均约 70 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。

### @etchteam/next-pagination 还在维护吗？

最新版本 3\.5\.5 发布于 2023/03/02（3 年前）；至今共发布 9 个版本，其中过去 12 个月发布了 0 个；首次发布于 2022/01/05。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。