在NextJS中，如何将数据从server.js传递到_app.js？
在NextJS中，如何将数据从server.js传递到_app.js？
提问于 2021-10-16 19:54:33
在我的NextJS项目中，我使用koa作为server.js文件中的web框架，我想做的是：
- 对每个请求执行一些外部api调用，在
server.js中生成一些自定义数据，然后 - 将生成的数据传递给
_app.js，这样所有页面都可以通过道具或上下文共享数据。
我的问题是，我们如何将server.js中生成的数据传递给_app.js或页面？
下面是一些代码示例，
//////////////////////////////////////////////////
// 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 (i.e. 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?
...
};我想把custom_logic放在server.js里面的原因是，
如果未验证verified_names.的
- ，则会发生重定向，
verifyNameFunc将将一些数据设置为name
我不确定这个重定向是否也可以移到_app.js中？
Stack Overflow用户
发布于 2021-10-19 13:40:41
这只是解决方案之一:创建一个单独的js文件(模块)，在其中您将导出两个函数setData()和getData()，如下所示：
//////////////////////////////////////////////////
// ./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 (i.e. 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
};请记住，getInitialProps支持页面中的服务器端呈现，并允许您进行初始数据填充，这意味着使用已经从服务器填充的数据发送页面(请参阅https://nextjs.org/docs/api-reference/data-fetching/getInitialProps)。但是，正如推荐的那样，您可能根本不需要自定义服务器。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/69599068
复制相关文章
相似问题
腾讯云开发者
