标签: nextjs

使用Next.js - 构建这个

我将我的应用程序移植到nextjs框架.目前,我正在重新创建身份验证系统,否则我的应用程序的这个迭代是非常简单的.突然,在添加我的受保护路线(高阶组件)后 - 不确定是否相关 - 我开始得到这个错误以及超级笨重的加载(显然).

The connection to http://localhost:3000/_next/webpack-hmr was interrupted while the page was loading.

否则一切都按预期工作.

我不知道如何开始解决这类问题.有没有人对我如何获得有关此问题的更多信息/见解有任何想法？如何调试指导？我的下一步行动是开始断开连接,直到它消失为止.任何帮助,将不胜感激!谢谢

我将React与NextJS一起使用.

我有一个组件,基本上是一个表格,给出了一些摘要.根据一些UI选择,该组件应显示适当的摘要.

以下代码完美无缺.

class Summary extends Component{

    state = {
        total: 0,
        pass: 0,
        fail: 0,
        passp: 0,
        failp: 0
    }

    componentWillReceiveProps(props){
        let total = props.results.length;
        let pass  = props.results.filter(r => r.status == 'pass').length;
        let fail  = total - pass;
        let passp = (pass/(total || 1) *100).toFixed(2);
        let failp = (fail/(total || 1) *100).toFixed(2);
        this.setState({total, pass, fail, passp, failp});
    }

    render() {
        return(
          <Table color="teal" >
                <Table.Header>
                  <Table.Row textAlign="center">
                    <Table.HeaderCell>TOTAL</Table.HeaderCell>
                    <Table.HeaderCell>PASS</Table.HeaderCell>
                    <Table.HeaderCell>FAIL</Table.HeaderCell>
                    <Table.HeaderCell>PASS %</Table.HeaderCell>
                    <Table.HeaderCell>FAIL %</Table.HeaderCell>                                 
                  </Table.Row>
                </Table.Header>
                <Table.Body>
                  <Table.Row …

我正在使用Next.js的客户快递服务器.它在容器内运行.我正在做一个http请求,isomorphic-fetch以获取我的渲染数据.我想localhost在服务器mysite.com上运行和在客户端上运行时做.不确定实现这一目标的最佳方法.我可以做到这一点,const isServer = typeof window === 'undefined'但这似乎很糟糕.

Next.js dynamic()HOC组件对测试来说并不是那么简单.我现在有2个问题;

• 第一次开玩笑无法正确编译动态导入(require.resolveWeak is not a function- 似乎是由下一个babel插件添加)
• 其次,我无法很好地覆盖modules逻辑; 看起来它在尝试渲染动态组件时根本不运行.

目前我正在关注这个关于如何在 getInitialProps 中重定向用户的例子

https://github.com/zeit/next.js/wiki/Redirecting-in-%60getInitialProps%60

问题是，如果我想像这样返回 404，它将返回一个空白页面，而不是通常的 Next.js 404 错误页面。

context.res.writeHead(404)
context.res.end();

请注意，我知道使用 ExpressJs 和使用状态码 404 可以工作，但是，对于这个项目，我不允许使用 ExpressJs，因此我需要使用典型的 nodejs writeHead 来执行此操作。

从文档,Next.js 5.0公告和互联网上的各种文章看来,Next.js很好地支持TypeScript,很多人都在使用它.

但是这些线程表明getInitialProps,这对Next.js应用程序至关重要,不起作用:

• https://github.com/zeit/next.js/issues/3396
• https://github.com/zeit/next.js/issues/1651
• https://github.com/DefinitelyTyped/DefinitelyTyped/issues/23356

我该如何解决？在类和功能组件中,当我这样做时,ComponentName.getInitialProps = async function() {...}我收到以下错误:

[ts] Property 'getInitialProps' does not exist on type '({ data }: { data: any; }) => Element'.

我目前使用_document.js将CSS注入我的nextJs应用程序中，我想开始使用_app.js来帮助将数据注入页面中。想知道是否可以同时使用_document和_app还是应该仅使用其中一个？

所以我在我的 nextjs 应用程序上创建了一个自定义错误页面。按照文档，我创建了一个_error.js文件，其中包含我的视图（在React）

我的问题是当我处于开发模式时，我的_error页面被完全忽略（即使它通过了它的getInitialProps）。该render功能似乎被忽略，而是nextjs似乎正在使用其内部error-debug页面。

如果我是对的，这就是这个代码在 repo 中所说的（当前版本的第 84 行）

当我作为productionenv构建时，没问题，我的自定义错误页面被选中。

关于如何在开发模式下呈现我的自定义错误页面的任何想法？

I'm having difficulty with differences between client-side and server-side rendering of styles in Material-UI components due to classNames being assigned differently.

The classNames are assigned correctly on first loading the page, but after refreshing the page, the classNames no longer match so the component loses its styling. This is the error message I am receiving on the Console:

Warning: Prop className did not match. Server: "MuiFormControl-root-3 MuiFormControl-marginNormal-4 SearchBar-textField-31" Client: "MuiFormControl-root-3 MuiFormControl-marginNormal-4 SearchBar-textField-2"

I've followed the Material-UI TextField example …

以下内容适用于NextJS的SSR.

我正在使用React的上下文来跟踪某些已安装组件的ID.要点是

class Root extends React.Component {
  getChildContext () {
    return {
      registerComponent: this.registerComponent
    }
  }

  registerComponent = (id) => {
    this.setState(({ mountedComponents }) => {
      return { mountedComponents: [...mountedComponents, id ] }
    })
  }

  ...
}

class ChildComponent {
  static contextTypes = { registerComponent: PropTypes.func }

  constructor(props) {
    super(props)

    props.registerComponent(props.id)
  }
}

不幸的是,这只适用于客户端.this.state.mountedComponents总是[]在服务器上.是否有另一种方法来跟踪服务器端的这些组件？基本上我需要使用id来提供脚本以在head文档中运行- 等到客户端应用程序安装,运行并手动附加到头部有点太慢.

更新

这里有一个简单的例子:https://github.com/tills13/nextjs-ssr-context

this.context是undefined在构造函数中Child,如果我将其移动到componentDidMount(当前在repo中以这种方式设置),它可以工作,但我希望这可以在服务器端解析.我没有死定context,如果有另一种方法可以做到这一点,我全都听见了.