Next JS 自定义服务器 app.render 不将查询传递给组件

Question

我试图通过userData，app.render但是虽然服务器端渲染 router.query是空的，但我已经通过了userData！这是 NextJS 的错误，还是我做错了什么？

应用程序.js：

const { createServer } = require('http')
const { parse } = require('url')
const next = require('next')

const dev = process.env.NODE_ENV !== 'production'
const app = next({ dev })
const handle = app.getRequestHandler()

app.prepare().then(() => {
  createServer((req, res) => {

    const parsedUrl = parse(req.url, true)
    const { pathname, query } = parsedUrl

    if (pathname === '/index') {
      app.render(req, res, '/index', {
        userData: {
          id: 1,
          name: 'admin'
        }
      })
    } else {
      handle(req, res, parsedUrl)
    }
  }).listen(3333, err => {
    if (err) throw err
    console.log('> Ready on http://localhost:3000')
  })
})

页面/index.js：

import { useRouter } from 'next/router'

export default () => {
    const router = useRouter();
    const { query } = router;

    return (
        <div>
            Query: {JSON.stringify(query)}
        </div>
    );
};

Answer 1

如果 getInitialProps 不存在，Next.js 将通过将页面预呈现为静态 HTML 来自动静态优化您的页面。在预渲染期间，路由器的查询对象将为空，因为我们在此阶段没有要提供的查询信息。任何查询值都将在水化后填充到客户端。

您可以使用 访问您的查询 getInitialProps。
和useRouter：

import { useRouter } from 'next/router'
const Index = () => {
  const router = useRouter();
  const { query } = router;

  return (
      <div>
          Query: {JSON.stringify(query)}
      </div>
  );
};

Index.getInitialProps = async () => {
  return {};
};
export default Index

带有类组件：

import React from 'react'

class Index extends React.Component {
      static async getInitialProps (context) {
        let query  = context.query;
        return {query}
      }

      render() {
        let {query} = this.props
        return (
          <div>
              Query: {JSON.stringify(query)}
          </div>
      );
      }
    }
export default Index  

或者，如果您更喜欢功能组件：

const Index = (props) => (
  <div>
    Query: {JSON.stringify(props.query)}
  </div>
)

Index.getInitialProps = async ( context ) => {
  let query  = context.query;
  return {query}
}

export default Index  

请注意，显然这适用于/index但不适用于/