next plugin preval
v1.2.6
Funções assíncronas pré-avaliadas (para busca de dados) no horário de construção e importá-las como 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 ; O mecanismo principal Next.js fornece dados estáticos é getStaticProps - que é um ótimo recurso e é a ferramenta certa para muitos casos de uso. No entanto, existem outros casos de uso para dados estáticos que não são cobertos pelo getStaticProps .
getStaticProps é um mecanismo um tanto estranho, porque para cada nova página, você terá que re-buscar os mesmos dados estáticos. Por exemplo, se você usar getStaticProps para buscar conteúdo para o seu cabeçalho, esses dados serão retirados novamente em todas as alterações de página.getStaticProps não funciona para rotas de API enquanto next-plugin-preval .next-plugin-preval se comporta como a importação de JSON, você pode aproveitar as otimizações que os pacotes têm para importar ativos estáticos padrão. Isso inclui divisão de código padrão e desdobramento.Veja as receitas para exemplos de concreto.
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 */ ) ; Crie um arquivo com a extensão .preval.ts ou .preval.js Em seguida, exporte uma promessa embrulhada em preval() .
// my-data.preval.js
import preval from 'next-plugin-preval' ;
async function getData ( ) {
return { hello : 'world' ; }
}
export default preval ( getData ( ) ) ;Em seguida, importe esse arquivo em qualquer lugar. O resultado da promessa é devolvido.
// 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 ; Quando você importa um arquivo .preval , é como se você estivesse importando JSON. next-plugin-preval executará sua função durante a compilação e embutirá uma blob JSON como um módulo.
Isso funciona através de um carregador webpack que pega seu código, compila e o executa dentro do Node.js.
require('next') . Para a maioria das consultas de dados, isso deve ser suficiente, no entanto, abra um problema se algo parecer desligado. // 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 >
) ;
} Conforme declarado nas anotações, o resultado da prevenção da próxima plugina não mudará depois de deixar a construção. No entanto, você ainda pode fazer o modo de visualização funcionar se extrair sua função de busca de dados e chamá -la condicionalmente com base no modo de visualização (via context.preview . Se o modo de visualização não estiver ativo, você poderá fazer com que o arquivo prevalente.
// 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 -Cria um padrão para usar getStaticProps como ganchos do React. Ótimo para o caso de dados em todo o site quando o modo de visualização ou ISR for necessário.
