next data hooks 다운로드 - next data hooks 소스 코드 다운로드

Next-Data-hooks ·

getStaticProps 및 getServerSideProps React Hooks로 사용하십시오

next-data-hooks 정적 소품을 React Context로 들어 올려 Next.js의 데이터 쿼리에 대한 React Hooks를 작성할 수있는 작고 간단한 lib입니다.

 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 ;

왜?

페이지 당 하나의 큰 쿼리를 작성하는 것은 잘 정리되지 않습니다. 비동기 데이터 페치 프레임 워크 아폴로, 릴레이 및 반응 쿼리와 같은 프레임 워크를 사용하면 이미 구성 요소에 더 가깝게 쿼리를 쓸 수 있습니다. 정적 데이터 쿼리가 구성 요소에 더 가까이 서면 할 수없는 이유는 무엇입니까?
TypeScript에서 더 잘 작동합니다. 데이터 후크를 가져 오면 리턴 유형도 가져 오기도합니다. 구성 요소 내부의 후크를 호출하면 유형이 이미 있습니다.

왜 안 돼?

이 라이브러리가 제공하는 주요 사항은 getStaticProps / getServerSideProps 구성하는 패턴입니다.

켈 참고 : 바닐라 Next.js보다 더 이상 기능을 제공하지 않습니다.

이 질문을 참조하십시오. 왜 데이터 후크가 매개 변수화되지 않습니까?

예

이 후크를 사용하여 정적 데이터 호출을 구성하는 방법에 대한 아이디어에 대한 아이디어는이 Repo의 예를 참조하십시오.

설치

설치하다

 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 사용자?

참고 : 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…
} ) ;

참고 : 이 메소드가 함수를 다시 실행한다는 점에 유의하십시오.

코드 제거

더 작은 번들의 경우 다음 .js는 getStaticProps 내부에서만 실행되는 코드를 제거합니다.

next-data-hooks Babel 플러그인에 의해 동일합니다 typeof window !== 'undefined' ? <stub> : <real data hook> .

이것은 다음.js가 브라우저에서 'object' 로 표현식 typeof window 사전 평가하기 때문에 작동합니다. 이렇게하면 위의 3 가지가 항상 브라우저에서 <stub> 로 평가됩니다. 그런 다음 Terser는 <real data hook> 표현식을 브라우저 번들에서 제거합니다.

오류가 발생하면 Create data hook was run in the browser. 그러면 코드 제거로 무언가 잘못되었을 수 있습니다. 문제를여십시오.