next data hooks

Next-Data-Hooks ·

Verwenden Sie getStaticProps und getServerSideProps als React -Hooks

next-data-hooks ist eine kleine und einfache Bibliothek, mit der Sie React-Hooks für Datenabfragen in Next.js schreiben können, indem Sie statische Requisiten in React-Kontext anheben.

 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 ; 

Warum?

1. Das Schreiben einer großen Abfrage pro Seite organisiert sich nicht gut. Asynchrone Daten abrufen Frameworks wie Apollo, Relay und React-Query ermöglichen es Ihnen bereits, die Abfragen näher an die Komponente zu schreiben. Warum können statische Datenabfragen nicht auch näher an die Komponente geschrieben werden?
2. Funktioniert besser mit TypeScript - Wenn Sie einen Datenhaken importieren, importieren Sie auch seinen Rückgabetyp. Wenn Sie den Haken in Ihrer Komponente anrufen, sind die Typen bereits vorhanden.

Warum nicht?

Die Hauptsache, die diese Bibliothek anbietet, ist ein Musterorganisations -Organizing getStaticProps / getServerSideProps .

Euen HINWEIS: Es bietet keine Funktionen mehr als Vanilla Next.js.

Siehe diese Frage: Warum sind die Data Hooks nicht parametrisiert?

Beispiel

In dem Beispiel in diesem Repo finden Sie einige Ideen, wie Sie Ihre statischen Datenanrufe mit diesem Haken organisieren.

Installation

1. Installieren

 npm i next-data-hooks

oder

 yarn add next-data-hooks

2. Fügen Sie das Babel -Plugin hinzu

Fügen Sie am Root eine .babelrc -Datei hinzu, die Folgendes enthält:

{
  "presets" : [ " next/babel " ],
  "plugins" : [ " next-data-hooks/babel " ]
}

Euen Vergiss diesen Schritt nicht. Dadurch können die Code-Eliminierung den serverseitigen Code im Client-Code beseitigen.

3. Fügen Sie den Anbieter zu _app.tsx oder _app.js hinzu

 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 >
  ) ;
} 

Verwendung

1. Erstellen Sie einen Datenhaken. Dies kann in derselben Datei wie die Komponente sein, in der Sie sie verwenden, oder woanders.

 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 -Benutzer?

Hinweis: Wenn Sie für Typscript -Benutzer nur den Data -Hook im Kontext von getServerSideProps verwenden möchten, können Sie den bereitgestellten Typ Guard isServerSidePropsContext importieren, um den Typ des eingehenden Kontextes einzugrenzen.

 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 ;

2. Verwenden Sie den Datenhaken in einer Komponente. Fügen Sie es zu einer statischen Stütze in einem Array mit anderen Datenhaken hinzu, um sie nach unten zu komponieren.

 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 ;

3. Geben Sie die Data -Haken in getStaticProps oder getServerSideProps ab.

 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 ; 

Nützliche Muster

Ein separates routes

Next.js verfügt über einen sehr übereinstimmenden dateibasierten Routing-Mechanismus, mit dem Sie nicht eine Datei in den Ordner /pages einstellen können, ohne dass dies als Seite angesehen wird.

Einfach ausgedrückt, dies erlaubt nicht viel Organisation.

Mit next-data-hooks können Sie den Ordner /pages als Ordner mit Einstiegspunkten behandeln und an anderer Stelle Dateien organisieren.

 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 ;

Hinweis: Das obige ist nur ein Beispiel dafür, wie Sie next-data-hooks verwenden können, um Ihr Projekt zu organisieren. Das Hauptauftrieb besteht darin, dass Sie Seitenkomponenten erneut belegen können, um die Struktur zu ändern, und next-data-hooks mit diesem Muster gut funktionieren.

Datenhaken komponieren

Jeder Datenhaken enthält eine getData -Methode, die einfach die Funktion ist, die Sie in createDataHook übergeben.

Dies kann in anderen Datenhaken verwendet werden, um dieselben Daten zu ziehen:

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

Hinweis: Beachten Sie, dass diese Methode die Funktion erneut ausführt.

Code -Eliminierung

Bei kleineren Bündeln eliminiert der Code, der nur in getStaticProps laufen soll.

next-data-hooks trifft das gleiche durch ein Babel-Plugin, das Ihre Datenhakendefinition mit typeof window !== 'undefined' ? <stub> : <real data hook> .

Dies funktioniert, weil Next.js das Expressionstypen typeof window in 'object' in Browsern vorbereitet. Dadurch wird das obige Ternäre immer zum <stub> im Browser bewertet. Terser schüttelt dann den Ausdruck <real data hook> ihn aus dem Browser -Bundle beseitigt.

Wenn Sie gesehen haben, dass der Fehler Create data hook was run in the browser. Dann könnte etwas mit der Code -Eliminierung schief gelaufen sein. Bitte öffnen Sie ein Problem.

Notiz . Es kann Unterschiede in der Standard-Code-Eliminierung von Next.JS und der Codes-Eliminierung next-data-hooks geben. Überprüfen Sie Ihr Bundle.