https://github.com/markslorach/server-side-pagination-next.js
Server-Side Pagination for Next.js App Router Projects.
https://github.com/markslorach/server-side-pagination-next.js
nextjs pagination typescript
Last synced: 2 months ago
JSON representation
Server-Side Pagination for Next.js App Router Projects.
- Host: GitHub
- URL: https://github.com/markslorach/server-side-pagination-next.js
- Owner: markslorach
- Created: 2024-05-11T13:10:58.000Z (about 2 years ago)
- Default Branch: main
- Last Pushed: 2024-05-12T10:38:51.000Z (about 2 years ago)
- Last Synced: 2025-10-13T21:03:43.696Z (9 months ago)
- Topics: nextjs, pagination, typescript
- Language: TypeScript
- Homepage:
- Size: 530 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Server-Side Pagination for Next.js App Router Projects
Pagination component and example project for server-side pagination within Next.js App Router projects.
**Key Features**
- **Server-side Pagination:** Paginates datasets by fetching data on the server and rendering only the necessary subset for each page.
- **Next.js App Router:** Utilises the App Router for routing and navigation within the Next.js application.
- **Custom Pagination Component:** Includes a reusable Pagination component to manage page navigation and display current page information.
**How to Use**
1. **Clone the Repository:**
```bash
git clone https://github.com/markslorach/pagination-next.js.git
```
2. **Install Dependencies:**
```bash
npm install
```
3. **Run the Development Server:**
```bash
npm run dev
```
View project on http://localhost:3000/
**Project Structure**
- `app/page.tsx`: Main page component that handles data fetching and pagination logic.
- `components/Pagination.tsx`: Reusable Pagination component.
- `db/exampleData.ts`: Example data used for demonstration.
Project uses Shadcn/ui for the example data table and pagination component buttons.
