Next.js Data Fetcher

A flexible data fetching system for Next.js applications that supports multiple data sources and file types.

Features

• Support for multiple data sources (JSON, CSV, API, custom)
• Server-side and client-side fetching with the same API
• Type-safe with TypeScript
• Caching for improved performance
• HOCs for easy integration with React components
• Toggle between server-side and client-side fetching dynamically

Installation

npm install @balajisk/nextjs-data-fetcher
# or
yarn add @balajisk/nextjs-data-fetcher

Setup

1. Organize Your Data

Ensure that your data source files (.json, .csv) are placed inside the data directory at the root of your Next.js project.

/project-root
  ├── data/
  │   ├── users.json
  │   ├── orders.csv
  ├── pages/
  ├── src/

2. Create an API Route for Data Fetching

Create an API route in api/data/route.ts to serve data from your data directory.

import { type NextRequest, NextResponse } from "next/server"
import fs from "fs/promises"
import path from "path"

export async function GET(request: NextRequest) {
  const type = request.nextUrl.searchParams.get("type")
  const fileType = request.nextUrl.searchParams.get("fileType") || "json" // Default to json if not specified

  if (!type) {
    return NextResponse.json({ error: "Type parameter is required" }, { status: 400 })
  }

  try {
    const cleanType = type.replace(/^\/api\/data\?type=/, "")
    const filePath = path.join(process.cwd(), "data", `${cleanType}.${fileType}`)

    const fileContents = await fs.readFile(filePath, "utf8")

    if (fileType === "json") {
      const data = JSON.parse(fileContents)
      return NextResponse.json(data)
    } else {
      return new Response(fileContents, {
        headers: {
          "Content-Type": getContentType(fileType),
        },
      })
    }
  } catch (error) {
    console.error(`Error fetching ${type} data:`, error)
    return NextResponse.json({ error: `Failed to fetch ${type} data` }, { status: 500 })
  }
}

function getContentType(fileType: string): string {
  switch (fileType.toLowerCase()) {
    case "json":
      return "application/json"
    case "csv":
      return "text/csv"
    case "xml":
      return "application/xml"
    case "yaml":
    case "yml":
      return "application/yaml"
    default:
      return "text/plain"
  }
}

3. Create a Fetcher Class

Define a fetcher class for each data type you need.

import { BaseFetcher } from "@balajisk/nextjs-data-fetcher";

interface User {
  id: number;
  name: string;
  email: string;
}

export class UserFetcher extends BaseFetcher<User> {
  protected type = "users";
  
  constructor() {
    super({
      type: "json",
      source: "users"
    });
  }
}

4. Register Fetchers

Register the fetchers in your application so they can be accessed easily.

import { FetcherRegistry } from "@balajisk/nextjs-data-fetcher";
import { UserFetcher } from "./UserFetcher";

const userFetcher = new UserFetcher();
FetcherRegistry.getInstance().register(userFetcher);

Client-Side Fetching

For client-side fetching, ensure that:

• You use useEffect or React Query to fetch data inside a component.
• You access data directly from the API endpoint.
• Fetching happens in the browser, which means it won't be preloaded on the server.
• Use HOCs like withClientFetching to wrap your components for easier integration.

Example:

import { withClientFetching } from "@balajisk/nextjs-data-fetcher";
import { UserList } from "./UserList";

const ClientUserList = withClientFetching(UserList, "users");

export default function ClientSideFetching() {
  return (
    <div>
      <h1>Users</h1>
      <ClientUserList />
    </div>
  );
}

Server-Side Fetching

For server-side fetching, ensure that:

• You use getServerSideProps or getStaticProps.
• The data is fetched before rendering the page.
• This improves SEO and reduces the number of client requests.
• Use HOCs like withServerFetching to wrap your components for easier integration.

Example:

import { withServerFetching } from "@balajisk
/nextjs-data-fetcher";
import { UserList } from "./UserList";

const ServerUserList = withServerFetching(UserList, "users");

// Use in your app
export default function Page() {
  return (
    <div>
      <h1>Users</h1>
      <ServerUserList />
    </div>
  );
}

This guide ensures clarity on how to set up data fetching, organize files, and integrate client-side and server-side data fetching seamlessly. 🚀