next-data-hooks is a TypeScript library that enables developers to use Next.js's getStaticProps and getServerSideProps functions as React hooks. The library addresses a specific organizational challenge in Next.js development by allowing data fetching logic to be written closer to the components that consume it, rather than centralizing all data queries in a single page-level function. This approach mirrors the pattern already established by asynchronous data fetching frameworks like Apollo, Relay, and React Query, which have long allowed developers to colocate queries with their consuming components.
The core motivation behind next-data-hooks stems from two primary concerns. First, writing one large query per page does not scale well organizationally as applications grow in complexity. Second, the library provides better TypeScript integration because importing a data hook automatically imports its return type, making types available immediately when the hook is called within a component. The library explicitly acknowledges its limitations, noting that it does not offer any capabilities beyond vanilla Next.js but rather provides a pattern for better organizing existing Next.js functionality.
The library is written in TypeScript and is classified across multiple domains including React, Next.js, data fetching, hooks, server-side rendering, and static generation. According to GitGenius activity data, the repository has overlapping contributors with apollographql/apollo-client, toeverything/affine, and apollographql/apollo-server, indicating connections to the broader ecosystem of data fetching and GraphQL tools.
Implementation of next-data-hooks requires three main steps. Developers must install the package, add a Babel plugin to their project configuration via a .babelrc file, and add a provider to their _app.tsx or _app.js file. The Babel plugin step is critical because it enables code elimination, a feature that removes server-side code from client bundles. The library accomplishes this by prefixing data hook definitions with a typeof window check that Next.js pre-evaluates, allowing Terser to shake away unused server-side code from browser bundles.
Usage involves creating data hooks that can be defined in the same file as their consuming components or elsewhere in the codebase. These hooks are then used within components and passed down through getStaticProps or getServerSideProps. The library supports composing multiple data hooks together, allowing developers to organize their data fetching logic hierarchically.
The repository includes an example project demonstrating how to organize static data calls using the hook pattern. A particularly useful organizational pattern documented in the library involves creating a separate routes directory outside of the pages folder, treating pages as entry points while organizing actual page components and their associated data hooks elsewhere. This pattern leverages next-data-hooks to work well with more flexible project structures than Next.js's default file-based routing would typically allow.
Each data hook exposes a getData method that can be reused within other data hooks, enabling composition and code reuse across data fetching logic. The library includes TypeScript support with a provided type guard called isServerSidePropsContext that helps developers narrow context types when using data hooks exclusively within getServerSideProps contexts.
