{"repo":"ricokahler/next-data-hooks","free":true,"listed":false,"github":"https://github.com/ricokahler/next-data-hooks","clone":"git clone https://github.com/ricokahler/next-data-hooks.git","description":"Use `getStaticProps`/`getServerSideProps` as react-hooks","language":"TypeScript","stars":715,"topics":["nextjs","react-hooks"],"license":"MIT","category":"saas-starters-boilerplates","readme_excerpt":"next-data-hooks · Use getStaticProps and getServerSideProps as react hooks next-data-hooks is a small and simple lib that lets you write React hooks for data queries in Next.js by lifting static props into React Context. Why? 1. Writing one large query per page doesn't organize well. Asynchronous data fetching frameworks like apollo, relay, and react-query already allow you to write the queries closer to the component. Why can't static data queries be written closer to the component too? 2. Works better with TypeScript — when you import a data hook, you're also importing its return type. When you call the hook inside your component, the types are already there. Why not? The primary thing this library offers is a pattern organizing getStaticProps / getServerSideProps . ⚠️ Note: It does not offer any more capabilities than vanilla Next.js. See this question: Why aren't the data hooks parameterized? Example See the example in this repo for some ideas on how to organize your static data calls using this hook. Installation 1. Install or 2. Add the babel plugin At the root, add a .babelrc file that contains the following: ⚠️ Don't forget this step. This enables code elimination to eliminate server-side code in client code. 3. Add the provider to app.tsx or app.js Usage 1. Create a data hook. This can be in the same file as the component you're using it in or anywhere else. TypeScript User? Note: For TypeScript users, if you're planning on only using the data hook in the context of ","default_branch":null,"files":null,"tree":[],"storefront":"/r/ricokahler","claimed":false,"request_supported":{"post":"https://gitbuyer.com/r/ricokahler/next-data-hooks/request-supported","requests":0},"note":"indexed from public GitHub; nothing is for sale on this page. Clone it from GitHub. Paid listings live at /search."}