next plugin preval
v1.2.6
Pra-evaluasi fungsi async (untuk data mengambil) saat membangun waktu dan mengimpornya seperti 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 ; Mekanisme utama Next.js menyediakan data statis adalah getStaticProps - yang merupakan fitur yang hebat dan merupakan alat yang tepat untuk banyak kasus penggunaan. Namun, ada kasus penggunaan lain untuk data statis yang tidak dicakup oleh getStaticProps .
getStaticProps adalah mekanisme yang agak canggung karena untuk setiap halaman baru, Anda harus membuat kembali data statis yang sama. Misalnya, jika Anda menggunakan getStaticProps untuk mengambil konten untuk header Anda, data itu akan dibuat ulang pada setiap perubahan halaman.getStaticProps tidak berfungsi untuk rute API sementara next-plugin-preval .next-plugin-preval seperti mengimpor JSON, Anda dapat memanfaatkan optimisasi yang dimiliki bundler untuk mengimpor aset statis standar. Ini termasuk pemisahan kode standar dan de-duping.Lihat resep untuk contoh konkret.
yarn add next-plugin-preval
atau
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 */ ) ; Buat file dengan ekstensi .preval.ts atau .preval.js kemudian mengekspor janji yang dibungkus preval() .
// my-data.preval.js
import preval from 'next-plugin-preval' ;
async function getData ( ) {
return { hello : 'world' ; }
}
export default preval ( getData ( ) ) ;Kemudian impor file itu di mana saja. Hasil janji dikembalikan.
// 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 ; Saat Anda mengimpor file .preval , seperti Anda mengimpor JSON. next-plugin-preval akan menjalankan fungsi Anda selama build dan inline gumpalan JSON sebagai modul.
Ini berfungsi melalui loader webpack yang mengambil kode Anda, mengkompilasinya, dan menjalankannya di dalam Node.js.
require('next') . Untuk sebagian besar kueri data ini harus cukup, namun harap buka masalah jika ada sesuatu yang tampak tidak aktif. // 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 >
) ;
} Seperti yang dinyatakan dalam catatan, hasil preval plugin berikutnya tidak akan berubah setelah meninggalkan bangunan. Namun, Anda masih dapat membuat mode pratinjau berfungsi jika Anda mengekstrak fungsi pengambilan data Anda dan memanggilnya secara kondisional berdasarkan mode pratinjau (melalui context.preview . Jika mode pratinjau tidak aktif, Anda dapat default ke file preval.
// 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 -Membuat pola untuk menggunakan getStaticProps sebagai react hooks. Bagus untuk kasus data di seluruh situs saat mode pratinjau atau ISR diperlukan.
