NextJS：如何将数据从一页发送到另一页的getInitialProps函数

Question

I'm trying to send data from Page B (login) to Page A's (index) getInitialProps as I need a key for Page A's getInitProps to actually get the props...

I'm currently trying to do it by sending a POST request to a custom express route and use that route to render the Page server side so getInitialProps will run. But the problem is that the browser won't render the page even though it gets built server side.

POST Request From Login Page (happens Client Side):

const headers = {'Content-type': 'application/json; charset=UTF-8'}
await fetch(`${getRootUrl()}/loadKey`, {method: "POST", body: JSON.stringify({key}), headers})

Express Route:

server.post('/loadKey', (req, res) => {
    // const {key} = req.body
    // console.log(key)
    next({dev}).render('/') //index page
})

The key gets logged fine and in the terminal, nextjs is saying that the index page is getting built,and getInitialProps gets ran, but nothing happens on the browser. No redirect.

I've tried using express.redirect , express.render , and I've tried to force a client-side redirect, but for the former two, the same thing happens when I use next.render; the page gets built, getInitialProps runs, but no redirect happens on the browser. And when I force a redirect using Link or Router, then Index's getInitialProps won't get the key passed in from the POST request.

Answer 1

Try this one

server.post('/loadKey', (req, res) => {
    const {key} = req.body
    // Do whatever you need to do
    const actualPage = '/'
    const queryParams = { key }
    next({dev}).render(req, res, actualPage, queryParams)
})

Now you should have access to key in index page by props.

Answer 2

Your approach will only work for server-side rendered pages (since you need to use req ), not for client-side. Even if you get it work once, your logic might break when you try navigating to this route, or you might end up with part of your app being SPA and then some refreshes when visiting this page.

From nextjs documentation:

For the initial page load, getInitialProps will execute on the server only. getInitialProps will only be executed on the client when navigating to a different route via the Link component or using the routing APIs.

Some possible solutions that I've used in the past:

• Implement your page B as a component, and call it from page A if certain criteria it's met. Page B won't have getInitialProps but page A does, and it seems like you need to know something from page A getInitialProps in order to correctly render page B, so why not use a single page instead? The user won't know the difference.

• Use Redux or the likes. You can store the value of your prop in the store, which it's available globally, even to getInitialProps. But beware! Save your prop to the store before trying to access it on page B. A page's getInitialProps runs before the HoC's.