问题标签 [nextjs]

试图让 redux 在我的 Navbar 中工作，该 Navbar 放置在我的 Layout 高阶组件中。

在我的 Navbar.js 底部给了我这个错误

在“Connect（navbarItems）”的上下文或道具中找不到“商店”。要么将根组件包装在 a 中，要么将“store”作为道具显式传递给“Connect(Navbar)”。

我无法在我的布局中配置 redux 或者我收到此错误

我正在SyntaxError: Unexpected token import为我的 Jest 测试获取我的设置文件。我知道修复是通过.babelrc文件。这实际上在某些情况下有效。我从https://github.com/zeit/next.js/tree/canary/examples/with-jest复制粘贴它。

当我运行时npm test，它失败了。当我运行时npm run test，它也失败了。当我运行时npm run test:coverage，它起作用了。我的脚本是这些：

如果我test:coverage改为 just NODE_ENV=test jest，那将失败。因此，以某种方式请求覆盖报告神奇地解决了这个问题。

奇怪的是，当基本的覆盖面工作时，覆盖面失败了。我删除了我的包锁，删除了模块，然后npm install再次尝试。然后失败案例反转到我上面写的内容。

我的设置文件是这样的：

我已将 Nextjs 示例应用程序修改为几乎相同，但未出现错误。我不知道有什么区别。

更新

我从字面上复制了样本的所有内容，但它仍然不起作用。然后我将我的文件夹从my-appto重命名my-appy，它确实有效。我返回了所有原始代码，包括文件夹名称my-app，但它失败了。我重命名了文件夹，它工作。文件夹如何影响我运行时发生的事情npm test

更新 2

其他人下载我的回购没有问题。从来没有遇到过这样的文件夹名称问题。

更新 3

克隆到/Users/dstein/Repositories/my-app失败。克隆到/Users/dstein/my-app作品。克隆到/Users/dstein/Repositories/abc/my-app作品。不确定是什么可以针对一个随机的失败路径，尤其是考虑到重命名my-app自身的文件夹是有效的。

我正在设置一个简单的 Nextjs 样板，但似乎无法让 styled-components 工作。在我的文件 Header.tsx 中：

如您所见，我设置了一个简单的 Header 组件，然后在下面我使用 styled() 来定义我的 css。在我的文件 Index.tsx 中：

显然我做错了什么，因为它不起作用，我得到的只是一个无样式的链接。谁能指出我正确的方向？

npm run dev我正在开发一个 NextJS 应用程序，并且在开发过程中一直在使用。现在我正在尝试按照GitHub 页面上的描述进行生产构建。

我的应用程序在生产模式下崩溃了；似乎cookie-parser节点中间件未安装在生产版本中？这是我的设置方式：

服务器.js

稍后在代码中我访问节点req对象。req.cookies正如我所料，在开发模式中存在。在生产模式下它不存在。

看起来生产构建目录中没有server.js文件。更重要的是cookie-parser，cookieParser在所述生产构建目录中搜索并生成空结果。

知道发生了什么以及如何cookie-parser在生产 NextJS 构建中工作吗？

我在我的 reactjs 项目中使用 nextjs。在 nextjs 中，在服务器端调用 getInitialProps() 来加载第一个页面，因此我们无法访问本地存储来获取会话。我们如何使用 nextjs 正确管理会话。

错误 - React.Children.only 期望接收单个 React 元素子元素。在相同的上下文中有很多问题，我尝试了这些解决方案，但没有找到解决方案。

该网站的导航栏是给我错误的原因。导航栏上方有一个部分可以正确渲染，当我尝试渲染下方的导航栏时会引发错误。

页脚显示正确，head 标签适用于所有元数据等（也适用）。所有代码的 Github 链接是 - https://github.com/yohanelly/website-jsx/tree/master/components

我一直在尝试使用next和redux-observable来实现反应服务器端渲染，现在我想实现 auth

登录时

• 点击登录
  • 签到
    • 设置登录类型
    • 设置登录数据
  • 调用后端 api 身份验证/登录
    • 如果响应说令牌已过期
      • 使用 refreshToken 调用支持的 api auth/refresh
      • 根据身份验证/刷新响应令牌设置 cookie
      • 根据身份验证/刷新响应设置身份验证数据
    • 别的
      • 根据身份验证/登录响应令牌设置 cookie
      • 根据身份验证/登录响应设置身份验证数据

关于访问需要身份验证的页面

• 检查调用的 cookietoken
  • 如果存在
    • 调用支持的 api auth/me 进行授权
    • 如果响应说令牌已过期
      • 使用 refreshToken 调用支持的 api auth/refresh
      • 根据身份验证/刷新响应令牌设置 cookie
      • 根据 auth/refresh 设置 auth 数据
    • 别的
      • 根据 auth/me 响应设置 auth 数据
  • 别的
    • 重定向到登录

上述步骤发生在史诗内部，如下

/epics/signin.js

我做了一些console.log(Cookies.get('token'))以确保 cookie 被保存，并且它打印令牌就好了，说它在那里，但是当我在浏览器控制台 > 应用程序 > Cookies 下检查时，什么都没有

所以在下面的 auth epic 中，getToken()总是会返回''，总是会派发authMeFailure(error)

/epics/auth.js

我使用js-cookie获取和设置 cookie

编辑：我实际上准备了一个包含getToken、setToken和removeToken的auth lib，如下

是的，我本来可以setToken()在史诗上使用的，只是想直接测试 cookie 设置方法

更新：

• 似乎尽管它不在控制台 > 应用程序 > Cookies 中，但它存在于每个页面上，因为如果我console.log(getToken())在组件渲染方法中这样做，它正在打印正确的令牌
• 但是每次我刷新页面时，它就消失了。有点像它被存储在一个 redux 状态，这很奇怪

更新#2：

好的，我想我设法让它工作，事实证明我们需要两种类型的 cookie，服务器端（刷新时生成的）和客户端（坚持导航），所以我无法做到的原因在史诗上获取令牌，因为它不是从服务器端传递的（至少这是我的理解）

我使用 create-react-app 开发了一个相当大的单页应用程序。
我正在将所有内容迁移到 NextJS，主要用于 SEO 目的。
我在一个问题上摸不着头脑：处理响应式设计的最佳方法是什么？
在我的 create-react-app 遗留代码中，我始终使组件与 window.innerWidth 保持同步，并使用它来处理大部分响应性（由 material-ui 处理的网格布局除外）。
但既然我们无法在服务器渲染期间猜测客户端的宽度，那么如何避免 UI 的“闪烁”呢？
我们是否需要延迟任何响应式 UI 逻辑，直到我们可以在客户端上执行？

我用 Next 开始了一个新项目，我的主要问题如下：

• 我的应用程序包含通过 npm 转译和安装的外部组件。这个组件需要 sass 文件

• 我使用 Zeit 团队提供的简单 withSass 模块，因此我可以在我的应用程序中包含这些组件

• 我收到以下错误：

/Users/antoine/react-platform/website-gamma/node_modules/star-rating/src/styles/style.scss:1 (function (exports, require, module, __filename, __dirname) { @import "_vars";

SyntaxError：无效或意外的令牌

我的解释可能是错误的，但看起来加载器工作但 ExtractTextPlugin 并没有取代任何东西。

这是我的 next.config.js：

这是我的 Webpack 配置（客户端和服务器）：

如何在 Next.js 的组件中加载图像？我必须先构建项目吗？如果是，有没有办法在不先构建的情况下加载图像？无论我尝试什么，我都无法让它发挥作用。