next plugin preval
v1.2.6
Pré-évaluation des fonctions asynchrones (pour les récupérations de données) au moment de la construction et importez-les comme JSON
// data.preval.js (or data.preval.ts)
// step 1: create a data.preval.js (or data.preval.ts) file
import preval from 'next-plugin-preval' ;
// step 2: write an async function that fetches your data
async function getData ( ) {
const { title , body } = await /* your data fetching function */ ;
return { title , body } ;
}
// step 3: export default and wrap with `preval()`
export default preval ( getData ( ) ) ; // Component.js (or Component.ts)
// step 4: import the preval
import data from './data.preval' ;
// step 5: use the data. (it's there synchronously from the build step!)
const { title , body } = data ;
function Component ( ) {
return (
< >
< h1 > { title } </ h1 >
< p > { body } </ p >
</ >
) ;
}
export default Component ; Le principal mécanisme NEXT.js fournit des données statiques est getStaticProps - qui est une grande fonctionnalité et est le bon outil pour de nombreux cas d'utilisation. Cependant, il existe d'autres cas d'utilisation pour les données statiques qui ne sont pas couverts par getStaticProps .
getStaticProps est un mécanisme quelque peu gênant car pour chaque nouvelle page, vous devrez redéfinir ces mêmes données statiques. Par exemple, si vous utilisez getStaticProps pour récupérer le contenu de votre en-tête, ces données seront redéfinies à chaque changement de page.getStaticProps ne fonctionne pas pour les routes API tandis que next-plugin-preval le fait.next-plugin-preval se comporte comme l'importation de JSON, vous pouvez tirer parti des optimisations que les bundlers ont pour importer des actifs statiques standard. Cela inclut la fermeture et la déduction du code standard.Voir les recettes pour les exemples de béton.
yarn add next-plugin-preval
ou
npm i next-plugin-preval
// next.config.js
const createNextPluginPreval = require ( 'next-plugin-preval/config' ) ;
const withNextPluginPreval = createNextPluginPreval ( ) ;
module . exports = withNextPluginPreval ( /* optionally add a next.js config */ ) ; Créez un fichier avec l'extension .preval.ts ou .preval.js puis exportez une promesse enveloppée dans preval() .
// my-data.preval.js
import preval from 'next-plugin-preval' ;
async function getData ( ) {
return { hello : 'world' ; }
}
export default preval ( getData ( ) ) ;Puis importez ce fichier n'importe où. Le résultat de la promesse est retourné.
// component.js (or any file)
import myData from './my-data.preval' ; // ? this is effectively like importing JSON
function Component ( ) {
return (
< div >
< pre > { JSON . stringify ( myData , null , 2 ) } </ pre >
</ div >
) ;
}
export default Component ; Lorsque vous importez un fichier .preval , c'est comme si vous importiez JSON. next-plugin-preval exécutera votre fonction pendant la construction et en ligne un blob JSON en tant que module.
Cela fonctionne via un chargeur WebPack qui prend votre code, le compile et l'exécute à l'intérieur de Node.js.
require('next') . Pour la plupart des requêtes de données, cela devrait être suffisant, mais veuillez ouvrir un problème si quelque chose semble éteint. // header-data.preval.js
import preval from 'next-plugin-preval' ;
async function getHeaderData ( ) {
const headerData = await /* your data fetching function */ ;
return headerData ;
}
export default preval ( getHeaderData ( ) ) ; // header.js
import headerData from './header-data.preval' ;
const { title } = headerData ;
function Header ( ) {
return < header > { title } </ header > ;
}
export default Header ; // products.preval.js
import preval from 'next-plugin-preval' ;
async function getProducts ( ) {
const products = await /* your data fetching function */ ;
// create a hash-map for O(1) lookups
return products . reduce ( ( productsById , product ) => {
productsById [ product . id ] = product ;
return productsById ;
} , { } ) ;
}
export default preval ( getProducts ( ) ) ; // /pages/api/products/[id].js
import productsById from '../products.preval.js' ;
const handler = ( req , res ) => {
const { id } = req . params ;
const product = productsById [ id ] ;
if ( ! product ) {
res . status ( 404 ) . end ( ) ;
return ;
}
res . json ( product ) ;
} ;
export default handler ; // states.preval.js
import preval from 'next-plugin-preval' ;
async function getAvailableStates ( ) {
const states = await /* your data fetching function */ ;
return states ;
}
export default preval ( getAvailableStates ( ) ) ; // state-picker.js
import { useState , useEffect } from 'react' ;
function StatePicker ( { value , onChange } ) {
const [ states , setStates ] = useState ( [ ] ) ;
useEffect ( ( ) => {
// ES6 dynamic import
import ( './states.preval' ) . then ( ( response ) => setStates ( response . default ) ) ;
} , [ ] ) ;
if ( ! states . length ) {
return < div > Loading… </ div > ;
}
return (
< select value = { value } onChange = { onChange } >
{ states . map ( ( { label , value } ) => (
< option key = { value } value = { value } >
{ label }
</ option >
) ) }
</ select >
) ;
} Comme indiqué dans les notes, le résultat de la poigine-préval suivante ne changera pas après sa sortie de la construction. Cependant, vous pouvez toujours faire fonctionner le mode d'aperçu si vous extraire votre fonction de récupération de données et l'appeler conditionnellement en fonction du mode de prévisualisation (via context.preview . Si le mode d'aperçu n'est pas actif, vous pouvez par défaut le fichier préval.
// get-data.js
// 1. extract a data fetching function
async function getData ( ) {
const data = await /* your data fetching function */ ;
return data
} // data.preval.js
import preval from 'next-plugin-preval' ;
import getData from './getData' ;
// 2. use that data fetching function in the preval
export default preval ( getData ( ) ) ; // /pages/some-page.js
import data from './data.preval' ;
import getData from './get-data' ;
export async function getStaticProps ( context ) {
// 3. conditionally call the data fetching function defaulting to the prevalled version
const data = context . preview ? await getData ( ) : data ;
return { props : { data } } ;
} next-data-hooks - Crée un motif pour utiliser getStaticProps comme hooks React. Idéal pour le cas de données à l'échelle du site lorsque le mode d'aperçu ou ISR est nécessaire.
