问题标签 [nextjs]

我已经将我的 NextJS 项目（改编自https://github.com/zeit/next.js/tree/master/examples/with-firebase-hosting）部署到 firebase，但是当我浏览到 URL 时，我得到“内部服务器错误”。

部署确实成功运行：

所以我觉得这可能与我的项目结构有关？还是 firebase.json 配置？有人可以看看让我知道吗？

这是我的项目根目录中的 firebase.json：

我正在寻找例如如何使用Next.jsgetInitialProps的钩子来处理redux-observable ajax 史诗。甚至可能吗？

换句话说 - 如何在getInitialProps：

...所以我可以在服务器上获取初始数据。

getInitialProps的文档

我正在使用Next.js和Axios库。

我的 axios 请求如下所示：

当我在同一个实例中拥有 API 和渲染服务器时，这很有效。但现在我的 API 后端完全分离了。

在开发模式下，它托管在localhost:3001前端（下一个）开发服务器托管在localhost:3000. 在生产中，渲染服务器托管在，https://example.com而 API 托管在https://api.someoherdomain.com.

如何保持 axios 请求干净（无需手动导入内容和为 url 字符串添加前缀），保持它们一样，/api/users/1但localhost:3000/api/users/1在运行开发模式和https://example.com/api/users/1托管在生产中时自动生成它们。

我需要像https://github.com/zeit/next.js/tree/master/examples/with-custom-reverse-proxy这样的东西，但要同时在生产和开发模式下工作。

不是推荐的生产规模方法（因此显式开发标志），因为我们应该将代理范围作为 UI 应用程序之外的范围，并有单独的 Web 服务器来处理它。

如果这是不可能的，我正在寻找最优雅的方式来处理这个问题。有什么建议么？

在生产中，我们使用 Plesk（使用 Ngnix）。

我正在为 next.js 页面编写一个 HOC 组件，而这个 HOC 需要接受具有特定getInitialProps静态功能的组件。

我无法通过流程找出正确的打字方式：

我收到此错误：

演示

在使用 Material-ui Hidden API 和 React Lifecycle 方法时，我遇到了一些错误。

隐藏的 API

背景：我正在使用 React、Next、Cosmic 构建一个博客。来自 cosmicJS 的帖子内容是通过 dangerouslySetInnerHTML 插入的。

为了给 CosmicJS 中的组件设置样式

然后使用 Hidden API 来制作响应式页面。由于某种原因，隐藏 API 通过 componentDidMount() 导致组件样式出现问题。就我而言，在博客文章结束时（页面结束），将呈现一篇新文章。只有在渲染新帖子时，上述样式才会生效。

对此有何建议？

我在这里需要帮助。我正在使用 Next.js 为朋友创建投资组合，而我要解决的问题是索引页面的初始页面加载。在我的本地/开发环境中，第一个初始页面加载会先呈现移动布局组件（参见下面的代码），然后再呈现桌面布局组件（一个错误）。现在，使用提供的链接将应用程序部署到托管服务器后 - https://chezportfolio-mdirmhphih.now.sh/ 该页面仅加载和维护不正确的移动布局。导航到其他路线并返回后，布局会自行更正。此外，我正在使用 React-Media 来根据媒体查询呈现特定组件。我不完全确定是什么触发了这个问题，但我猜是 Next 的 SSR 功能。

如果您需要进一步深入研究，下面列出了我的存储库的链接- 链接到回购

编辑：我仍然被困在这个问题上，在解决这个问题之前真的无法取得进一步进展。

我将我的 reactJS 版本从 v15.6.1 更新到 v16.0，将 Next.js 从 3.2.2 更新到 4.0.0-beta.2。

我npm run dev像往常一样运行我的，我收到了这个消息错误：

有什么想法有什么问题吗？

尝试在 componentWillMount 中获取数据以进行服务器端渲染时收到警告：

警告：setState(...)：只能更新安装组件。这通常意味着您在服务器上的 componentWillMount() 之外调用了 setState()。这是一个无操作。

以下是代码片段：

我确定在调用 this.setState 之前数据是正确的。

如果对 JSON 数据进行硬编码，一切都很好

不知道怎么回事，求指教，谢谢。

我用 next.js 创建了一个网站，它从解析服务器检索它的数据，问题是我想限制我的解析服务器 api 只能由我的网站访问，我想我是否可以生成密钥或令牌当客户端点击网页并将其发送到解析服务器（网站和解析服务器位于不同的地方）并将其传递给网站时，解析服务器在每次请求时都会检查此密钥及其有效性并决定是否它是否接受客户，我想知道这是否是一个好主意，或者是否有更好的方法来做到这一点。

编辑：

我的问题是如何保护我的 api 并且只能由我的网站访问，我通过只允许您的域访问您的 api 但 javascript 在客户端执行并且没有固定域来找到限制域的内容。所以我想如果我生成一个令牌并将其传递给客户端并将其发送到解析服务器。

客户端使用此令牌连接到解析服务器，如果令牌有效，则解析服务器接受它并为其提供数据，否则它拒绝客户端，并且客户端无法生成令牌，因为它是在服务器端生成的网站（我的 next.js 网站具有自定义路由，因此有一个快速服务器，可以在将页面发送到客户端之前做一些工作）。

最后请告诉我这种方法是否好，如果它不是保护这样的 api 的最佳方法。

I have an app with a single page index.js, and I parse the query parameters in getInitialProps:

I use <Link href={pathname, query} prefetch> tags to build my links.

The screenId property is key to finding the right page to render.

However, when I use the back button in the browser to a page without screenId set, getInitialProps doesn’t return screenId:undefined as expected, but another value (as you can see in the console log):

When I refresh the page, I get the right properties and see the correct results.

The “imaginary” screenId is actually a valid value, but I have no idea where this value comes from.

Why is this happening?