diff --git a/README.md b/README.md
index c827291c..a0cc440f 100644
--- a/README.md
+++ b/README.md
@@ -1,21 +1,21 @@
# next-data-hooks · [![codecov](https://codecov.io/gh/ricokahler/next-data-hooks/branch/main/graph/badge.svg)](https://codecov.io/gh/ricokahler/next-data-hooks) [![github status checks](https://badgen.net/github/checks/ricokahler/next-data-hooks/main)](https://github.com/ricokahler/next-data-hooks/actions) [![bundlephobia](https://badgen.net/bundlephobia/minzip/next-data-hooks)](https://bundlephobia.com/result?p=next-data-hooks)
-> Use `getStaticProps` as react hooks
+> Use `getStaticProps` and `getServerSideProps` as react hooks
-`next-data-hooks` is a small and simple lib that lets you write React hooks for static data queries in Next.js by lifting static props into React Context.
+`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.
```js
import { createDataHook } from 'next-data-hooks';
const useBlogPost = createDataHook('BlogPost', async (context) => {
const { slug } = context.params;
-
- return // ... get the blog post
+
+ return; // ... get the blog post
});
function BlogPost() {
const { title, content } = useBlogPost();
-
+
return (
<>
{title}
@@ -62,6 +62,7 @@ At the root, add a `.babelrc` file that contains the following:
"plugins": ["next-data-hooks/babel"]
}
```
+
> ⚠️ Don't forget this step. This enables [**code elimination**](#code-elimination) to eliminate server-side code in client code.
3. Add the provider to `_app.tsx` or `_app.js`
@@ -145,6 +146,7 @@ export const getStaticPaths: GetStaticPaths = async (context) => {
// return static paths...
};
+// NOTE: this will also work with `getServerSideProps`
export const getStaticProps: GetStaticProps = async (context) => {
const dataHooksProps = await getDataHooksProps({
context,
@@ -231,7 +233,7 @@ function BlogPost() {
);
}
-BlogPost.dataHooks = [useBlogPostData]
+BlogPost.dataHooks = [useBlogPostData];
export default BlogPost;
```
diff --git a/package-lock.json b/package-lock.json
index 6f30b462..9e6bacac 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,6 +1,6 @@
{
"name": "next-data-hooks",
- "version": "0.3.0",
+ "version": "0.4.0",
"lockfileVersion": 1,
"requires": true,
"dependencies": {
diff --git a/package.json b/package.json
index 3b4bdca3..07bffb17 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
{
"name": "next-data-hooks",
- "version": "0.3.0",
+ "version": "0.4.0",
"description": "Use `getStaticProps` as react hooks",
"private": true,
"scripts": {
diff --git a/src/create-data-hook.ts b/src/create-data-hook.ts
index 834a2aef..34a86f72 100644
--- a/src/create-data-hook.ts
+++ b/src/create-data-hook.ts
@@ -1,5 +1,5 @@
import { useContext } from 'react';
-import { GetStaticPropsContext } from 'next';
+import { GetStaticPropsContext, GetServerSidePropsContext } from 'next';
import NextDataHooksContext from './next-data-hooks-context';
const stub = () => {
@@ -17,7 +17,9 @@ const stub = () => {
*/
function createDataHook(
key: string,
- getData: (variables: GetStaticPropsContext) => Promise
+ getData: (
+ variables: GetStaticPropsContext | GetServerSidePropsContext
+ ) => Promise
) {
function useData(): R {
const dataHooksContext = useContext(NextDataHooksContext);