En mi proyecto NextJS, estoy usando koa como marco web en el archivo server.js , lo que quiero hacer es lo siguiente:
server.js por cada solicitud,_app.js , para que todas las páginas puedan compartir los datos a través de accesorios o contextos. Mi pregunta es ¿cómo podríamos pasar los datos generados en server.js a _app.js o páginas?
Aquí hay algunos ejemplos de código,
////////////////////////////////////////////////// // server.js import Koa from "koa"; import Router from "koa-router"; const verified_names = {}; const handle = app.getRequestHandler(); // NextJS use this to handle each request app.prepare().then(async () => { const server = new Koa(); const router = new Router(); ... // in verifyNameFunc, if name is verified, will set verified_names[name] = some_data router.get("/verify_name", verifyNameFunc); router.get("(.*)", async (ctx) => { // custom logic starts here: if name is not verified, redirect to /verify_name const name = ctx.query.name; if (verified_names[name] === undefined) { ctx.redirect(`/verify_name?name=${name}`); } // HERE: do some external api calls and generate some data var custom_data = custom_logic(verified_names[name]); // I think here starts rendering the pages (ie enters the execution of `_app.js` and pages) // QUESTION: how to pass the above `custom_data` to _app.js or pages? await handle(ctx.req, ctx.res); } }); server.use(router.routes()); server.listen(...); }); ////////////////////////////////////////////////// // _app.js class MyApp extends App { ... } MyApp.getInitialProps = async ({ ctx }) => { // Can we get the `custom_data` from server.js here? ... }; La razón por la que quiero mantener custom_logic dentro server.js es que,
name , ocurrirá una redirección y verified_names establecerá algunos datos en verifyNameFunc . No estoy seguro de si esta redirección también podría moverse a _app.js .
Puede usar getInitialProps y hacer la redirección en __app.tsx si es necesario.
https://nextjs.org/docs/api-reference/data-fetching/getInitialProps
Además, es bastante fácil verificar si un nombre está verificado en __app.tsx y luego representar a un niño diferente en función de eso. No creo que necesites un servidor personalizado completo para eso.
También eche un vistazo a https://nextjs.org/blog/next-10-2#routing-based-on-headers-and-query-string-parameters .
Es solo una de las soluciones: cree un archivo js separado (módulo), donde exportará dos funciones setData() y getData() como esta:
////////////////////////////////////////////////// // ./lib/data-manager.js let promiseResolver = undefined; const promise = new Promise((resolve) => { promiseResolver = resolve; }) export function setData(data) { promiseResolver(data); } export function async getData() { return promise; } ////////////////////////////////////////////////// // server.js import { setData } from "../lib/data-manager" import Koa from "koa"; import Router from "koa-router"; const verified_names = {}; const handle = app.getRequestHandler(); // NextJS use this to handle each request app.prepare().then(async () => { const server = new Koa(); const router = new Router(); ... // in verifyNameFunc, if name is verified, will set verified_names[name] = some_data router.get("/verify_name", verifyNameFunc); router.get("(.*)", async (ctx) => { // custom logic starts here: if name is not verified, redirect to /verify_name const name = ctx.query.name; if (verified_names[name] === undefined) { ctx.redirect(`/verify_name?name=${name}`); } // HERE: do some external api calls and generate some data var custom_data = custom_logic(verified_names[name]); setData(custom_data); // <-- saving data // I think here starts rendering the pages (ie enters the execution of `_app.js` and pages) // QUESTION: how to pass the above `custom_data` to _app.js or pages? await handle(ctx.req, ctx.res); } }); server.use(router.routes()); server.listen(...); }); ////////////////////////////////////////////////// // _app.js import { getData } from "../lib/data-manager" class MyApp extends App { ... } MyApp.getInitialProps = async ({ ctx }) => { const custom_data = await getData(); // <-- getting data }; Tenga en cuenta que getInitialProps habilita la representación del lado del servidor en una página y le permite completar los datos iniciales, lo que significa enviar la página con los datos ya completados desde el servidor (consulte https://nextjs.org/docs/api-reference /obtención de datos/getInitialProps ). Pero, como se le recomendó, tal vez no necesite un servidor personalizado en absoluto