从“下一个/路由器”导入路由器，{withRouter} 是否可以从Router.x或props.Router.y访问referer（以前的url值）属性？否不可能您必须使用全局状态（redux、localStorage…）跟踪以前访问过的页面

使用创建下一个应用程序像这样创建新项目 npx create-next-app next9.1 cd next9.1 tree -I node_modules ├── components │   └── nav.js ├── next.config.js ├── package.json ├── pages │   └── index.js ├── static │   └── favicon.ico └── yarn.lock 创建/pages/api/index.ts文件，然后客户端可以

请原谅我的新手问题，但是我很难让它正常工作 我很难通过Next.js、Apollo和GraphQL瑜珈获得正确的订阅。我已经试着到处寻找答案，并且已经为此工作了大约两周，但运气不佳 我的代码是从Wes Bos的高级GraphQL课程代码开始的，它使用了Next.js、Apollo、Prisma和GraphQL瑜伽。它还使用cookies存储JWT令牌，我认为这可能会导致WebSocketLink身份验证出现问题，但我可能错了。我已经成功地将上传添加到AmazonS3，但我一直在努力让订阅正常工作

我的应用程序利用了函数（在构建时从api获取） 我希望npm每小时运行一次build，这样应用程序就可以从api获取并保持最新 非常感谢您的建议。我不建议您这样做。有比触发构建更好的解决方案 它从API中获取什么样的数据？如果您请求的数据是动态的（apon构建时除外），那么我不明白您为什么要使用非预期功能 也许通过对您的用例进行更多的解释，我们可以建议一种更好的方法？我不建议这样做。有比触发构建更好的解决方案 它从API中获取什么样的数据？如果您请求的数据是动态的（apon构建时除外），那么我不

因此，我有一个组件results.js，在这个组件中，我从后端服务器获取数据 import { useRouter } from 'next/router'; import Navigation from '../../components/Navigation'; const Results = (props) => { return ( <div> <Navigation /> {console.log(props)}

我是Next.js的新手，我一直在阅读他们关于制作动态路线的教程 本教程介绍了如何实现动态路由以在posts目录中显示标记。 现在，如果您在部署之前拥有所有的博客，这是很好的，但是如何在不触发重新部署的情况下使用新博客更新该文件夹？ 澄清：我的理解是，每当你更新上传到你的托管提供商（例如Vercel）的任何文件时，你的网站就会重新部署 谢谢。如果您要为每一篇新的博客文章创建网页，那么您需要重新部署。但是，您可以将网页的内容存储在其他位置并呈现内容。例如/blog/post about somet

我正在用Nextjs构建我的网站，导入BabyonJS时出现了以下错误 syntaxError: Unexpected token 'export' module.exports = require("@babylonjs/core") 我正在使用tsconfig.json的标准nextjs设置 我参考了巴比伦的文档，并逐字逐句地使用了这些示例 经过一段时间的探索，我终于学会了以下几点 @babylon（es6）并没有编译成javascript，而是一个定义良好的（

我们在Webflow和中创建了一个登录页。我们现在有一个HTML，CSS，JS和图片从这个出口 我们的应用程序是用Next JS构建的，托管在Vercel上。我想从某些路线（如/、/pricing、/about）和我们自己的应用程序等）为上面的静态站点提供服务 我们已经研究了下一个JS，但它与Vercel不兼容。也进行了研究，但它的优先级低于静态页面，所以不起作用 我们曾经有一个节点应用程序，可以直接将某些路由指向静态HTML，其他路由指向我们的React应用程序。不知道如何在下一个JS中做到这

人们 这很好，也很简单。但是：从同一个库中导入多个模块的最佳方法是什么？ 具体来说，我希望使用Next.js使用Onsen UI（构建PWA）。Onsen仅使用服务器端不存在的“窗口”对象进行渲染。所以，我想动态导入这些组件并在客户端渲染 我必须从“react onsenui”导入几个模块，如页面、按钮等 const Page = dynamic( () => import('react-onsenui').then( mod => mod.Page

我是nextJS的新手，通过CDN在应用程序中加入bootstrap的时候很不愉快。在应用程序中，在何处添加链接是最佳做法？要覆盖默认文档，请创建文件/pages/\u Document.js，并扩展文档类，如下所示，并将CDN路径放在HEAD标记之间 有关更多信息，请参阅 import Document, { Html, Head, Main, NextScript } from "next/document"; class MyDocument extends Docu

它在本地工作。 然而，一旦我将nextServer 500部署到firebase上，它就会出现内部错误 next-I18下一版本 8.1.3 配置 代码 _app.tsx import { appWithTranslation } from 'next-i18next'; const App = ({ Component, pageProps }: AppProps): JSX.Element => { return ( <Provider store={store}&

谁能检查一下这个 我真的需要帮助，因为我被困住了 提前谢谢 卡洛斯·维埃拉 pkg app.js > pkg@4.4.0 > Targets not specified. Assuming: node10-linux-x64, node10-macos-x64, node10-win-x64 shintaro@shintaro-PC:~/Desktop/projects/github/frontend$ ./app-linux > Using "webpackDevM

我可以使用 req?.headers?.cookie 我可以在api路由中读取它们，如果请求不是使用ssr，我也可以设置它们 res.setHeader（'Set-Cookie'，…） 但如果请求来自API解析器中的getInitialProps（SSR），如何设置/删除它们 // Api handler const handler = async (req: NextApiRequest, res: NextApiResponse): Promise<void> => {

我想在我加载的所有页面中获得相同的道具。我试着用\u app.js这样做： 导出默认函数MyApp（{Component，pageProps}）{ 返回 } MyApp.getInitialProps=async（appContext）=>{ 返回{ 道具：{ testApp:[1'、[2'、[3']， 测试PP2:'222' } } } 但它不起作用。我得到一个空对象： const Error=（props）=>{ 控制台日志（道具）； 返回( ... ) } 我做错了什么？在getIni

我有一个MERN应用程序，其中集成了NextJS。第一次使用NextJS，请容忍我。我最初在任何地方都使用了SSR（getServerSideProps） 要点： 我有超过150000页的静态内容，它永远不会改变 每周我都会添加大约+100个新页面 我想这里的理想情况是使用getStaticProps和getstaticpath，在最初构建了15万页之后，每周只构建新添加的页面，并保持我已经构建的页面不变，因为它永远不会改变 我怎样才能做到这一点？我应该在这里使用revalidate？我一直

在next.js中，我们可以通过在实现中定义getStaticProps（）来向平台传递一个提示，以便在构建时预呈现某些页面 我们在pages/API/中实现的API端点是否有类似的机制 示例：我们有一个静态呈现来自数据库或外部网站的帖子的页面，我们希望API端点能够在同一时间返回状态完全相同的帖子，只返回JSON。我相信API路由没有这种情况 您可以做的是在请求getStaticProps中的数据后，将帖子保存到磁盘或外部存储器上的某个文件，然后将此文件用作api路由处理程序的数据源，类似于：

我不熟悉next.js。我刚刚创建了我的第一个next.js项目。但我无法运行我的项目 npm运行dev抛出以下错误 有人能帮我吗？你能展示你的包.json文件吗？你有没有尝试添加与css或sass相关的依赖项？尝试删除它们，首先运行下一个应用程序，然后逐个添加它们one@juliomalves{“name”：“next crash course”，“version”：“0.1.0”，“private”：true，“scripts”：{“dev”：“next dev”，“build”：“nex

我有这个getServerSideProps函数，我想键入上下文的{query}，但我找不到关于如何执行此操作的文档 从“下一步”导入{GetServerSideProps}； 接口HomeProps{} 接口HomeQueryParamas扩展了ParsedUrlQuery{ 页面：字符串； 排序：字符串； } 导出常量getServerSideProps:getServerSideProps< 家庭道具， 家蚕 >=异步（{query}）=>{ //查询的类型为ParsedUrlQuery，

当我点击/index.js中的链接时，它会将我带到/about.js页面 但是，当我通过URL（比如/index.js将参数名从/about.js传递到/about.js）时，我不知道如何在/about.js页面中获取它 index.js 从“下一个/链接”导入链接； 导出默认值（）=>( 单击{'} 在这里 {' '} 阅读更多 ); 在about.js页面中使用以下代码获取： //pages/about.js 从“下一个/链接”导入链接 导出默认值（{url:{query:{nam

如何在nextjs中使用NextHead并设置opengraph标记。我正在从细节页面传递道具，但它没有出现在源代码中 <NextHead> <title>{title}</title> <meta property="og:type" content="website"/> <meta name="description" content={description}/> <meta propert

在下一个js中，页面的典型路径是： /pages/blog/index.js 在VisualStudio代码中，这意味着当我编辑一堆页面时，它们都会在选项卡中显示为index.js，从而很难对文件进行排序 我更喜欢这样命名我的页面： /pages/blog/blog.js 如需有关详细信息，请访问example.com/blog时转到的页面 有没有办法在Next.js中配置此行为？您可以将内容从index.js移动到blog.js 然后在index.js中输入以下代码： import blog

模块分析失败：意外字符'�' (1:0) 您可能需要一个合适的加载程序来处理此文件类型，目前没有配置加载程序来处理此文件。看见 （此二进制文件的源代码省略） 导入图像时出错 有人知道为什么会这样吗 我正在next.config.js导入下一个图像中使用nextjs const withImages = require('next-images') 在module.exports中，可以像 module.exports = withImages({ ...//your content here

当我删除带有softDelete列的实体时，deletedAt和deletedBy为空或未设置 如果我尝试softRemove，它只设置deletedAt标志 以下是实体的一些代码： @DeleteDateColumn({ name: 'deleted_at'}) deletedAt: Date; @Column({ type: 'varchar', name: 'deleted_by', nullable: true }) deletedBy: string; 服务方面： public a

我听从了老师的指示 但是当我尝试替换tailwindcss对象时 // postcss.config.js module.exports = { plugins: { tailwindcss: {}, autoprefixer: {}, } } // postcss.config.js module.exports = { plugins: { '@tailwindcss/jit': {}, autop

我正在使用NextJS，在_app.js文件中，我执行以下操作来导入antd样式： import 'antd/dist/antd.min.css'; 然后在页面上有一个按钮，如下所示： import { Component } from 'react'; import Button from 'antd/lib/button'; class Performance extends Component { render() { return (

我通过npx create Next app创建了Next.js app 创建完成后，我就开始使用Thread dev。 它应该在pages/index.js中显示默认页面，但没有显示任何内容。 有了这些错误。我做错了什么我仍然不知道。

如何使用Next.js制作“返回”按钮？“下一个/路由器”似乎不支持返回 <Button onClick={() => Router.BACK()}>Back</Button> Router.BACK（）}>BACK Router.back（）}>back你可以使用Router.back（）或者你甚至可以调用window.history.back（）我在哪里可以找到“next/Router”的引用？我在哪里可以找到“next/Router”的引用？@JimJin你

我想获得历史的价值，并在这个.props中匹配。我正在使用next/router导入withRouter。我想使用this.props.match.params获取url和历史记录中的值。按重定向。如何在Next.js中获取此信息。现在我没有在这个.props中获取历史记录和匹配。下一个/router没有像react dom router那样提供历史记录，它在组件的props中提供了一种称为查询的东西 这是官方的 从“下一个/路由器”导入{useRouter} const Post=（）=>{

我知道这种注入CSS的方法： import Head from 'next/head' export default function Home() { return ( <div className="container"> <style jsx global>{` body { margin: 0; } `}</style>

我试图创建一个简单的NextJS站点，在所有链接上都有/app前缀，但没有成功。因此，在主页上（有一个链接到/about），about链接应该以/app/about结尾 （根据下面的评论更新）我的next.config.js文件如下所示： module.exports = { assetPrefix: "/app", publicRuntimeConfig: { basePath: "/app", }, basePath: &quo

opencv4nodejs模块工作正常，但当我将其与next.js集成时，它显示了以下错误-- 当我单独运行OpenCV部件时，它工作正常，但当我在index.js中导入它时，它会显示一个错误。有人能帮我解决这个问题吗 Error in ./utils Module not found: Error: Can't resolve 'child_process' in '/Users/yathartharora/Certificate/node_modules/opencv-build/build

我想包装我的整个应用程序，使其无法访问，除非用户登录。如果用户没有登录，我设法将用户重定向到登录页面，但是，在重定向发生之前，我仍然看到私有路由的闪光。如何避免这种情况？因为NextJS是服务器端呈现的，所以您需要使用getServerSideProps检查身份验证，或者在重定向之前在前端显示加载指示器 检查客户端的身份验证 创建一个包装器组件并将其放入\u app.js文件中。通过在用户仍在进行身份验证时显示加载组件，可以防止显示专用仪表板。注意：因为Next.js是服务器端呈现的，所以HTM

我正在开发shopify应用程序，我正在使用shopify推荐的shopify应用程序CLI来创建和提供应用程序。我发现每个页面的页面大小都太大了。我附上一个截图供参考 这非常烦人，并且使得开发非常缓慢。这是预期的，我是否遗漏了什么，是否有任何配置需要更新 继续进一步调查，我从shopify cli创建了一个简单的节点应用程序，没有添加任何个人代码，只是shopify cli创建的普通裸体应用程序，在我的开发商店中提供此应用程序时，我仍然会遇到大量页面大小，导致加载页面的时间延迟（页面大小过大

我正在使用NextJS，我有一个疑问 我的应用程序有这样一个页面 /supperter/[id] 我必须通过身份验证才能呈现它 我做了所有的auth部分，除了这个页面，它对我所有的其他页面都非常有效，因为我没有机会访问设置为访问后端的cookie export async function getStaticPaths() { const resProducts = await fetch(`${process.env.PRIVATE_ENDPOINT}/developers`, {

在不使用选择器（按钮{}）指定/包装的情况下，以下样式化jsx样式声明将起作用。这个按钮的样式很合适，非常棒。然而，像这样的用法并没有在网站上记录，所以我想知道这种语法是否得到官方的支持和安全使用 <button> <style jsx>{` background-color: red; :hover { background-color: #ccc; } `} </style> Test </butt

在我的next.config.js中，我有以下配置： module.exports = { publicRuntimeConfig: { // Will be available on both server and client GRAPHQL_URL: process.env.API_URL, }, } 我的脚本如下所示： "build": "next build", &quo

我已经在NextJS上做了一段时间的修补工作，我正在尝试将一个应用程序转换为使用getStaticProps和GetStaticPath和[id].js在各自的文件夹中预呈现静态页面（例如pages/posts/[id].js、/pages/articles/[id].js等）。因为这两个函数保证在服务器上运行，所以我选择将fetchdb函数从公共API直接移动到这些函数。因此，在我的[id].js文件中，我有如下内容： getStaticProps： export async function

假设我有一个电子商务网站 大多数（如果不是所有的话）API都位于另一台服务器上 一个用户把一些东西放进购物车 登录，还是不登录 叶位 请稍后再来 会话从cookie激发，预填充购物车 我感到困惑的是，如何在站点范围内完成这项工作，以及如何使用预渲染等。。 我是NEXTJS的新手 现在写，在我当前的站点上，我只是调用会话api。预饱和redux，然后显示页面。标准的东西。好奇这将如何与下一代和预渲染/静态生成等一起工作。静态生成仅适用于构建时存在的数据，在本例中，这些数据将在请求时存在-因此，您只

因此，我使用useSWR钩子从api端点获取数据。我知道它使用api路由作为缓存数据的密钥 问题是，我在两个页面上使用了一个api路由（让我们称它们为Page1和Page2），只是用于不同的查询。因此，每当我首先访问第1页时，如果我随后导航到第2页，它会显示第1页的缓存版本，反之亦然 我尝试在两个页面上使用mutate函数，它所做的只是在重新验证之前首先显示缓存的版本。这并不理想。我想要的是页面挂载，正确的数据应该显示 我还尝试在_app.js中的SWRConfig选项中将revalidateO

我想在我的项目中包括一个评级系统（比如YouTubehas）（使用Next.js）。我应该如何用Prisma-语言对评级进行建模 我知道这是一个简短的问题。这值得一个简短的回答 谢谢，伙计们 这里有一个Prisma模式，允许您记录电影的分级以及对该动作进行分级的相关用户： model User { id Int @id @default(autoincrement()) email String @unique city

我正在尝试将Apollo客户端状态数据与钩子useQuery和useMutation一起用作NextJS应用程序中的全局存储。 当我使用apollo（）遵循NextJS中名为的示例时，它使用一个HOC，在其中运行所有查询并首先在服务器上呈现应用程序 通常，您希望捕获组件中的“加载”状态，如下所示： const { loading, data } = useQuery(GET_NAME_QUERY) // some @client query if (loading) return <p&g

与创建/pages/api/myserversidecode.js并获取服务器端代码相比，是否有更好/更快/更集成的方法从客户端调用服务器端代码 我只是想知道我是否遗漏了一些明显的东西 背景： 我有几行代码要在服务器上执行。（代码包含一些验证、对其他服务器的调用，还有一些令牌不想显示）。在下一篇文章中，我发现通过将代码放在/pages/api文件夹中，您可以很容易地创建api端点，这很好。要调用该代码，我需要获取/发布到端点。Next.js自己的示例大量使用fetch（“/api/…”），因此这

我正在使用nextjs 9.3.5，即使是最简单的getServerSideProps示例也总是失败： 函数页（{data}） { //未定义的打印 控制台日志（数据）； 返回props中的数据：{Data} } 导出异步函数getServerSideProps（） { var data=“Hello”； //打印“你好” 控制台日志（数据）； 返回{props:{data}}； } 导出默认页面 这基本上是nextjs网站上一个非常简单的示例的剪切粘贴。getInitialProps工作正常

Hi as per docs是一项仅在服务器端执行的功能 export async function getServerSideProps(context) { console.log("hello world"); debugger; return { props: { age:55 }, // will be passed to the page component as props } } 因此，简单地删除调试器关键字是行不

正如您在这里看到的，我使用了useQuery（），但我只希望它获取一次。不确定这是NextJS问题还是react查询问题。没有代码很难评估，但这对我来说在NextJS中很有效。问题可能在于调用useQueryhook的位置 function App (){ const { loading, error, data: { listCourses: courses } = {} } = useQuery( listCourses(), { variables: { t

我的项目中既有Next.js又有Storybook，在使用全局样式时遇到了一些问题。所有组件都使用scss模块，因此组件目录结构类似于components/myComponent/myComponent.tsx和components/myComponent/myComponent.module.scss。/styles/中存在一些全局样式，但是当我尝试在模块中使用它们时，我得到了@apply不能与.className一起使用，因为.className或者找不到。我想我需要在顺风前对这些全局样式进

使用Next.js，我可以毫无问题地获取header.js文件中的上下文值，但它在app.js中返回undefined 这是我的密码 useLang.js 从'react'导入{createContext，useContext，useState} const LangContext=createContext（） export const LangProvider=（{children}）=>{ const[lang，setLang]=useState（'en'） const switchLan

指向/的链接将刷新页面。当用户导航到主页时，我能做些什么来阻止页面刷新吗？说明：在网站上的页面之间链接时，使用HTML标记。在nextjs中，使用Next/Link中的Link组件包装标签。它允许您对应用程序中的不同页面进行客户端导航 照办 // import Link from "next/link"; <Link href="/">Home</Link> 家 另一种选择是使用next/router并使用onClick事件

我正在使用创建一个web服务并将其连接到MongoDB数据库。我现在可以使用Google Auth登录，并且记录可以正确保存到我的数据库中。我现在需要将新模型添加到我的数据库中，并通过API路由添加到它们中 我随后添加了一个自定义模型Test Test.js 导出默认类测试{ 建造师（姓名）{ 如果（姓名）{ this.name=名称； } } } 导出常量TestSchema={ 名称：'测试'， 目标：测试， 栏目：{ 身份证：{ //此属性在MongoDB中具有'objectId:true

我们在Netlify上有一个NextJS应用程序。我们使用NextJS _error.js文件实现了自定义错误页面，但是当发生404或500错误时，我们会得到Netlify错误页面，而不是显示NextJS错误页面 netlify.toml中是否有我们必须禁用的内容，以便获得我们自己的NextJS错误页面？还是有其他解决办法 要使用自定义404错误页面，您需要使用at页面/404.js而不是页面/u error.js，因为404页面将静态生成\u error.js似乎主要用于500或其他服务器错误