在尝试将NextJS与react原生web和样式化组件一起使用时，我经常遇到麻烦 这些问题似乎与样式化组件中“react native”的错误别名有关。但我不知道如何解决这个问题 我知道如何使它与Razzle.js一起工作，但我一辈子都不知道如何与NextJS达到相同的工作状态。我怀疑这与webpack的config.externals有关，但也可能与babel.config.js有关 如果有人解决了这个问题，你将是我今年最喜欢的人。 我已经准备好了回购的复制问题 --- Next.js pag

我有这个仪表板布局，在开发模式下可以完美地工作 但一旦我构建了nextjs项目，它就破坏了布局 我使用顺风css和preact进行生产。 如果有任何帮助，我们将不胜感激。通过将taliwind.config.js中包含tailwind css的所有文件夹添加到purge array中，修复了构建，如下所示

我正在使用getStaticProps从Firebase获取一些图像，然后使用下一个图像组件显示它们。但是，它们需要一段时间才能显示，在它们还没有加载的情况下，我如何显示占位符？在thery@canary分支上有一个实验合并。如果你想尝试一下，只需在最新发布的金丝雀上更新你的nextjs版本。 只需在图像组件上添加一个新的占位符=“blur”道具 或者你可以用这个 编辑：nextjs11现在正式发布了组件的占位符

我正在使用ISR，但添加了新的博客，编辑似乎不适合制作 ///blogs/[slug].js 导出异步函数getStaticProps（{params}）{ const res=await api.get（`/api/v1/blogs/${params.slug}`）； const blog=res.data； 返回{props:{blog}，重新验证：60}； } 导出异步函数getStaticPaths（）{ const res=wait api.get（“/api/v1/blogs”）；

我们正在努力将Auth0添加到我们的Next.js网站并参考示例 我想知道的是示例中的设置。它通过网页包将Auth0和其他机密放入客户端。这不是让这些秘密处于危险之中吗？因为它们在客户端代码中的某个地方，所以有可能会请求访问这些机密 示例还将秘密放入客户机中 我还没有发现Webpack是如何处理变量的，我希望社区能对此有所帮助。我们正在努力确保我们的模式在实施之前是安全的 例如，将机密添加到客户端next.config.js： const dotenv=require'dotenv' doten

我们正在尝试为Nrwl NX next应用程序使用custom next.config，但应用程序未选择配置。 我们正在尝试应用重写。 任何帮助都将受到高度欢迎 module.exports = { async rewrites() { return [ // Rewriting to an another app, running on different port { source: '/docs', d

我正在使用next/link指向特定页面。链接组件如下所示： <Link href={{ pathname: `/users/[slug]?lang=${lang}`, query: { slug, lang }, }} > Click me </Link> 您应该在路径名中包含slug，并在查询对象中传递lang //假设slug='some-slug'，lang='en' 点击我 此解决方案不适用于我。我仍然收到相同的错误，

我最近发现了Strapi，我正试图用它创建一个公司网站，但我在设计后端结构时遇到了困难 该公司提供了许多层次结构的软件包（如图中的表格）  我希望所有这些项目都存储在数据库中，并可以轻松更新或删除。我创建了4种集合类型：包、包项、包级别、包类别    一切都按预期工作，因此，我创建了一个组件PackageHome，我想在另一种集合类型中使用它：Pages。我想要一个组件，允许我选择一些包，并为每个包和一些项目选择一个级别。所有这些都将由客户端应用程序使用  问题是，即使“packa

我正在尝试将AtlasKit与Next.js 8一起使用，但由于某些原因，在尝试构建时出现SyntaxError:Unexpected token export错误 我认为这是因为@atlaskit/editorcore没有为ES6进行适当的预处理（通过webpack或babel等），但我不确定。有什么想法吗 //Home.tsx import * as React from 'react'; import * as classnames from 'classnames'; import *

我有一个标准的amp表单，有一个电子邮件输入、一个sumbit输入和一个mailchimp端点 现在的问题是，我需要配置头，提供授权API密钥，并设置cors AMP需要使用xhr发送数据。我不知道如何在nextjs或无服务器功能中做到这一点。也许可以尝试以下解决方案- 您必须使用mailchimp的python库创建一个API，并提供凭据，然后使用该API发布表单中的数据。也许可以尝试以下解决方案- 您必须使用mailchimp的python库创建一个API，并提供凭据，并使用该API从表

我必须在端点上发送当前语言。但是从Cookie中获取语言返回未定义的getServerSideProps export async function getServerSideProps(context) { const lang = await Cookie.get('next-i18next') const res = await fetch(`endpoint/${lang}`) const data = await res.json() return {

我有一个包含以下内容的next.config.js文件： module.exports = { serverRuntimeConfig: {}, publicRuntimeConfig: { cmsBase: process.env.CMS_BASE || 'defaultValue', }, }; 我有两个npm脚本，用于构建和运行，如下所示： "build": "cross-env CMS_BASE=build next build", &q

我有一个下一个js应用程序和CMS是满意的 与此问题相关的文件结构如下 pages -[category] -[slug].js 我想做的是在用户访问category/slug时访问category的值 现在我正在硬编码catgeory。是否有任何方法可以使用params访问类别 const category = 'mains'; export async function getStaticPaths() { let data = await client.getEntries

我被自定义404错误页面卡住了。我已经按照NextJS文档中的说明在pages文件夹中创建了404.js，但它仍然使用NextJS中的默认页面。有人知道这个问题吗？先谢谢你 依赖关系： “下一步”：“9.2.2” next.config.js只有env config。根据 此功能是完全向后兼容的，因此如果您当前有一个自定义的pages/\u error.js，它将继续用于404页面，直到您添加pages/404.js pages/404.js从Next.js 9.3开始提供，您可以将依赖项从9.

在prismic文档中，他们教授的默认设置意味着您的主页和站点上的其他每一页都是相同的类型 这意味着在默认设置中，路由/和/home都呈现主页 有没有办法阻止/home路由渲染，或者至少将其重定向到/？最简单的方法就是在下一个配置中使用标准重定向： 但还有其他一些方法也可能奏效。例如，您可以添加一个if（params.uid==“home”）路由器。将（“/”推送到pages/[uid].js，将用户从/home重定向到/。（我认为这个代码片段不起作用，但我希望它能说明这个概念。） 如果您需要

如何在nextjs中共享特定路由的布局？我想在一个公共布局内的一个地方为一些有共同业务的相关路由（聊天路由）创建一个单例对象（signalR connection object），并在所有这些路由中使用此对象，请帮助我在google上进行此快速搜索提供了一些参考：Next.js并不是真正为拥有共享布局而设计的（然而），最常见的事情应该发生在\u app中。您是否考虑过CSS网格解决方案。

当我试图修改pages/_document.js以添加FastClick事件注册（见下文）时，它抱怨ReferenceError:未定义文档。我猜这是因为它是在服务器上执行的，文档没有在那里定义。有办法解决吗 if ('addEventListener' in document) { document.addEventListener('DOMContentLoaded', function() { FastClick.attach(document.body) }, false

我知道Next.js可以做SSR。 我对生产有疑问 根据我的经验，没有SSR。前端构建静态文件，然后将文件夹交给后端进行集成。并且只有一台服务器 我想知道，如果我们想在Next.js而不是静态站点上使用SSR 我们需要两台主机服务器吗？一个用于主机后端节点，java…，另一个用于主机frontnednext.js 如果我使用nodejs作为后端语言，我可以在next.js中编写所有api吗？我的意思是前端和后端代码都使用next.js，所以只有一台服务器 如果问题一的答案是肯定的，我看到文档使用

我正在使用next-i18next本地化包进行react+next项目 我注意到Chrome和FF中似乎都出现了间歇性问题，似乎与next-i18next软件包本身有关。最初加载任何页面时，看起来页面偶尔会呈现两次。这似乎只在客户端发生（不发出新的GET请求）。还有其他人碰到过这个吗 复制next-i18next软件包中的简单示例，并在任何页面的主组件（示例中的主页和第二页组件）中插入console.log，就可以重现这一点。在页面上进行几次硬刷新（在我的情况下少于10次）通常足以在客户端显示两

我正在尝试集成到我的next.js项目中 我正在使用以下方法导入依赖项： import dynamic from 'next/dynamic' const SBProvider = dynamic( () => { const { SendBirdProvider } = import('sendbird-uikit') return SendBirdProvider; }, { ssr: false } ) const wit

我试图在我的应用程序中通过重写查询var？页面路径中的数字来实现分页。我让它或多或少起作用，但它的 我的next.config.js如下所示： constwithimages=require（'next-images'）； module.exports=withImages({ 异步重写（）{ 返回[ {源：'/category/：slug*（\\w{1，}'），目标：'/category/：slug*'}， {source:'/category/：slug*（\\w{1，}）/：page（\\

在next.js中，我使用“next export”在构建时呈现页面。在呈现页面时，如何获取该页面的路径 例如，如果您有一个/pages/foo/bar.tsx getStaticProps（）方法，则会传入一个上下文对象。我本以为上下文会有一个类似于path（）的方法，返回/pages/foo/bar，但这不可用： export type GetStaticPropsContext<Q extends ParsedUrlQuery = ParsedUrlQuery> = { p

如果用户未经身份验证，我将尝试将其重定向到登录。我现在硬编码了jwt。这是可行的，但我只收到一个错误，说error[ERR\u HTTP\u HEADERS\u SENT]：在发送到客户端后无法设置头 由于该函数起作用，我不知道哪里出了问题，也无法真正找到答案。这是我的代码供参考： function redirectUser(ctx, location) { if (ctx.req) { ctx.res.writeHead(302, { Location: location });

我目前遇到了一个随需应变条目的问题，当它请求动态编译页面时，它会从dev服务器返回404 下面是典型的页面目录结构。在检查dev_工具控制台时，有一个对dev服务器的fetch调用来编译页面，在本例中是article.tsx（/article/article slug），fetch请求返回404 . +-- pages | +-- latest-news | +-- index.tsx | +-- article | +-- [slug].tsx 环境详情：

我想创建一个包含所有添加到文章中的标签的分类页面。当点击一个标签时，它会显示一个页面，上面有包含该标签的所有文章 我正在使用Next.js、SSG，并通过以下GraphQL查询从Contentful获取文章： 导出异步函数getArticles（）{ const-articlesQuery=gql` { 文章集{ 项目{ 标题 鼻涕虫 节选 日期 内容元数据{ 标签{ 名称 身份证件 } } 特征图像{ 标题 网址 宽度 高度 } } } } `; 返回graphQLClient.request

在这里 我想使用firebase管理方法保护许多页面： const getServerSideProps = async (ctx: GetServerSidePropsContext) => { try { const cookies = nookies.get(ctx); const token = await firebaseAdmin.auth().verifyIdToken(cookies.token); const { uid, email } =

有没有办法禁用下一步的静态文件服务？现在，我的资产位于名为/public的目录中。当应用程序在本地运行时，我可以使用Next静态地提供文件，但是当应用程序部署到后台和生产环境中时，我希望使用nginx提供这些文件。除了重命名/public目录，还有更好的方法吗？我认为更好的方法是从CDN为您的资产提供服务，并在资产路径前面添加CDN前缀。文档的这一部分不意味着我必须编辑每个图像URL才能在前面添加资产前缀吗？这听起来是可行的，只是很烦人。“资产前缀支持不会影响以下路径：公用文件夹中的文件；如果您

我正在尝试将WaveSurfer.js添加到Next.js应用程序中 我像这样通过next/dynamic导入了包 const WaveSurfer = dynamic(() => import('wavesurfer.js'), {ssr: false}) 现在，当我试图通过WaveSufer.create（）创建新播放器时，我得到的信息是，WaveSurfer.create不是一个函数 有人能帮我吗？我应该导入一个使用wavesurfer.js的组件，而不是动态导入wavesurfe

我在一个Next.js网站上使用GTM进行分析，我发现GTM破坏了Next.js的功能 具体来说，单击 为了检查Next.js动态导航何时工作，我在/src/navigation.js中添加了一些Router.events.on回调调用console.log，其中包含已触发的事件 要包含GTM或不包含GTM，请从当前位于/pages/document.js中的位置添加/删除 请注意以下事项： <script async src={`https://www.googlet

1） 在中提到，我们可以使用next start启动服务器。这和刚才的next一样吗 2） 当我们使用上面提到的自定义服务器实现时，调试器断点也会在next.config.js处停止。据我所知，next.config.js用于URL映射以生成静态站点。那么，为什么这里也使用next.config.js 如需了解next.js概述/体系结构，欢迎提供任何链接 提前谢谢 这和下一个一样吗 否，next将在开发模式下启动应用程序 next.config.js是next.js自定义和高级行为的普通节点模

我使用的是带有“全包”选项的动态路由[…slug]。通常，URL是“mywebsite.com/[username]”还是“mywebsite.com/[username]/[postid]” 然后在getServerSideProps（{query}）中，我收到一个带有[username]或[username]和[postid]的数组。我只使用用户名slug info获取所有用户名数据 之后，根据从{query}接收到的元素数量，我将决定是否： 1-我将呈现用户主页组件， 2-或发布页面组件（

根据Hasura中的用户角色，动态更改Apollo SubscriptionClient中的标题的正确方法是什么 堆栈： 下一代 阿波罗 Auth0 Hasura（使用角色列存储Auth0\u Id） 这里的目标是利用Hasura角色获得权限。我知道JWT令牌具有允许的角色，但我希望能够根据用户分配的角色设置角色。我要走的路径是通过NextJS内部API从auth0查询Hasura用户表中的角色，该角色的用户ID为 ApolloClient.js import fetch from 'iso

我真的在寻找一种（简单、直接）的方法来从现有的私有Gitlab存储库和完成的构建管道部署next.js应用程序到Vercel，但不需要上传我的源代码或在他们的系统上运行构建；只是先前“构建”的next.js包 除了它们流行的存储库集成（此处不适用）之外，它们还提供用于手动发布的和 然而，CLI工具似乎也将整个存储库推送到了Vercel，除非提供了“安装模块的命令”等构建时信息，否则不会部署任何东西 API有很好的文档记录，但我想它的工作方式是一样的，我找不到一个例子来解释我需要选择哪些文件进行上

我有一个“成功案例”页面（/cases），当我进入详细信息页面时，我会看到一些类似于/cases/some slug “案例”模式指的是一个品牌，如下所示： {标题：'案例品牌'，名称：'案例品牌'，类型：'参考'， 致：[ {类型：'品牌'} ] }, 在我找到的所有例子中，我必须将品牌与案例联系起来。但是如果我把每一个案例都和一个特定的品牌联系起来，那就更有用了。（另一种方式，我必须附加到品牌，多个案例） 因此，下面的例子中，我采用了oposite方法（对于我构建的结构来说，不方便）：

我想创建以@符号开头的路由我应该如何构造页面文件夹？ 首先，我尝试创建一个名为@的文件夹，但是它会创建一个以@进行的路由，比如www.example.com/@/something。我甚至尝试了文件夹的[@topic]和@[topic]名称，但效果并不理想 我想有这样的路线： www.example.com/@computer www.example.com/@music www.example.com/@programming 我如何处理这个问题 我的Next.js版本是9.2.1您只需将更改

我想集成服务器监控系统，比如实现APM标准的DataDog。我想实现这个，而不使用像Express或膝关节炎的自定义服务器，只是使用框外NExjs服务器。我的NextJS服务器只用于页面，而不是API。如果NextJS允许我们为所有请求插入中间件，这将有所帮助。然而，看起来这不是一个选择。你知道这样做的好方法吗？你找到问题的答案了吗？还没有。我在Internet上找到的唯一解决方案是使用自定义服务器。我们最后用了膝关节炎。但定制服务器无法使用Vercel部署，因此它是一个交易破坏者。我刚刚发现了

要求：我正在尝试使用服务工作者和缓存静态文件，以便减少HTTP请求并提高站点性能 接下来，我会切换到离线、缓存图像、api等 我已经看到了插件： 及 它似乎起作用了。尽管我试图找出是否有（nextjs+workbox）的例子 下一个js确实有一个示例。但是我想用workbox来做这个 有人举过有效的例子吗？即使是基本的也可以 目前我没有使用自定义服务器。只需使用nextjs（）的内置生成器，我就自己找到了一个答案： 参考： 我已在此处为我的应用程序执行运行时缓存，并将workbox文件添加到基

我需要一些建议。我已使用创建下一个应用程序初始化了一个全新的项目： npx create-next-app nextjs-app 我可以通过调用npm run dev来启动项目。这是我在开发服务器上运行时在终端中拥有的： ready - started server on http://localhost:3000 但是，当导航到localhost:3000时，我遇到了内部服务器错误。终端上存在以下错误： Error: Invalid hook call. Hooks can only be

我尝试使用帧运动和下一个js创建淡入淡出效果，但它从不淡出。我了解AnimatePresence允许组件在从React树中删除时设置动画。这可能是我的问题，但我对React了解不够，无法知道如何修复我的结构。有人能推荐一种让它褪色的方法吗？这里有几页 _app.js export default class BookingApp extends App { render() { return ( <Provider session={pageProps.session}>

我在下一个pwa中面临一个非常奇怪的问题。每当我尝试构建包含自定义worker js文件的下一个pwa项目时，构建都会失败，并出现以下错误： info - Creating an optimized production build ..buffer.js:333 throw new ERR_INVALID_ARG_TYPE( ^ TypeError [ERR_INVALID_ARG_TYPE]: The first argument must be of type string o

我绝对喜欢这本传单！我正在使用它为next.js驱动的站点上的天气警报生成底图。我的公司要求服务器只在内部网上。因此，对于公司以外的员工，我将发送一封电子邮件，以获取特定警报，并希望包含一张带有警报功能的地图的PNG附加图像。我分为传单.打印和传单.图像，但似乎都需要人的互动来按下按钮以保存图像。我希望在通知通过电子邮件发送给收件人时自动完成此操作。我知道可能需要一个视图/DOM（浏览器）。然而，出于自动化的原因，我可能希望这种情况发生在后端（node.js）。是否有任何东西可以满足我的需求，或

我正在尝试在下一个.js项目中使用tone.js。 当我运行或构建时，会出现以下错误“ReferenceError:AudioBuffer未定义” 我已经在codesandbox中隔离了tone.js代码，它工作得非常好。 但不是在next.js应用程序中 ReferenceError: AudioBuffer is not defined at ki (/node_modules/tone/build/Tone.js:1:117922)``` 是一种web浏览器，它不存在于node

每当我检查是否存在已授权的条件（true或false），我都会在控制台上收到此错误消息。基本上，错误是指服务器端渲染，但我无法确定应该在哪里修复它。当我删除isAuthorized时，错误消失 我有我的上下文，根据cookie中是否存在令牌，我返回isAuthorized为true或false GlobalContext.js const Global = createContext(); export function GlobalContextProvider({ children })

我正在尝试基于使用的示例构建一个小型NextJS示例应用程序的可执行文件。问题是唯一可行的入口点（server.js）似乎给了我一大堆错误，这些错误目前还没有在他们与网页包编译相关的问题中列出 如果您想复制，然后添加pkg。另外，下面是错误输出 编译错误失败，有2个错误 上午10:48:35未找到这些依赖项： @babel/runtime/helpers/extends in D:/snapshot/pkg ssr/node_modules/next/dist/lib/app.js 网页包热中

js是关于服务器端渲染的。因此，将呈现服务器（呈现HTML）与API服务器一起使用似乎是一个自然的选择-这可能会使呈现时间比使用单独的API服务器（服务）要短得多 这就是我理论上的想法 但我想知道next.js应用程序是否通常以这种方式部署（节点服务器同时承载api服务和next.js应用程序） 或者让一个服务主机作为next.js应用程序，另一个服务主机作为rest api端点是否有意义。e、 g Next.js位于lambda edge上 Api网关上承载的Api服务（+lambda+dyn

这是部署时的消息。 复制此错误的代码： 我通过完全删除next.config.js文件解决了这个问题。我也不理解盲目下一票。这是我几天来一直面临的一个严重问题。

我的团队的主要目标是能够将CMS驱动的站点“快照”为静态HTML。这很简单 但我们还需要托管一个内联网版本，该版本总是从CMS获取最新内容。使用getStaticProps这实际上是不可能的，因为它的输出是缓存的，如果使用较旧的getInitialProps则无法在导出期间“冻结”其输出的服务器版本 next dev使这变得容易；它有一项服务，提供JSON文件的新版本，这些文件将在导出期间变为静态 在一个长期运行的站点上，是否有重要的配置更改会使next dev安全/更安全地使用？在9.5 ne

我找到了解决这个重复问题的方法，图（1）（第4行）。但我想知道为什么它会将两次对象数据推入数组，而只打印console.log一次 我试着调试它。 它是不是和州政府一样。这就是为什么它将两次时间推送到阵列中。但负面图片（2）。我删除了getStaticProps和核心价值，它工作得很好。向阵列中推进一次 那么，为什么getStaticProps会出现这种错误呢？GetStaticProps应该在构建时运行，然后在组件首次渲染时将道具渲染到组件

将直接来自服务器的数组记录到getStaticProps中显示： const agents = [ {firstName: "bob", lastName: "builder", numberOfClosedSales: 100}, {firstName: "james", lastName: "doe", numberOfClosedSales: 50} ]; 在react组件中记录阵列显示： con

我正试图导入到我的NextJS项目中，但每次导入时，都会出现如下错误： ReferenceError:未定义窗口 根据我所读到的，显示错误是因为它试图在服务器端而不是客户端加载库 因此，当我尝试像这样导入它时： let Typewriter if (typeof window !== 'undefined') { Typewriter = require( 'typewriter-effect' ) } 从“打字机效果”导入打字机 错误立即显示出来 人们建议我试试这样的东西： let Ty