next data hooks
v0.5.1
getStaticPropsとgetServerSideProps反応フックとして使用します
next-data-hooksは小さくてシンプルなLIBで、静的プロップをReactコンテキストに持ち上げることにより、next.jsのデータクエリのReactフックを書くことができます。
import { createDataHook } from 'next-data-hooks' ;
const useBlogPost = createDataHook ( 'BlogPost' , async ( context ) => {
const { slug } = context . params ;
return ; // ... get the blog post
} ) ;
function BlogPost ( ) {
const { title , content } = useBlogPost ( ) ;
return (
< >
< h1 > { title } </ h1 >
< p > { content } </ p >
</ >
) ;
}
BlogPost . dataHooks = [ useBlogPost ] ;
export default BlogPost ; このライブラリが提供する主なものは、 getStaticProps / getServerSidePropsを整理するパターンです。
この質問を参照してください：なぜデータフックがパラメーター化されないのですか？
このフックを使用して静的データコールを整理する方法に関するいくつかのアイデアについては、このレポの例を参照してください。
npm i next-data-hooks
または
yarn add next-data-hooks
ルートで、以下を含む.babelrcファイルを追加します。
{
"presets" : [ " next/babel " ],
"plugins" : [ " next-data-hooks/babel " ]
}
ショ和 このステップを忘れないでください。これにより、コード除去がクライアントコードでサーバー側のコードを排除できるようになります。
_app.tsxまたは_app.jsに追加します import { AppProps } from 'next/app' ;
import { NextDataHooksProvider } from 'next-data-hooks' ;
function App ( { Component , pageProps } : AppProps ) {
const { children , ... rest } = pageProps ;
return (
< NextDataHooksProvider { ... rest } >
< Component { ... rest } > { children } </ Component >
</ NextDataHooksProvider >
) ;
} import { createDataHook } from 'next-data-hooks' ;
// this context is the GetStaticPropsContext from 'next'
// ?
const useBlogPost = createDataHook ( 'BlogPost' , async ( context ) => {
const slug = context . params ?. slug as string ;
// do something async to grab the data your component needs
const blogPost = /* ... */ ;
return blogPost ;
} ) ;
export default useBlogPost ;注：TypeScriptユーザーの場合、
getServerSidePropsのコンテキストでデータフックのみを使用することを計画している場合は、提供されたタイプガードであるisServerSidePropsContextをインポートして、着信コンテキストのタイプを絞り込むことができます。
import { createDataHook , isServerSidePropsContext } from 'next-data-hooks' ;
const useServerSideData = createDataHook ( 'Data' , async ( context ) => {
if ( ! isServerSidePropsContext ( context ) ) {
throw new Error ( 'This data hook only works in getServerSideProps.' ) ;
}
// here, the type of `context` has been narrowed to the server side conext
const query = context . req . query ;
} ) ;
export default useServerSideData ; import ComponentThatUsesDataHooks from '..' ;
import useBlogPost from '..' ;
import useOtherDataHook from '..' ;
function BlogPostComponent ( ) {
const { title , content } = useBlogPost ( ) ;
const { other , data } = useOtherDataHook ( ) ;
return (
< article >
< h1 > { title } </ h1 >
< p > { content } </ p >
< p >
{ other } { data }
</ p >
</ article >
) ;
}
// compose together other data hooks
BlogPostComponent . dataHooks = [
... ComponentThatUsesDataHooks . dataHooks ,
useOtherDataHooks ,
useBlogPost ,
] ;
export default BlogPostComponent ;getStaticPropsまたはgetServerSidePropsでデータフックを渡します。 import { getDataHooksProps } from 'next-data-hooks' ;
import { GetStaticPaths , GetStaticProps } from 'next' ;
import BlogPostComponent from '..' ;
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 ,
// this is an array of all data hooks from the `dataHooks` static prop.
// ???
dataHooks : BlogPostComponent . dataHooks ,
} ) ;
return {
props : {
// spread the props required by next-data-hooks
... dataHooksProps ,
// add additional props to Next.js here
} ,
} ;
} ;
export default BlogPostComponent ; routesディレクトリnext.jsには、ページと見なされることなく/pagesフォルダーにファイルを配置できない非常に意見のあるファイルベースのルーティングメカニズムがあります。
簡単に言えば、これは多くの組織を許可しません。
next-data-hooksを使用すると、 /pagesフォルダーをエントリポイントのフォルダーとして扱い、他の場所にファイルを整理できます。
my-project
# think of the pages folder as entry points to your routes
├── pages
│ ├── blog
│ │ ├── [slug].ts
│ │ └── index.ts
│ └── shop
│ ├── category
│ │ └── [slug].ts
│ ├── index.ts
│ └── product
│ └── [slug].ts
|
# think of each route folder as its own app with it's own components and helpers
└── routes
├── blog
│ ├── components
│ │ ├── blog-index.tsx
│ │ ├── blog-post-card.tsx
│ │ └── blog-post.tsx
│ └── helpers
│ └── example-blog-helper.ts
└── shop
├── components
│ ├── category.tsx
│ ├── product-description.tsx
│ └── product.tsx
└── helpers
└── example-shop-helper.ts
/routes/blog/components/blog-post.tsx import { createDataHook } from 'next-data-hooks' ;
// write your data hook in a co-located place
const useBlogPostData = createDataHook ( 'BlogPost' , async ( context ) => {
const blogPostData = // get blog post data…
return blogPostData ;
} ) ;
function BlogPost ( ) {
// use it in the component
const { title , content } = useBlogPostData ( ) ;
return (
< article >
< h1 > { title } </ h1 >
< p > { content } </ p >
</ article >
) ;
}
BlogPost . dataHooks = [ useBlogPostData ] ;
export default BlogPost ; /pages/blog/[slug].ts import { GetStaticProps , GetStaticPaths } from 'next' ;
import { getDataHooksProps } from 'next-data-hooks' ;
import BlogPost from 'routes/blog/components/blog-post' ;
export const getStaticPaths : GetStaticPaths = { } ; /* ... */
export const getStaticProps : GetStaticProps = async ( context ) => {
const dataHooksProps = getDataHooksProps ( {
context ,
dataHooks : BlogPost . dataHooks ,
} ) ;
return { props : dataHooksProps } ;
} ;
// re-export your component. this file is just an entry point
export default BlogPost ;注：上記は、
next-data-hooksを使用してプロジェクトを整理する方法の単なる例です。主なテイクアウトは、ページコンポーネントを再輸出して構造を変更できることです。next-data-hooksこのパターンでうまく機能することです。
各データフックは、単にcreateDataHookに渡す関数であるgetDataメソッドを公開します。
これは、他のデータフック内で同じデータをプルするために使用できます。
import { createDataHook } from 'next-data-hooks' ;
const useHook = createDataHook ( 'DataHook' , async ( context ) => {
return ; // ...
} ) ;
export default useHook ; import useHook from './' ;
const useOtherHook = createDataHook ( 'Other' , async ( context ) => {
const data = await useHook . getData ( context ) ;
// use data to do something…
} ) ;注：この方法が関数を再実行することに注意してください。
小さいバンドルの場合、next.jsは、 getStaticProps内でのみ実行することを目的としたコードを排除します。
next-data-hooksデータフックの定義をtypeof window !== 'undefined' ? <stub> : <real data hook> 。
これは、next.jsが式typeof windowブラウザの'object'に事前に評価するためです。これにより、上記の三元は常にブラウザの<stub>に評価されます。その後、Terserは<real data hook>式をブラウザバンドルから排除する式を揺さぶります。
エラーが表示された場合Create data hook was run in the browser.その後、コードの除去で何かがうまくいかなかった可能性があります。問題を開いてください。
注記。 next.jsのデフォルトのコード除去と
next-data-hooksコードの排除に違いがある場合があります。バンドルを再確認してください。
