next plugin preval
v1.2.6
Предварительные асинхронные функции (для избрания данных) в время сборки и импортируйте их как 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 ; Основным механизмом Next.js предусматривает статические данные является getStaticProps , которая является отличной функцией и является правильным инструментом для многих вариантов использования. Тем не менее, существуют другие варианты использования статических данных, которые не покрываются getStaticProps .
getStaticProps -это несколько неловкий механизм, потому что для каждой новой страницы вам придется повторно выбирать те же самые статические данные. Например, если вы используете getStaticProps для получения контента для вашего заголовка, эти данные будут переоценены при каждом изменении страницы.getStaticProps не работает для маршрутов API, в то время как это делает next-plugin-preval .next-plugin-preval ведет себя как импорт JSON, вы можете использовать оптимизации, которые бундлеры имеют для импорта стандартных статических активов. Это включает в себя стандартное расщепление кода и раздувание.Смотрите рецепты для конкретных примеров.
yarn add next-plugin-preval
или
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 */ ) ; Создайте файл с расширением .preval.ts или .preval.js , затем экспортируйте обещание, завернутое в preval() .
// my-data.preval.js
import preval from 'next-plugin-preval' ;
async function getData ( ) {
return { hello : 'world' ; }
}
export default preval ( getData ( ) ) ;Затем импортируйте этот файл в любом месте. Результат обещания возвращается.
// 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 ; Когда вы импортируете файл .preval , это как будто вы импортируете JSON. next-plugin-preval выполнит вашу функцию во время строительства и встроенного капли JSON в качестве модуля.
Это работает через WebPack Loader, который берет ваш код, компилирует его и запускает его внутри Node.js.
require('next') . Для большинства запросов данных этого должно быть достаточным, однако, пожалуйста, откройте проблему, если что -то кажется отключенным. // 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 >
) ;
} Как указано в примечаниях, результат проведенного следующего плугина не изменится после того, как покинет сборку. Тем не менее, вы все равно можете выполнять работу в режиме предварительного просмотра, если вы извлеките функцию извлечения данных и условно вызовуте ее на основе режима предварительного просмотра (через context.preview .
// 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 -создает шаблон для использования getStaticProps в качестве крючков React. Отлично подходит для общенационального корпуса данных, когда необходим режим предварительного просмотра или ISR.
