Wednesday, 20 October 2021

In NextJS how to pass data from server.js to _app.js?

In my NextJS project, I'm using koa as the web framework in server.js file, what I want to do is as follows,

  1. Do some external api calls to generate some custom data in server.js per each request,
  2. Then pass the generated data to _app.js, so that the data could be shared by all pages via props or contexts.

My question is how could we pass the data generated in server.js to _app.js or pages?

Here are some code examples,

//////////////////////////////////////////////////
// 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?
  ...
};

The reason why I want to keep the custom_logic inside server.js is that,

  • If name is not verified, a redirect would happen and verifyNameFunc will set some data into verified_names.

I'm not sure if this redirect could be moved into _app.js as well?



from In NextJS how to pass data from server.js to _app.js?

No comments:

Post a Comment