{"_id":"@balajisk/nextjs-data-fetcher","_rev":"2-9bf6a4b349aa393ba4911fad7cd2ae87","name":"@balajisk/nextjs-data-fetcher","dist-tags":{"latest":"3.0.0"},"versions":{"1.0.0":{"name":"@balajisk/nextjs-data-fetcher","version":"1.0.0","keywords":["nextjs","data-fetching","react","typescript"],"author":{"name":"Balaji S.K"},"license":"MIT","_id":"@balajisk/nextjs-data-fetcher@1.0.0","maintainers":[{"name":"balajisk","email":"skbalajiskb@gmail.com"}],"dist":{"shasum":"f076603d9d48261eaae88d6765e4b886e530421f","tarball":"https://registry.npmjs.org/@balajisk/nextjs-data-fetcher/-/nextjs-data-fetcher-1.0.0.tgz","fileCount":63,"integrity":"sha512-2Z8qhSGyzvXiHVVdx2jb4I6/W0d2emdpXNFMc064haXejXbW43HxzI/qLPk6ix9R7U2EaxH+6LkdwTCIEs7WnA==","signatures":[{"sig":"MEUCIFx9gIdvNgotl8ynwYiSDr/BYfKecY5T/Iz8M6SzfPzKAiEAr175f+t/yd1M9NPv7Q1q/WjyuPqSeANHHv7PQNmnmYk=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":282442},"main":"dist/index.js","types":"dist/index.d.ts","private":false,"scripts":{"dev":"tsc --watch","build":"tsc","prepublishOnly":"npm run build"},"_npmUser":{"name":"balajisk","email":"skbalajiskb@gmail.com"},"_npmVersion":"10.5.0","description":"A flexible data fetching system for Next.js applications","directories":{},"_nodeVersion":"20.12.2","dependencies":{"csv-parse":"^5.5.0","papaparse":"^5.4.1"},"_hasShrinkwrap":false,"devDependencies":{"postcss":"^8","typescript":"^5.1.6","@types/node":"^22","tailwindcss":"^3.4.17","@types/react":"^18","@types/papaparse":"^5.3.15","@types/react-dom":"^18"},"peerDependencies":{"next":">=14.0.0","react":">=18.0.0","react-dom":">=18.0.0","@mui/material":"^5"},"_npmOperationalInternal":{"tmp":"tmp/nextjs-data-fetcher_1.0.0_1741088216942_0.6141565357147412","host":"s3://npm-registry-packages-npm-production"}},"2.0.0":{"name":"@balajisk/nextjs-data-fetcher","version":"2.0.0","keywords":["nextjs","data-fetching","react","typescript"],"author":{"name":"Balaji S.K"},"license":"MIT","_id":"@balajisk/nextjs-data-fetcher@2.0.0","maintainers":[{"name":"balajisk","email":"skbalajiskb@gmail.com"}],"dist":{"shasum":"4865b2d7db4e46294507c24b5ef21083f0c961cc","tarball":"https://registry.npmjs.org/@balajisk/nextjs-data-fetcher/-/nextjs-data-fetcher-2.0.0.tgz","fileCount":60,"integrity":"sha512-k5QOmJ/msPm3FeJ5Z7YHtPQFvLRsJYtoLIxmKeN72zL0YaPMJAC8ESlY/465mlGW7t/P0BkZY91XoMuGe2oCYA==","signatures":[{"sig":"MEQCIDnU47rkyfqntYsbFW/Lq+uIlIrCzvGsF96cMjXEBUioAiAcGW4omC8hPCVxNCh9lXNfTl11oc14nbmu8q4YPnvkLw==","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":53628},"main":"dist/index.js","types":"dist/index.d.ts","module":"dist/index.mjs","private":false,"scripts":{"dev":"tsc --watch","build":"tsc","prepublishOnly":"npm run build"},"_npmUser":{"name":"balajisk","email":"skbalajiskb@gmail.com"},"_npmVersion":"10.5.0","description":"A flexible data fetching system for Next.js applications","directories":{},"_nodeVersion":"20.12.2","dependencies":{"csv-parse":"^5.5.0","papaparse":"^5.4.1"},"_hasShrinkwrap":false,"devDependencies":{"postcss":"^8","typescript":"^5.1.6","@types/node":"^22","tailwindcss":"^3.4.17","@types/react":"^18","@types/papaparse":"^5.3.15","@types/react-dom":"^18"},"peerDependencies":{"next":">=13.0.0","react":">=18.0.0","react-dom":">=18.0.0","@mui/material":"^5"},"_npmOperationalInternal":{"tmp":"tmp/nextjs-data-fetcher_2.0.0_1741114565790_0.026929972773971578","host":"s3://npm-registry-packages-npm-production"}},"3.0.0":{"name":"@balajisk/nextjs-data-fetcher","version":"3.0.0","private":false,"description":"A flexible data fetching system for Next.js applications","main":"dist/index.js","types":"dist/index.d.ts","module":"dist/index.mjs","scripts":{"dev":"tsc --watch","build":"tsc","prepublishOnly":"npm run build"},"keywords":["nextjs","data-fetching","react","typescript"],"author":{"name":"Balaji S.K"},"license":"MIT","dependencies":{"csv-parse":"^5.5.0","papaparse":"^5.4.1"},"peerDependencies":{"next":">=13.0.0","react":">=18.0.0","react-dom":">=18.0.0","@mui/material":"^5"},"devDependencies":{"typescript":"^5.1.6","@types/node":"^22","@types/papaparse":"^5.3.15","@types/react":"^18","@types/react-dom":"^18","postcss":"^8","tailwindcss":"^3.4.17"},"_id":"@balajisk/nextjs-data-fetcher@3.0.0","_nodeVersion":"20.12.2","_npmVersion":"10.5.0","dist":{"integrity":"sha512-wK0QUsQBU4bnkdIswpRlBoTr6F9bqvVGrAm+AveRkkv+S3EzhBtHDmYxm6dW6yHJv52jum1zG1qEk3lMvuOSTw==","shasum":"0ef73c4c4168eb598b87aab6f0f406856824c731","tarball":"https://registry.npmjs.org/@balajisk/nextjs-data-fetcher/-/nextjs-data-fetcher-3.0.0.tgz","fileCount":60,"unpackedSize":53647,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEYCIQCzh29glPWjfatzcy3Fuf2ClfWcoTNOsmzJBTIy4op1mAIhAIxr8qqdBSfjCI4Olb8ubU01ciS5qlQ+ayo9GuF9HwoV"}]},"_npmUser":{"name":"balajisk","email":"skbalajiskb@gmail.com"},"directories":{},"maintainers":[{"name":"balajisk","email":"skbalajiskb@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/nextjs-data-fetcher_3.0.0_1741115739911_0.8785722900526531"},"_hasShrinkwrap":false}},"time":{"created":"2025-03-04T11:36:56.889Z","modified":"2025-03-04T19:15:40.282Z","1.0.0":"2025-03-04T11:36:57.122Z","2.0.0":"2025-03-04T18:56:05.974Z","3.0.0":"2025-03-04T19:15:40.119Z"},"author":{"name":"Balaji S.K"},"license":"MIT","keywords":["nextjs","data-fetching","react","typescript"],"description":"A flexible data fetching system for Next.js applications","maintainers":[{"name":"balajisk","email":"skbalajiskb@gmail.com"}],"readme":"# Next.js Data Fetcher\n\nA flexible data fetching system for Next.js applications that supports multiple data sources and file types.\n\n## Features\n\n- Support for multiple data sources (JSON, CSV, API, custom)\n- Server-side and client-side fetching with the same API\n- Type-safe with TypeScript\n- Caching for improved performance\n- HOCs for easy integration with React components\n- Toggle between server-side and client-side fetching dynamically\n\n## Installation\n\n```bash\nnpm install @balajisk/nextjs-data-fetcher\n# or\nyarn add @balajisk/nextjs-data-fetcher\n```\n\n## Setup\n\n### 1. Organize Your Data\nEnsure that your data source files (`.json`, `.csv`) are placed inside the `data` directory at the root of your Next.js project.\n\n```\n/project-root\n  ├── data/\n  │   ├── users.json\n  │   ├── orders.csv\n  ├── pages/\n  ├── src/\n```\n\n### 2. Create an API Route for Data Fetching\nCreate an API route in `api/data/route.ts` to serve data from your `data` directory.\n\n```ts\nimport { type NextRequest, NextResponse } from \"next/server\"\nimport fs from \"fs/promises\"\nimport path from \"path\"\n\nexport async function GET(request: NextRequest) {\n  const type = request.nextUrl.searchParams.get(\"type\")\n  const fileType = request.nextUrl.searchParams.get(\"fileType\") || \"json\" // Default to json if not specified\n\n  if (!type) {\n    return NextResponse.json({ error: \"Type parameter is required\" }, { status: 400 })\n  }\n\n  try {\n    const cleanType = type.replace(/^\\/api\\/data\\?type=/, \"\")\n    const filePath = path.join(process.cwd(), \"data\", `${cleanType}.${fileType}`)\n\n    const fileContents = await fs.readFile(filePath, \"utf8\")\n\n    if (fileType === \"json\") {\n      const data = JSON.parse(fileContents)\n      return NextResponse.json(data)\n    } else {\n      return new Response(fileContents, {\n        headers: {\n          \"Content-Type\": getContentType(fileType),\n        },\n      })\n    }\n  } catch (error) {\n    console.error(`Error fetching ${type} data:`, error)\n    return NextResponse.json({ error: `Failed to fetch ${type} data` }, { status: 500 })\n  }\n}\n\nfunction getContentType(fileType: string): string {\n  switch (fileType.toLowerCase()) {\n    case \"json\":\n      return \"application/json\"\n    case \"csv\":\n      return \"text/csv\"\n    case \"xml\":\n      return \"application/xml\"\n    case \"yaml\":\n    case \"yml\":\n      return \"application/yaml\"\n    default:\n      return \"text/plain\"\n  }\n}\n```\n\n### 3. Create a Fetcher Class\nDefine a fetcher class for each data type you need.\n\n```ts\nimport { BaseFetcher } from \"@balajisk/nextjs-data-fetcher\";\n\ninterface User {\n  id: number;\n  name: string;\n  email: string;\n}\n\nexport class UserFetcher extends BaseFetcher<User> {\n  protected type = \"users\";\n  \n  constructor() {\n    super({\n      type: \"json\",\n      source: \"users\"\n    });\n  }\n}\n```\n\n### 4. Register Fetchers\nRegister the fetchers in your application so they can be accessed easily.\n\n```ts\nimport { FetcherRegistry } from \"@balajisk/nextjs-data-fetcher\";\nimport { UserFetcher } from \"./UserFetcher\";\n\nconst userFetcher = new UserFetcher();\nFetcherRegistry.getInstance().register(userFetcher);\n```\n\n## Client-Side Fetching\n\nFor client-side fetching, ensure that:\n- You use `useEffect` or React Query to fetch data inside a component.\n- You access data directly from the API endpoint.\n- Fetching happens in the browser, which means it won't be preloaded on the server.\n- Use HOCs like `withClientFetching` to wrap your components for easier integration.\n\nExample:\n\n```tsx\nimport { withClientFetching } from \"@balajisk/nextjs-data-fetcher\";\nimport { UserList } from \"./UserList\";\n\nconst ClientUserList = withClientFetching(UserList, \"users\");\n\nexport default function ClientSideFetching() {\n  return (\n    <div>\n      <h1>Users</h1>\n      <ClientUserList />\n    </div>\n  );\n}\n```\n\n## Server-Side Fetching\n\nFor server-side fetching, ensure that:\n- You use `getServerSideProps` or `getStaticProps`.\n- The data is fetched before rendering the page.\n- This improves SEO and reduces the number of client requests.\n- Use HOCs like `withServerFetching` to wrap your components for easier integration.\n\nExample:\n\n```tsx\nimport { withServerFetching } from \"@balajisk\n/nextjs-data-fetcher\";\nimport { UserList } from \"./UserList\";\n\nconst ServerUserList = withServerFetching(UserList, \"users\");\n\n// Use in your app\nexport default function Page() {\n  return (\n    <div>\n      <h1>Users</h1>\n      <ServerUserList />\n    </div>\n  );\n}\n```\n\nThis guide ensures clarity on how to set up data fetching, organize files, and integrate client-side and server-side data fetching seamlessly. 🚀\n\n","readmeFilename":"README.md"}