如何使用WebStorm调试NextJS应用程序？
我正在尝试使用WebStorm IDE调试器调试NextJS Reaction应用程序。我尝试使用Java脚本配置，但似乎不起作用--当我使用Node配置时也不起作用。 使用WebStorm调试NextJS Reaction应用程序的正确步骤是什么？ 推荐答案 以下步骤适用于我： 使用Next(npm run dev或任何启动脚本)启动应用程序 添加断点，创建Java D
..
next.js相关内容
是否缺少nextjs 12.1.0中具有Reaction 18的数组中元素的&q；键&prop？
我用npx create-next-app创建了一个下一个js应用程序。但当我尝试使用Runningnpm-run-build进行构建时。它会给出错误。这里的下一个版本是12.1.0，Reaction版本是18。但当我在下一个旧版本中使用相同的代码时，比如12.0.10，大概是这样的。那么它就不会给出错误。我认为这是下一个JS更新版本的变化。但我做了什么？ 错误就像它- 以下是inde
..
来自getStaticProps的数据没有显示在NextJS的页面中(但在道具中)
我在使用NextJS从API调用呈现文本时遇到了问题。基本上，我发出一个外部HTTP请求来获取一些模拟数据。模拟数据通过getStaticProps方法以组件上的道具的形式返回。在我的JSX中，我通过{pros.data...}循环访问道具。为简洁起见，我将展示下面的代码。 数据-lang=“js”数据-隐藏=“假”数据-控制台=“真”数据-巴贝尔=“假”> import * as Rea
..
可以使用动态密钥访问进程.env值
我有一个nextjs项目(不确定它是否相关，或者它是否适用于整个NodeJS)，在该项目中，我希望使用动态键访问process.env中的值： const myKey = 'MY_KEY' console.log(process.env[myKey]) //undefined 作为参考，我尝试过： console.log(process.env['MY_KEY']) // give
..
如何干净地处理nextjs getStaticProps中的错误
我现在正忙于构建我的第一个Next.JS应用程序(Next和Strapi)。现在一切都正常了，但我很好奇在使用getStaticProps时实现错误处理的最佳方式是什么。 我自己尝试了一些方法(传递多个道具等)，但都不起作用(典型的非序列化JSON错误)。我想要实现的是页面本身上的一条错误消息(例如/About)，指出没有找到数据。附加了错误消息(StatusCode)。 我希望这是可
..
Js：减少数据提取并在页面之间共享数据
我正在寻找在Next.js应用程序中更好地获取数据的解决方案。在这个问题中，我不仅在寻找解决方案，我还在寻找多个选项，以便我们可以看到利弊。 我遇到的问题 现在我有几个页面，它们都包括一个显示一些静态内容的组件和一个具有从API获取的一些动态内容的组件。每个页面在其getInitialProps()中执行fetch()以获取自己的页面数据和页脚数据，对所有页面都是相同的。 这当然是可
..
反应设置：赫斯基-6.0.0忽略Git子模块
我有一个名为x-y-z的反应项目，它有一个私有的远程存储库。 在此项目中，我有另一个名为a-b-c的项目，它是一个git submodule。 我正在使用Husky: v6.0.0并已设置pre-commit挂钩。 pre-commit挂钩对于父项目(x-y-z)工作正常，但对于子模块项目(a-b-c)无效。 我什么都想不出来。有谁能推荐一种变通办法吗？ 提交前 #!/
..
如何为外部URL正确设置下一个图像加载器URL
我正试图在Firebase上托管我的第一个应用程序，但我在next.config文件上遇到了一些图像加载程序的问题。 初始配置如下 module.exports = { images: { domains: ['assets.coingecko.com'], loader: 'imgix', path: 'https://assets.coingecko.com/coins/images/'
..
是否有可能防止getServerSideProps在初始加载后导致整个页面重新加载？
我有一个服务器呈现的next.js应用程序，它是一个3页的结账流程。在第一个页面上，我获取了getServerSideProps中的各种设置数据，如标签转换和篮子项，如下所示： UserDetails.js import React from 'react'; import { LabelsContext } from "../contexts"; import { Component
..
如何用更新的接口url从同一组件中调用getServerSideProps？
我要传递此函数中的参数，以便在应用某些筛选器时将更新/筛选的数据放在同一页上？ 这对于初始呈现工作正常，但我无法从同一组件获取更新数据，因为此getServerSideProps函数在我的组件之外。 我的组件 let API_URL = `https://api.spaceXdata.com/v3/launches?limit=100` const spacex = ({ mis
..
在Nextjs中使用getServerSideProps实现动态路由
我正在努力学习下一步。正在使用getServerSideProps计算路由。 使用免费API，我在DOM上显示了一个国家/地区列表。我希望动态链接到某个国家/地区，并获取和显示该特定国家/地区的数据。 以下是我到目前为止的代码 const Country = props => (
{props.country.name}
..
Reaction+NextJS保护的路由
目标：如果登录用户尝试手动转到/auth/signin，我希望将登录用户重定向到主页。 登录页面/组件： const Signin = ({ currentUser }) => { const [email, setEmail] = useState(''); const [password, setPassword] = useState(''); const
..
NextJS-无法在TailWind中使用自定义颜色
我正在尝试使用带有顺风css的NextJs来做一个项目。但是，每当我尝试使用自定义颜色作为背景颜色时，都会抛出以下错误： Failed to compile ./styles/globals.css:7:12 Syntax error: /Users/anishkunapareddy/Desktop/Projects/React/hulu-clone/styles/globals.css T
..
在TailwinCss中动态构建类名
我当前正在使用TailwinCss为我的下一个项目构建组件库，我只是在处理Button组件时遇到了一个小问题。 我传入了一个与我在tailwind.config.js中指定的颜色匹配的道具，如'primary'或'secondary'，然后我想使用Template literals将其分配给按钮组件，如下所示：bg-${color}-500
..
在nextjs之前加载初始屏幕
我有一个NextJS网站，我想在加载网站之前添加一个闪屏 但是因为Splash Screen也在NextJS代码中，所以它将在服务器上呈现nextjs而在客户机上下载并执行JS时加载。事实上，它毫无用处，因为它将在页面准备好后执行！ 如何在Reaction完全加载和执行之前执行闪屏？ 我还将nginx用于proxy_pass 推荐答案 加载画面： import
..
导入在Next.JS项目中派生和编辑的包时出错
我正在使用此项目的Reaction-Headspace，需要编辑其代码，以便不会调整页面高度。因此，我派生了原始的repo，并对我的版本进行了更改，以便我可以使用yarn add 将其安装到我的项目中，然后正常地将其作为任何其他库导入： // src/components/layout.js import { useState } from
..
有没有办法将CDN物化与Next.js一起使用？
我正在构建一个Next.js应用程序，并希望使用物化CDN。在Reaction中，我只需在public/index.html文件中添加CDN链接，就可以了。NeXT似乎没有，我被困在如何做到这一点上。 我已尝试 npm install materialize-css@next --save 我将其导入到pages/_app.tsx中，如下所示： import 'materia
..
Spotify API错误。缺少401个权限。尝试播放曲目时
我正在尝试使用spotify-web-api-node在我的应用程序上播放曲目 const playSong = async () => { // Verify access token with console.log(spotifyApi.getAccessToken()) setCurrentTrackId(track.track.id); set
..
使用Next.js在打印脚本中键入重定向摘要
我正在使用TypeScrip构建一个Next.js项目。我正在尝试键入基于Redux状态重定向用户的即席。 以下是我到目前为止的情况： import { RootState } from 'client/redux/root-reducer'; import Router from 'next/router.js'; import { curry } from 'ramda'; imp
..
如何使用NextJS API在Jest单元测试中解释Google reCaptcha
我已经使用NextJS设置了一个简单的API终结点，并且希望能够为它实现一些单元测试。 终结点使用Google reCAPTCHA保护网站(和网站所有者的电子邮件)免受BOT垃圾邮件。 终结点似乎正在按预期工作，但是我觉得我用来对其进行单元测试的方法有点老套。 我的解决方案的基本要点是简单地检查NODE_ENV是否设置为测试，如果是，则返回通用的Success JSON：
..