score:1
it's just one of solutions:
create a separate js file (module), where you will export two functions setdata()
and getdata()
like this:
//////////////////////////////////////////////////
// ./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
};
keep in mind that getinitialprops
enables server-side rendering in a page and allows you to do initial data population, it means sending the page with the data already populated from the server (see https://nextjs.org/docs/api-reference/data-fetching/getinitialprops).
but, as it was recommended to you, maybe you don't need custom server at all
score:2
you can use getinitialprops
and do the redirect in __app.tsx
if you need to.
https://nextjs.org/docs/api-reference/data-fetching/getinitialprops
also it's rather easy to check if a name is verified in __app.tsx
and then to render a different child based on that. i don't think you need an entire custom server for that.
also take a look at https://nextjs.org/blog/next-10-2#routing-based-on-headers-and-query-string-parameters.
Source: stackoverflow.com
Related Query
- How can I pass data from express server to react views?
- In NextJS how to pass data from server.js to _app.js?
- How to inject data from the server in index.html in an ASP.NET Core 3 React app
- How to pass config variables from server (Express) to React App
- How to pass data in server side rendering to reactjs component from node
- How do I pass additional data from the client-side Stripe Checkout to the server with Fetch
- How to fetch data from server using JavaScript? (adding backend to React app for the first time)
- How to get data from backend express server to frontend react app and vice versa
- How to pass data from child component to its parent in ReactJS?
- How to fetch data only once in a Next.js app and make it accesible to all the app, both in server and client
- How to fetch data in HOC from server in Next.js?
- How to Pass input Field Data from Modal to the Container in react-Native?
- Who is responsible to fetch data from server in a flux app with caching?
- How to pass data from parent to child in react.js
- Pass variables from custom server to components in NextJS
- How to pass data from React Form -> Flask Backend -> React Component (does it have something to do with CORS)?
- How to easily pass data from child to root in reactjs?
- How do i pass data up from a child web component to it's direct parent element
- How to activate a react route and pass data from the service worker?
- How to pass data from one component to another in React or React-Redux?
- How to hydrate Apollo client from NextJS server
- How to pass server data into React component
- React - How to pass returned data from an exported function to a component?
- How to pass data from a page to another page using react router
- How to pass data from one component to another ReactJS
- How to pass data from one component to another while using API in reactjs
- How to fetch data from api and pass it as props
- How to retrieve data from the server using fetch get method and show it in a table
- How to make React.js fetch data from api as state and pass this state data from its parent to child component
- How to pass data from vanilla JavaScript to React functional component
More Query from same tag
- Typescript error: Property 'flat' does not exist on type '[string, unknown][]'
- Accessing JSON returns undefined
- Tabulator image enlarge on click
- React router changes url but not the view (only on Internet Explorer 11)
- render json on the client in react
- useReducer - keydown handler re-evaluates initial state on each render
- Change value from api response React
- update state from a child component
- how to resolve useEffect eslint dependency warning?
- Having trouble checking if an array has data or is empty in ReactJS
- Stop Gatsby blog post slug from including individual post folders
- How to display React-Bootstrap's NavDropdown on Hover
- How does this code work with reactJs
- Error Promise is not defined when I start my unit test on async action Redux
- Limiting addEventListener to componentDidMount using useEffect hook
- Using the source version instead of mimified when import lib with reactjs and npm
- How to import a react component with arrow function to app.js
- React warning error stops compiling the app
- TypeError: posts.map is not a function
- How to add export functionality to custom button in React highcharts?
- react-test-renderer How to Create a Component With Context?
- ReactJS: Returning div or span from map on Indexed Collections like Int32Array and Float32Array returns 0s and NaNs
- Empty object crashes function
- React-pixi and Reagent cause an Invariant Violation
- reactjs state not being updated
- React + D3 Force Layout: new Links have undefined positions
- How to create a package with the isolatedModules=true option enabled?
- Test failures during styles file imports
- Redux connect function explanation
- React state/props won't update