有些东西让我对下一个js感到困惑 嗨，我有一些问题让我对下一个js感到困惑 api路线 是否必须将api路由部署到lambdas函数 将api路由部署到lambdas函数有什么好处 如果我在大项目中使用api路由而不是在express应用程序中使用api路由，这不是问题吗 数据获取 我们需要getServerSideProps吗？如果需要，请给我一些用例好吗 我可以使用getServerSideProps为我提供的getStaticProps、增量静态再生和使用swr获取客户端数据的相同用例吗

我试图将Zoom集成到我的网站中。我正在使用NextJS。 前面有一个错误-窗口未定义。我知道服务器不能有窗口对象，因此发生此错误。我已经修复了错误，但不确定这是否正确。我觉得这是一个骇客：）。如果有人能给我建议，我会非常感激的。 即使给出了修复，我还是看到了一个我想要避免的警告。 警告：服务器HTML中应包含匹配的。 同样，这是因为服务器生成的代码没有按钮，但在客户端，它会呈现按钮。这是修复的一部分。有什么好办法克服这个问题吗？ 供你参考 我运行应用程序时也有两个错误 GET http://l

我正在使用Next.js+Wordpress/Graphql作为无头CMS并部署到Vercel 当在生产（vercel）上创建新帖子时，我得到了一个404，而不是在本地或使用next build时。奇怪的是，当我重新部署或将新版本推送到repo，vercel重新构建时，它解决了问题 我想这和这个有关系吧 我与以前的Wordpress服务器有一个类似但略有不同的问题，该服务器响应了429个太多的请求。但在第一次构建中，当生成所有页面时，会出现问题，因此会发出更多请求。我已经切换到另一台似乎可以解决

我已经在next.config.js上设置了图像域，但是图像没有显示在localhost上。然而，当代码被推送到生产环境时，图像被加载到vercel上 在localhost上，我看到下面的图片。图像不加载 在制作过程中，可以看到图像 我应该怎么做才能看到发展的图像 module.exports = { images: { domains: [ 'd31wtm2rx76rut.cloudfront.net'], }, } 在本地运行应用程序时，图像是否使用与

我的第一个Next.js应用程序几乎完成了 Dev的加载速度总是有点慢，但是生产是绝对荒谬的 第一次加载时，主页需要30秒以上的时间才能呈现 我见过速度非常慢的站点需要5-10秒，但我可能做错了什么会导致30秒的加载时间 预回迁是一个巨大的性能杀手吗 找到瓶颈： 首先，你需要找出是什么让你的网站变慢。 为此，我推荐您使用开发工具的“网络”选项卡 开发人员的常见错误： A.开发而非生产模式： Next.js有两种模式。开发模式（next dev）相当慢，因为很多开发工具都是执行和发布的 要在生产模

我是新来的下一代JS，不明白为什么我的ThemeProvider没有接收和使用我的背景色 我觉得我已经正确地复制了教程，所以我必须很接近，对吗 我的错误是TypeError:无法读取未定义的属性“background” globals.js import { createGlobalStyle } from 'styled-components'; export const GlobalStyles = createGlobalStyle` *, *::after, *::befo

我正在服务器中使用Next.js v10.0.7和Node v14 当我尝试部署到Vercel时，会出现此错误错误：找不到路由的lambda:/index 我正在使用basePath:“/blog”并且当我更改此配置时，不会出现此错误，但是我需要此basePath 我不理解这个错误 本周我在next.config.js中没有做任何更改，当我部署到AWS时，它工作得非常好。我想他们一定在平台上做了一些更改，因为我也遇到了类似的情况。我得到了同样的错误，并且使用了一个basePath（在过去工作得很

我正在使用NextJS，当我构建我的应用程序时，我的控制台会返回我： ModuleParseError:模块分析失败：意外字符“”（1:0） 您可能需要适当的加载程序来处理此文件类型 我想知道发生了什么问题，因为我已经建立了一个自定义网页的配置 下面是我的next.config.js： module.exports={ exportPathMap: () => ({ "/": {page: '/'} }) } const config = { cssModu

中继在运行其GraphQL编译器时强制执行查询命名规则： 分析错误：错误：RelayFindGraphQLTags：graphql标记中的操作名称必须以模块名称作为前缀，并以“突变”、“查询”或“订阅”结尾。在模块Uuid中获取了editFormQuery。在“pages/edit form/[uuid].tsx”中 问题是我的Next.js页面名为src/pages/edit form/[uuid].tsx，这使得中继请求查询名称以“uuid”开头。我将以许多名为“UuidQuery”的查询结

我有一个基于create react app构建的应用程序，它从服务器加载路由信息（登录用户允许的路由列表），并根据该信息生成路由。比如说, 用户登录 应用程序发出获取路由数组的get请求 应用程序将遍历获取的结果并返回一条路径： routes.map（（route）=>） 我的问题是，我们可以在NextJS中做类似的事情吗？听起来您可以使用 api.login（） .然后（（）=>router.push（“/some route”） NextJS甚至有这个可以帮助你 现在，为了进一步扩展，

我试图在NextJS静态站点上使用localStorage，但遇到localStorage未定义错误 显示错误的组件的代码为： export default function Category() { const [cart, setCart] = useState( localStorage.getItem("myCart") || "" ); useEffect(() => { localStorag

当我在PC上本地构建时，我没有任何问题。当我在heroku或vercel上构建时，我会收到以下错误：“无法解析模块xxxxxx”。我能在过去和vercel一起建设。我不知道我做了什么错误，因为我上次犯的是导致这些错误。我目前运行的是下一个9.5.1版，但当我降级到9.3.3版时也出现了错误 以下是heroku的远程日志： 未能编译 远程：./components/layout/landing/HomePageTabs.js 远程：未找到模块：无法解析中的“../../products/produ

我的代码如下： 从“React”导入React，{useffect} import alanBtn from '@alan-ai/alan-sdk-web'; const alanKey = my key; const App = () => { useEffect(() => { alanBtn({ key: alanKey, onCommand: ({ command }) => {

我是Nextjs新手，试图通过multer上传文件，得到错误TypeError:无法读取未定义的属性“transfer encoding”。路由是受保护的，因此必须添加auth中间件，该中间件工作正常，但我无法确定在这种情况下如何使用multer 这是代码 multer.js import multer from "multer"; import path from "path"; // Multer config export default mult

我正在使用Strapi和。下面的代码未使用Internet Explorer版本11呈现页面。你能提出可能的问题吗 import React，{useState}来自“React”； 从“Strapi sdk javascript/build/main”导入Strapi； 自述文件： ⚠️ 此软件包不是最新的，未进行维护⚠️ 所以，我认为现在使用SDK不是一个好的决定。 转到axios，比如建议评论或任何您认为可以使用de HTTP/graphQL API的好库。自述： ⚠️ 此软件包不是最新

我们使用Next.js构建了一个简单的博客，并注意到我们在CMS（headless wordpress）上所做的任何更改都没有反映在动态页面上。例如，我们更新了所有作者的姓名，尽管这些更改在博客登录页上正确显示，但动态页面并没有反映出这种更改（我尝试了不同的浏览器和匿名窗口）。我知道next.js在部署时会构建这些页面，但如果这意味着我们每次都必须重新部署，我们甚至会对后端的内容做一点修改。构建时会获取静态页面。但是Next.js确实有一个选项可以动态刷新它们 尝试getStaticProps（

我是next.js的新手。我在网格中有多个按钮。按钮包含艺术家名称。所以用户可以从网格中选择多个艺术家名称（按钮）。 用户可以选择和取消选择艺术家名称（按钮）。因此，选择艺术家名称我想显示按钮边框红色和取消选择白色边框。那么如何在next.js中实现这一点。对于这个问题，我指的是这个链接。使用此链接可以为每个按钮选择和取消选择渲染UI 提前谢谢

我正在使用Next.js，我想在\u app.js中获取auth0数据 AppComponent.getInitialProps=async（ctx）=>{ 常数{req，res}=ctx； const tokenCache=auth0.tokenCache（req，res）； const{datToken}=wait tokenCache.getAccessToken（）； 返回{t:datToken} }在\u app级别上，getInitialProps的第一个参数是AppContext

我在Vercel部署的无服务器Next.js项目中使用Nodemailer发送电子邮件，该项目在开发模式下运行良好。但我在生产上遇到了问题。没有返回错误，一切工作方式与is开发模式相同，只是我没有收到任何电子邮件 我有另一个用React构建的项目，部署在Heroku，在那里我以同样的方式发送电子邮件，它在开发和生产中运行良好，所以我知道问题出在Vercel身上 是的，我在谷歌账户中启用了“允许不太安全的应用”，是的，我启用了验证码 我也读过这篇文章，但它并没有真正让我明白在我的情况下我应该做什么

当我使用npx create Next app命令创建Next.js项目时，pages文件夹下有一个\u app.js文件。在这种情况下，我需要在Next.js项目中为文件添加下划线前缀吗？您只需要在默认的nextjs页面（如_app.js、_document.js等）中使用该前缀。您可以在中查找，我认为前缀用于避免使用“/app”或“/document”等路径，如果您需要在项目中使用它们，请将它们免费提供。 Next.js使用App组件初始化页面 要覆盖默认的App，请创建文件/pages

我有一个带有第二页链接的第1页： const Page1 = () => { return <Link href='Page2'><a>Page2</a></Link> } const Page1=（）=>{ 返回第2页 } 当我点击链接时，Page1不会卸载，直到Page2.getInitialProps获取完整的加载数据并返回它 const Page2 = ({ init }) => { return <div&g

根据文件，tailwind声明了这一点 …但它使用的是 我们正试图在一个最小的nextjs项目中使用它，该项目包含以下postss.config.js： module.exports={ 插件：[ “邮政编码导入”， “tailwindcss”， “自动刷新器”， ['postsss-custom-properties'，{preserve:false}] ] }; 我们正在导入的唯一css文件： @import'tailwindcss/base'； @导入“tailwindcss/组件”；

我正在尝试将GlobalizeNPM包生成的格式化程序集成到基于next.js的应用程序中。格式化程序存储在特定于语言环境的文件中。其思想是基于当前区域设置动态导入特定于区域设置的格式化程序。当前区域设置信息可通过页面的getInitialProps方法中的next-i18next集成获得，但由于格式化程序包含在getInitialProps中导入格式化程序并将其与初始道具一起传递的函数，所以无法使用 实现所需行为的潜在解决方法是什么？我最终使用了带有动态导入的HOC： const format

我有一个奇怪的bug，Next i18Next刚刚投入生产。这里有一些图片可以更好地描述这个问题 i18n.js const NextI18Next = require('next-i18next').default; const { localeSubpaths } = require('next/config').default().publicRuntimeConfig; const path = require('path'); module.exports = new Nex

我试图在Next.js项目中使用Tailwind CSS，但我不能将Tailwind类与Next.js图像组件一起使用 这是我的密码： <Image src={img.img} alt="Picture of the author" width="200" height="200" className="bg-mint text-mint fill-current" &g

在构建NextJS应用程序时，\uu next div将仅与它包含的元素一样高。 如果我想在页面底部添加按钮，则页面需要“全屏”，例如高度：100vh 所以我的问题是：我在哪里应用这种全屏风格？在\u app.js、\u document.js或其他地方 我也在使用Material UI，如果有任何更改，我会亲自将其添加到全局CSS文件中，然后导入到\u app.js，如下所述： 另外，我会把它放在文档的正文，事实上，这个问题与Next.js无关，更多的是一个一般性问题 CSS我建议您尝试一下，

我正在构建一个静态的next.js站点，并希望从一个包含降价文档的文件夹中生成一组静态页面（但就这个问题而言，可以是任何东西-文本文件等）。假设我有这个文档文件夹： /docs/foo/bar.md /docs/foo/baz.md /docs/bar/foo.md ... /docs/foobar.md 我发现完整URL段塞的唯一方法是在构建时，在构建时，我可以递归docs文件夹并发现以下路径： /docs/foo/bar /docs/foo/baz /docs/bar/foo ... /d

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

在Next.js中对Apollo客户端使用Nextuth进行GraphQL身份验证时遇到错误 钩子只能在函数体内部调用 我想知道是否有办法让阿波罗成功？ 感谢您的帮助。正如评论中正确指出的，您不能在服务器端代码中使用挂钩。您必须创建一个新的客户端，如下所示： const client = new ApolloClient() 然后可以执行如下查询，例如： const { data } = await client.query({ query: "Your query",

我已经用Next js和Redux创建了动态页面 我有一个关于我的网络使用的简单流程 登录 使用next/router重定向到index.html 单击一个 进入/DYNAMIC\u页面页面 每个步骤都很好，但在步骤3和步骤4之间存在一些问题 当我单击并标记到/DYNAMIC\u页面时，它将被重新加载 它会影响我的Redux状态 当我进入动态页面时，我希望避免重新加载 如果您需要更多详细信息，请留下评论 先谢谢你 pages/[id].tsx import * as React from "re

我不知道如何在NextJS中使用路由器api而不是react路由器dom复制这个 import { Route, Redirect } from "react-router-dom"; import auth from "../../services/authService"; const ProtectedRoute = ({ path, component: Component, render, ...rest }) => { return ( <Route

我设置的变量（bgColor、txtColor）并不一致地进入样式化jsx。我附加了一个屏幕截图，您可以看到console.log显示的值与渲染的值不同 我相信关于样式化jsx有一些东西我没有得到。不知道为什么这不起作用 const Badge = (props) => { const { variation = null, size = null } = props; let bgColor = "#eeeeee"; let txtColor = "#000000";

我正在创建一个nextjs项目，其中包含类型GraphQL和类型orm。 问题是，当我调用解析程序时，我遇到以下问题： 错误：未找到连接“默认值”。 当我打开url/api/graphql时，它会运行，但是当我直接打开主页时，它就不工作了 export default async (req: NextApiRequest, res: NextApiResponse) => { await connectDatabase(options) const apolloServerHand

我正试图在NextJs 10项目中开发微前端，如所述。但当我尝试运行它时，无论是在我的项目中还是在有示例的项目中，我都会遇到以下错误：错误：模块联合仅适用于Webpack 5 我使用的是Windows 10，我的节点版本是v14.12.0 如何修复此问题？是的新功能。错误信息必须完全按照字面意思理解。要使用它，您必须通过软件包管理器（如纱线或npm）升级您的网页。为此，webpack提供了迁移文章，解释升级时必须更改的内容（例如和）。您可能已经全局安装了webpack，并且版本太旧。您可以尝试

我正在Next.js和MDX上写博客。为此，我下载了我正在尝试改编的。但我找不到如何对帖子进行排序。现在它们是按字母顺序排列的，但我想按日期排序（或自定义排序）。我该怎么做 代码如下： {posts.map((post) => ( <section key={post.filePath}> <Link as={`/posts/${post.filePath.replace(/\.mdx?$/, "")}`

发件人： 您可以看到，来自next/link的组件支持客户端转换和链接预取，这些都是很好的功能，但可能并不适用于所有情况 请看我遇到的警告。假设我有以下几页： 主页-一些带有导航条的登录页 Latest-在这里我可以看到我的最新帖子 Admin-我可以在这里添加更多帖子 上面示例中的Latest页面使用getStaticProps和revalidate。比如： export const getStaticProps : GetStaticProps<HomeRoute> =

我正在使用nextjs和graphql进行shopify POC 我有一个组件，显示产品列表，上面有指向产品页面的链接 <Link as={`${handle}/product/${url}`} href={`/product?id=${item.id};`}> <a>{item.title}</a> </Link> 但在幕后，它实际上只是使用一个名为products的页面，我正在传递产品id 现在在product.js（粘贴

我在nodemon.json中使用具有以下配置的nodemon { "verbose": true, "ignore": ["node_modules", ".next", "app/"], "watch": ["app.js"] } 我在package.json中使用以下配置 "build": "cd app && next build", "start": "npm run build && env NODE_ENV=product

我试图找到一种方法来模拟Next.js的getInitialProps 我目前正在使用cypress来运行E2E测试，无法找到一种方法来模拟服务器端获取，而不为获取启动模拟服务器。我很好奇是否有人找到了更好的方法 谢谢大家!

我正试图通过以下方式重定向到受保护的页面： <button onClick={() => { router.push("/welcome"); }} > import { useSession, signOut } from "next-auth/client"; import { useRouter } from "next/router"; import { useEffect } from &q

尝试在nextjs应用程序中加载ttf字体。添加了next字体并配置了next.config.js文件。 但这是错误的 ModuleParseError: Module parse failed: Unexpected token (1:0) You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. 这是我的下一个

getStaticProps中的上下文未定义。 如果我使用console.log记录我获得的上下文： {locales:undefined，locale:undefined} 我需要来自url的信息。。。 如果我在getServerSideProps上尝试同样的方法，它就会起作用。 我正在将apollo与nextjs结合使用，例如： Thx以获取任何帮助。这些参数在上下文对象上不存在，这就是您得到未定义的原因。我假设您将它们作为查询参数传递给url。在这种情况下，您可以从上下文查询参数获取它们，

我正在使用Typescript构建Next.JS应用程序，并希望访问页面/组件之外的Next-i18next翻译，以便本地化验证消息，而所有验证引擎都在单独的实用程序类中定义。我们已经检查了next-i18next是否存在任何类型的静态访问器，但没有发现任何问题。有什么建议吗？我认为唯一的方法是将i18n作为参数传递给实用程序类 import { withTranslation, WithTranslation } from 'i18n'; import { checkFunction } fr

我试图在单击时加载数据，方法是将ID作为查询参数传递。我还需要有一个干净的网址，所以我设置了“作为”选项。我的问题是，我在加载页面上返回的查询参数现在是我传入的“as”值，因此我无法使用该ID获取数据 有没有别的办法或者我错过了什么 我需要的查询参数是=>id=3 我得到的是slug name=>id=“Uncategorized” {cat.category_name} 我解决了这个问题，在获取帖子之前获取所有类别，并将类别slug与query.id匹配。我不知道是否有更多的nextjs方法

我的动态路线有问题。看起来像这样 [lang]/abc 我试图从[lang]中获取查询值，但当我使用useRouter/withRouter时，我在页面的2-3次呈现期间得到了查询（第一次得到query.lang=undefined）。它可以在1渲染或使用任何技术 无法在第一次渲染时获取查询值 静态优化的页面没有提供路由参数。例如，query是一个空对象（{}） 水合后，Next.js将填充查询对象 Next.js 10.0.5及更高版本 使用router.isReadyinsideuseffe

我一直在阅读文档，这很好，但是我仍然不能完全确定在NextJS中创建嵌套路由的最佳方法 在我的示例中，我的模块具有嵌套的课程。或者换句话说，我的模块可以是一本书，每节课一章 因此，我目前的想法是让我的页面目录如下： pages/modules/[mid]/lessons/[lid] 非常通用的路由路径，但创建这样的dir路径感觉不舒服： /Pages --/modules ----[id].js ----/lessons ------[id].js 它似乎与模块非常耦合。如果我想要一个不同的路

我想在data.items数组中推送一个新项并更新UI 通常这可以通过useState（）实现，但在这种情况下，数据是在服务器端获取的 有没有一种简单的方法可以实现这一点？ 为什么不在getServerSideProps中推送新项，并将最终数据作为props发送？我是这样做的：- 从“Axios”导入Axios； 常量索引=（{data}）=>{ 返回( {data.map（post=> {post.title} ）} ) } export const getServerSideProps

我在使用NextJS时遇到了这个错误 Server Error Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got:undefined. You likely forgot to export your component from the file it's defined in,

我在下一个js应用程序中有以下设置 /[username] /关于我们我的配置如下所示： module.exports = { i18n: { locales: ['en', 'fr'], defaultLocale: 'en', localeDetection: false, }, } 我希望我的关于我们页面只能通过语言子路径（/en/关于我们，/fr/关于我们）和关于我们字符串作为用户名使用，这可以通过next实现吗？，同时可以设置重定向以强制这些路径上的区

我正在尝试集成一个与Next.js和Salesforce营销云构建的应用程序。此集成使用OAuth。用户登录后，将使用授权代码将其重定向回Next.js应用程序，然后发送请求（使用代码），要求访问和刷新令牌 存储访问和刷新令牌的最佳或正确（或安全）方法是什么 它可以存储在客户机中吗？或者应该存储在服务器端（在Next.js中），使用HttpOnly cookie创建会话？使用CSRF令牌的HttpOnly cookie存储是存储jwt令牌的最佳方式