$3

A powerful and flexible data fetching library for Next.js applications, supporting both client and server components with built-in caching, pagination, and real-time updates.


Features

- 🔄 Universal Data Fetching: Works with both client and server components
- 🚀 React Server Components Support: Optimized for Next.js App Router
- 📊 Multiple Data Sources: JSON, CSV, TXT, and external APIs
- 📱 Responsive UI Components: Ready-to-use data display components
- 🔄 Real-time Updates: Built-in support for real-time data changes
- 📄 Pagination: Built-in pagination support
- 🧩 Modular Architecture: Easily extensible for custom data sources
- 🔒 Type Safety: Written in TypeScript with full type definitions

Installation

``shellscript
npm install next-data-fetcher


or

Create data files in your project (e.g., in app/data/):

`json
// app/data/users.json
[
{
"id": 1,
"name": "John Doe",
"email": "john@example.com"
},
{
"id": 2,
"name": "Jane Smith",
"email": "jane@example.com"
}
]
`

$3

`typescript
// app/api/data/route.ts
import { type NextRequest, NextResponse } from "next/server";
import fs from "fs";
import path from "path";

export async function GET(request: NextRequest) {
const searchParams = request.nextUrl.searchParams;
const component = searchParams.get("component");
const dataSource = searchParams.get("dataSource") || "json";
const page = Number.parseInt(searchParams.get("page") || "1", 10);
const limit = Number.parseInt(searchParams.get("limit") || "0", 10);

if (!component) {
return NextResponse.json({ error: "Component parameter is required" }, { status: 400 });
}

try {
// Read data from files based on component and dataSource
const fileName = component.replace("Data", "").toLowerCase();
const extension = dataSource === "json" ? "json" : dataSource === "csv" ? "csv" : "txt";
const filePath = path.join(process.cwd(), "app/data", ${fileName}s.${extension});

let data;
if (dataSource === "json") {
const fileContent = fs.readFileSync(filePath, "utf8");
data = JSON.parse(fileContent);
} else if (dataSource === "csv" || dataSource === "txt") {
const fileContent = fs.readFileSync(filePath, "utf8");
data = fileContent;
}

// Handle pagination
let paginatedData = data;
const totalItems = Array.isArray(data) ? data.length : 0;

if (limit > 0 && Array.isArray(data)) {
const startIndex = (page - 1) * limit;
paginatedData = data.slice(startIndex, startIndex + limit);
}

// Return appropriate response
if (dataSource === "json") {
return NextResponse.json({
data: paginatedData,
pagination: limit > 0
? {
page,
limit,
totalItems,
totalPages: Math.ceil(totalItems / limit),
}
: null,
});
} else {
return new NextResponse(data, {
headers: {
"Content-Type": dataSource === "csv" ? "text/csv" : "text/plain",
},
});
}
} catch (error: any) {
return NextResponse.json({ error: error.message || "Failed to fetch data" }, { status: 500 });
}
}
`

$3

`typescript
// app/fetchers/UserDataFetcher.ts
import { BaseFetcher, type DataSourceType } from "next-data-fetcher";

export interface User {
id: number;
name: string;
email: string;
[key: string]: any; // Allow for dynamic fields
}

export class UserDataFetcher extends BaseFetcher {
constructor(dataSource: DataSourceType = "json") {
super({
componentId: "UserData",
dataSource,
endpoint: dataSource === "api" ? "https://jsonplaceholder.typicode.com/users" : undefined,
});
}

parseData(data: any): User[] {
if (Array.isArray(data)) {
return data.map((user) => {
// Create a base user object with required fields
const baseUser: User = {
id: typeof user.id === "number" ? user.id : Number.parseInt(user.id) || 0,
name: user.name || "Unknown",
email: user.email || "No email",
};

// Add any additional fields dynamically
for (const key in user) {
if (!baseUser.hasOwnProperty(key)) {
baseUser[key] = user[key];
}
}

return baseUser;
});
}

return [];
}
}
`

$3

`typescriptreact
// app/components/UserList.tsx
import { DynamicListRenderer } from "next-data-fetcher";
import type { User } from "../fetchers/UserDataFetcher";

interface UserListProps {
data?: User[];
}

export function UserList({ data = [] }: UserListProps) {
return (
data={data}
title="User List"
priorityFields={["name", "email"]}
excludeFields={["_id"]}
itemsPerPage={5}
/>
);
}
`

$3

`typescriptreact
// app/components/ServerUserList.tsx
import { withServerFetching } from "next-data-fetcher";
import { UserList } from "./UserList";
import { UserDataFetcher } from "../fetchers/UserDataFetcher";
import { FetcherRegistry } from "next-data-fetcher";

// Register the fetcher (do this in a place that runs on the server)
const registry = FetcherRegistry.getInstance();
registry.register("UserData", new UserDataFetcher("json"));

// Create a server component using withServerFetching
const ServerUserList = withServerFetching(UserList, "UserData");

export default ServerUserList;
`

$3

`typescriptreact
// app/components/ClientUserList.tsx
"use client";

import { withClientFetching } from "next-data-fetcher";
import { UserList } from "./UserList";
import { useEffect } from "react";
import { UserDataFetcher } from "../fetchers/UserDataFetcher";
import { FetcherRegistry } from "next-data-fetcher";

// Create a client component using withClientFetching
const ClientUserList = withClientFetching(UserList, "UserData");

export function ClientUserListWrapper() {
useEffect(() => {
// Register the fetcher on the client
const registry = FetcherRegistry.getInstance();
registry.register("UserData", new UserDataFetcher("json"));
}, []);

return ;
}
`

$3

`typescriptreact
// app/page.tsx
import { Suspense } from "react";
import ServerUserList from "./components/ServerUserList";
import { ClientUserListWrapper } from "./components/ClientUserList";

export default function Home() {
return (