- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我正在 Next/React.JS 中开发视频/音乐流应用程序,从 Wordpress API/后端/ headless CMS 获取数据。它在本地主机上工作得很好(尽管目前它是真正的准系统功能) - 但是,当我尝试导出它以创建静态前端时,导出会反复失败(非常常见且通常很简单)“无法读取未定义的属性” ' 错误。
我花了过去 12 个小时严格调试并扫描here/GH等,在阳光下使用then()/catch()await等的所有组合,但我就是无法让它工作并且不能'我一生都想弄清楚为什么。我知道“标题”未定义,因为导出时尚未获取数据,但如何获取过去的“下一次导出”?这是我来自 single.js 的 getInitialProps - 问题似乎在于,在控制台中没有收到其他相关错误 - 我将在下面尝试导出时发布终端消息。这是我在数十个版本之后返回的地方 - 这是漫长的一天,所以可能会出现一两个愚蠢的错误,但是这个正在在本地运行, 没有任何错误。
static async getInitialProps(context) {
const slug = context.query.slug;
let post = {};
// Make request for posts.
try {
const response = await axios.get(
`http://timeline-music-30.local/wp-json/wp/v2/posts?slug=${slug}`
);
post = response.data[0];
} catch (err) {
console.error(err);
}
return { post };
// Return our only item in array from response to posts object in props.
console.log("post:", post);
}
我希望应用程序成功导出到静态站点,但它失败并显示以下终端消息:
copying "static build" directory
launching 3 threads with concurrency of 10 per thread
[==--] 2/4 50% 118/s 0.0s TypeError: Cannot read property 'title' of undefined
at _default.render (C:\Users\Terry\Documents\github\projects\timeline-music-3.0\nextjs\.next\server\static\YyI9s0TjENSVhc1SFZUcV\pages\single.js:158:35)
任何想法/帮助将不胜感激。
谢谢
特里
最佳答案
首先,返回后无法console.log。
第二。使用 isomorphic-fetch 和这种结构,我认为在你的情况下有帮助:
static async getInitialProps(context) {
const slug = context.query.slug;
// Make request for posts.
const resPost = await fetch('http://timeline-music-30.local/wp-json/wp/v2/posts?slug=${slug}');
const dataPost = await resPost.json();
console.log("post:", dataPost.data[0]);
return { post: dataPost.data[0] };
}
在组件中使用 {this.props.post}。如果这没有帮助,请看看我的案例,它在本地和生产中运行:
<小时/>在我的类似案例中,我解决了同样的问题:
我在网站 http://computers.remolet.ru/ 上解决了这个问题。任务是根据域生成不同的内容,因此页面通过 fetch 从 API 请求内容。这是我解决这个问题的方法:
添加到模块顶部:
import getConfig from 'next/config';
const nextConfig = getConfig();
// npm i isomorphic-fetch need
import 'isomorphic-fetch';
在页面上获取:
static async getInitialProps ({ ctx }) {
var host = '';
if (nextConfig && nextConfig.publicRuntimeConfig && nextConfig.publicRuntimeConfig.HOST) {
// server side
host = nextConfig.publicRuntimeConfig.HOST;
} else if (ctx && ctx.req && ctx.req.headers) {
// front side
host = 'http://' + ctx.req.headers.host;
} else {
// front side
host = 'http://' + window.location.host;
}
const resPricelist = await fetch(host + '/api/pricelist');
const dataPricelist = await resPricelist.json();
const resNewPricelist = await fetch(host + '/api/newpricelist');
const dataNewPricelist = await resNewPricelist.json();
const resContent = await fetch(host + '/api/content');
const dataContent = await resContent.json();
return {
pricelistData: dataPricelist,
newPricelistData: dataNewPricelist,
contentData: dataContent
};
}
在组件中使用:
<Header as="h1" align="center">
{this.props.contentData.h1}
</Header>
在 next.config.js 中:
module.exports = withCSS(withSass({
cssModules: true,
serverRuntimeConfig: {
PORT: process.env.PORT, // eslint-disable-line no-process-env
HOST: process.env.HOST, // eslint-disable-line no-process-env
CONTENT: process.env.CONTENT // eslint-disable-line no-process-env
},
publicRuntimeConfig: {
PORT: process.env.PORT, // eslint-disable-line no-process-env
HOST: process.env.HOST, // eslint-disable-line no-process-env
CONTENT: process.env.CONTENT // eslint-disable-line no-process-env
}
}));
使用环境启动节点:
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"dev": "HOST='http://localhost:8000' PORT='8000' CONTENT='./db/computers.json' PRICELIST='./db/pricelist/computers.json' PRICELIST2='./db/pricelist/newComputers.json' node server.js",
"build": "next build",
"start": "next start"
},
这在本地主机和服务器上工作。
只需使用 isomorphic-fetch,如果您从绝对 url 获取,则只需构造即可:
const resPricelist = await fetch(host + '/api/pricelist');
const dataPricelist = await resPricelist.json();
return {
data: dataPricelist
}
这是大约 20 个小时尝试和阅读 Next.js 论坛的结果。希望我能帮助你:)
附注不要忘记只能在页面组件上使用 getInitialProps ({ ctx }) ,而不能在子组件中使用!
关于javascript - 如何修复失败的 NextJS 导出 - 在本地工作正常,但导出时失败,令人沮丧 :(,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/57138416/
我已经为我的 NextJS 网站完全实现了 next-i18next。一切正常: 使用 i18next 中间件自动检测语言 使用语言选择按钮更改语言 仅在相关命名空间等中加载的翻译 但是,我想本地化路
nextjs 是如何处理 SEO 的?我试图通过从浏览器直接调用它 (localhost:8080/about) 来呈现页面,但 NGINX 返回 404。主页中嵌入的同一页面的链接有效,但无法使用
我有一个 react/nextjs 应用程序,我有 firebase.js 如下: import firebase from 'firebase/app' import 'firebase/auth'
我正在尝试将 Nextjs 与 graphql-tag/loader 集成,这是我的 next.config.js 文件: const withSass = require('@zeit/next-s
我使用的示例与文档使用的几乎相同。。我的完整代码(字面意思仅此而已):。当然,我可以使用reDirect()函数,但我需要将此重定向标记为永久重定向。。我研究了下一个/导航文件,其中没有permane
I use pretty the same example as documentation does.我使用的示例与文档使用的几乎相同。 My full code (literally no
为了部署 NodeJS,我使用 systemd 并配置/lib/systemd/system/[service_name].service 文件 ===========================
我只是尝试使用@sentry/nextjs 和 sentry 向导将 sentry 与 NextjS v12 集成,在集成 Sentry 之前在本地主机上一切正常,但是当我在 AWS Amplify
更新到 Nextjs 12.1.0 后,当我通过 api 路由调用 api 时,返回以下错误。我正在使用 aws amplify。 CloudFront 控制台返回以下错误: 我的 api 路由: c
我有一个简单的 nextjs 应用程序,在主页上我只显示一个包含 10 部电影的列表和一个按钮/链接,这会打开该电影的特定页面。在该页面上,我想显示该电影的所有内容。 我的第一种方法是像这样将电影 I
我正在开发 NextJS 应用程序,但我无法让 Image 组件正常工作。 正常的 img 元素使用与 Image 组件相同的 src 属性路径可以正常工作。 我的项目有标准的公用文件夹,里面有一个名
我是 NextJS 的新手,正在尝试弄清楚如何创建一个我可以随时分配不同值的全局变量。有人可以举一个简单的例子吗? (我知道全局可能不是最好的方法,但我仍然想知道如何设置全局变量)。 假设: _app
我有一个可通过以下 http://localhost(这是主应用程序的 url)访问的应用程序和另一个可通过 http://localhost/subapp(这是子应用程序的 url)访问的应用程序,
我在 Internet 上四处寻找解决此问题的方法,但仍未找到有效的方法。我尝试了以下状态管理工具: 使用上下文 终极版 坚持 后坐力 我希望我的 NextJS 站点在我单击一个简单按钮时更新每个页面
我在开发中发现重写代理到我的后端服务器: https://nextjs.org/docs/api-reference/next.config.js/rewrites rewrites: async (
我真的一直在努力了解如何在 nextjs 中处理环境变量,但我仍然不明白。我只是想从下面的代码中隐藏我的 API key 。据我了解,我只能通过使用 getServerSideProps 或 getS
我是 NextJS 的新手。我想知道 next/router 和 next/link 之间的典型变化和用例。 在各种情况下我应该使用哪一个?哪个做什么?例如,如果我想加载共享组件或在服务器端呈现的页面
我在 Next.js 中收到此错误: Error: The provided 'href' (/subject/[subject]) value is missing query values (su
我有外部目录 common我想将该目录中的 react 组件导入web-static .在 web-static我正在使用 nextjs。 目前我有这个错误:Module not found: Can
是否可以只为特定路由添加提供程序,而不是在下一个 js 中转到我的整个应用程序? my "pages" folder 我的上下文文件 [server.jsx] import { createConte
我是一名优秀的程序员,十分优秀!