我这里有一个问题，解决不了。我想通过npm在Next.js应用程序上安装语义ui，但这是不可能的，请帮助我 如果你有一些想法，请帮助我 npm install semantic-ui 我尝试了这个，但没有任何改变。我在下一个.js项目中使用了语义ui react，我喜欢使用自己的主题。按照下面的说明开始 首先运行npm安装--保存dev语义ui。很快，您将看到一个交互式提示。回答以下问题 设置语义UI—选择“Express（设置组件和输出文件夹）” 我们检测到您正在使用NPM Nice！这是

我的问题可能太明显了，但我不知道是什么错了。我尝试使用来自tailwind ui组件的模式，并在其上添加了文件类型的输入 当我打开模式时，一切都很好，但是当我点击输入选择一个文件时，什么都没有发生（我的文件浏览器没有显示） 你知道我应该改变什么吗 这是我的Modal.js <Transition.Root show={show} as={Fragment}> <Dialog as='div' static className='fixed z-10

我有一个next.js应用程序，我正试图部署到heroku。但是在构建“成功”之后，我得到了这个错误 hillfinder.herokuapp.com/：1拒绝加载映像 '数据：图像/png；base64，XXXXX'因为它违反了以下内容 内容安全策略指令：“默认src‘无’”。注意 未显式设置“img src”，因此将“default src”用作 撤退 hillfinder.herokuapp.com/：1未能加载资源：服务器 响应状态为500（内部服务器错误） 这很奇怪，因为我头上的标签上

我现在通过ZEIT获得了一个Gun.js+Next.js应用程序（源代码），我从Chrome和Safari中得到了以下错误： WebSocket connection to 'wss://maptivist.randymorantes.now.sh/' failed: Error during WebSocket handshake: Unexpected response code: 200 从Firefox我得到： Firefox can’t establish a connection

位于公用目录下的文件（静态）。 字母表文件名可以，但unicode（非ascii）文件名或路径总是出现404错误 不管文件夹中是否有文件。 这有什么问题？？？可能重复。看，这回答了你的问题吗？不，没有。没有。Url已经由urlencode编码，正如我在问题中所示（显示的Url）。但不知何故，next.js无法正确地提供该文件。我不知道为什么。我也有这个问题。你找到解决办法了吗，@Lucas1027？

我想知道是否有人面临或曾经面临过这个问题。我使用的是“serverless next.js”：“^1.14.0”，当我部署我的网站时，除了主页（index.js）外，每个页面都会加载 我得到了一个完整的空白页，没有任何错误 如果我将index.js重命名为另一个名称，那么路径将正确加载 我没有任何错误日志可显示，因为它实际上不返回任何内容。我发现无服务器下一步。js@1.14.0与最新的Next.JS（>9.5.4）不兼容 在问题解决之前，我不得不将我的NextJS版本降级到9.4.4。 我已经

我一直在这个网站上工作，我碰到了一堵墙。基本上，我应该按类型列出电影，从数据库中获取。这一类型应该会让我进入另一个基于该类型的列表。一旦用户点击“动作”类型的电影，它会将他们带到另一个页面上的电影详细信息。 这就是结构 Movies/ [moviesbygenrelist]/list 在那之前一切都正常 转到第二个动态页面，我无法获取第一个和第二个动态页面的值 如下 Movies/ [moviesbygenrelist]/[movie-slug] 我正在静态生成站点 如何在第二个动态页面上获

我正在使用MongoDB制作静态Next.JS应用程序 在我的静态Next.JS应用程序中，我可以使用api路由构建页面吗？例如，在getStaticProps中使用GET方法获取产品？或者这是一个糟糕的方法 现在我使用文档中的经典方式（直接调用db，如find等） 提前谢谢你的帮助 您可能可以，但在getStaticProps/getStaticPaths中使用API路由是一种不好的做法 您不应该从getStaticProps获取API路由，相反，您可以直接在getStaticProps中编写

我正在尝试在Netlify上部署我的故事书，我正在使用Next.js框架，但每次都失败了，我不知道出了什么问题 Netlify配置： 构建命令：npm运行构建故事书 发布目录：storybook static My package.json： { "homepage": "https://github.com/alexCoding42/tailwind-storybook", "name": "tailwind-sto

创建帧运动时样式化组件链接样式化（motion.a）`，如果它是nextjs链接组件的子组件，则无法在其上触发动画 nextjs链接文档： 如果链接的子级是功能组件，则除了使用 passHref，必须将组件包装在React.forwardRef中 沙盒表示3种情况，只有一种触发动画，即我不将ref属性传递给已设置样式的运动链接组件的情况 这是预期的行为吗？如果是，请解释为什么会发生这种情况？这个问题已在framer motion 4.1.16

我通过npx-create-next-app初始化了一个NextJs应用程序（v10.2.0），并在pages文件夹的index.js文件中的下面的代码中进行了重新编译。 我试图从json文件中获取数据，然后将其作为道具传递给页面组件 import fs from 'fs/promises'; import path from 'path'; function Home(props) { const { products } = props; return ( <ul&

我想在NEXTjs应用程序中使用变量。为此，我做了： 创建的文件：.env.local包含： DB_HOST=localhost DB_USER=myuser DB_PASS=mypassword如果您想访问客户端和服务器端的环境变量，它们必须以NEXT_PUBLIC作为前缀 NEXT_PUBLIC_DB_HOST=localhost NEXT_PUBLIC_DB_USER=myuser NEXT_PUBLIC_DB_PASS=mypassword 如果您只打算在服务器端使用它们，那么您的示

我有四张图片，我正在使用react transition group进行淡入淡出。所有的图片都在页面加载中，并且正在使用Next.js的新组件 const ImageSwitch = () => ( <div className="image"> <Image src={image.url} priority unsized /> </div> ); <SwitchTransition mode="o

我想在我的NextJS应用程序中使用全局样式。根据文档，我编写代码的方式应该是正确的。但它并没有被应用到 我使用SCSS作为我的样式语言，使用TSX作为我的nextjs文件 我的范围样式正在应用 我的代码 \u App.tsx import "../components/SCSS/variables/AllVariables.global.scss"; export default function App({ Component, pageProps }) { r

我们正在开发一个相当大的网站，在发布时将有大约8000页。最初，我们计划静态生成所有页面，但为了保持构建时间的可管理性（现在以及随着更多页面的添加），现在似乎不太可行。现在的问题是，如果我们要限制静态生成的页面数量，我们应该使用什么标准来确定应该和应该通过回退选项处理的页面（fallback:true）。报告提到了页面的一个小子集，但不清楚该子集应如何确定

我想在nextjs中添加一个插件，使用：next compose plugins。 我试着这样做，但我不明白为什么它不起作用。 插件： const{ 阶段\开发\服务器， 生产和建造阶段， }=require（'next/constants'） //这将使用如下所述的阶段：https://nextjs.org/docs/#custom-配置 module.exports=（阶段）=>{ //在开发模式“next dev”或“npm run dev”下启动时，不考虑暂存环境变量的值 const

我有如下几个URL： www.test/results.html？property_id=tn486_2060221&address=101-Sperance-Lane-Lot-252-Gallatin-TN-37066 它们都有共同的/results.html？。如何使用next.config文件中的重定向配置将它们重定向到www.test.com/homes for sale。我能够执行source:'/results.html:id*，尽管它以正确的路径解析，但它承载了初始url的查询参数

我有一个没有集成api的NextJS应用程序，我想部署到Vercel。当我在本地运行它时，它工作得很好，而且我也可以在没有任何错误的情况下构建它。然而，当我部署它时，我收到一个404错误 以下是我的文件夹结构： app/ - components - pages - editor - [id].tsx ...tsx - public - utils - db api.ts 我正在使用NextJs 10.0.3 这里是一个指向已部署

当像这样将我的颜色作为道具传递给并在代码className={'bg-[${color}]}中使用时，它不会正确渲染。 查看chrome开发工具时，正确添加颜色，如下所示bg-[#84AB86] 在不使用道具的情况下手动放置颜色时，它确实可以正常工作 经过更多的测试，似乎也不可能这样做 const color = "#84CC79" className={`bg-[${color}]`} 知道为什么使用模板字符串吗 const color=“#84CC79” classNa

我有一个pages/index.tsxNext.js页面，其代码如下所示： import { ApolloProvider } from "@apollo/react-hooks" import Client from "../db" import Header from "../components/Header" export default function Index() { return <ApolloProvider client={Client}>

场景： 我们有一个服务器，可响应多个域（70+） 每个域都有自己的语言（已经在一个单独的JSON文件中） 我有一个映射“域”：“translation.json” 每个客户端都有一种语言：访问“example.com”的用户只能看到英文版的网站。“example.es”中的访问者将看到它的西班牙语版本。没有任何选项可以更改当前站点的语言，只需链接到另一个域即可 问题 我不想在客户端加载70多个翻译，因为客户端永远无法更改它 如何在NextJS应用程序中应用该映射，而不将其他资源放到客户端 P

刚刚在两台不同的计算机上测试了这个，每次我用CreateNext应用程序创建一个全新的项目时，都会遇到相同的错误。以前没有遇到过这个错误。发生了什么事 以下是解决方案： 对于外部链接，您可以使用href=“” 对于路由器链路，使用“下一个/链路” 保持URL干净，如：//abc.com 参考资料： 以下是解决方案： 对于外部链接，您可以使用href=“” 对于路由器链路，使用“下一个/链路” 保持URL干净，如：//abc.com 参考资料：

我正在尝试在我的NextJs应用程序中实现NextAuth。我正在关注官方文件。但出于这样或那样的原因，用户会话对象似乎不是在登录时生成的 这是我的页面/api/auth/[…nextauth].js文件中的代码 从“下一次身份验证”导入下一次身份验证； 从“下一个身份验证/提供程序”导入提供程序； 从“axios”导入axios； 导出默认值（请求、恢复）=> 下一步（要求、决议、{ 供应商：[ 提供者。凭据({ id:'应用程序登录'， 名称：应用 授权：异步（凭据）=>{ 日志（“凭证：

我想访问常规页面和API的当前路由（例如/[user\u id]/posts），以便记录错误、增加页面命中计数器等 我发现检索当前路由的唯一自动化方法是useRouter，但这只能在React组件中访问 我希望避免在每个处理程序中硬编码路由，因为这样很容易失去同步 如何在处理程序中自动检索当前路由？框架根本不支持它。我发现有两种选择： 1/使用其他框架，如Nest.js。使用Nest，您可以访问拦截器中的路由器信息。例如，对于Fastify适配器： @Injectable（） 导出类Instru

我正在使用next 5，在我的项目中，我有一个\u文档文件，如下所示： import React from 'react' import Document, { Head, Main, NextScript } from 'next/document' import { extractCritical } from 'emotion-server' export default class MyDocument extends Document { static getInitialPro

我已经为nextjs构建添加了自定义构建文件夹 运行“下一步开始”命令后，我想从自定义生成文件夹为应用程序提供服务。默认情况下，它将查找下一个文件夹。 如何从自定义生成文件夹为应用程序提供服务

我和阿波罗一起使用NextJS。这些文件没有说太多，但指出了这一回购协议： 使用此代码的： export async function getStaticProps() { const apolloClient = initializeApollo() await apolloClient.query({ query: ALL_POSTS_QUERY, variables: allPostsQueryVars, }) return { props: {

我在下一个js应用程序中有一个名为“articles”的文件夹，其中我希望有*.mdx文件。MDX是一个生成JSX的标记解析器 我希望articles目录中的页面以某种方式设置样式，因此我希望创建一个具有这些样式的_app.js文件。但是，我不想把它放在我的main_app.js中，因为这些样式只与articles目录相关 是否有方法仅在某个目录中覆盖应用程序？您可以创建一个根组件，文章目录中的所有其他组件都将使用该根组件，即 pages |- RootComponent.jsx |-

我正在使用next.js构建一个静态站点，我希望我的website.com/about.html能够像：website.com/about——我不知道为什么它会强迫我键入.html 即使我构建了我的项目：pages/about/index.js——它生成了一个about.html，而不是静态站点上的about/index.html。我在next的网站上找到了答案： module.exports = { exportTrailingSlash: true, } 如果您有NEXT.JS 9.

嗨，我正在构建下一个js应用程序 我有buildcomponent/search_location.js constructor(props) { super(props); this.state = {locations: props.locations}; } export default function SearchLocation({locations}){ return( <div> <h1></h1> <

我以以下方式在开发模式（而不是生产构建）中使用next.js： npm run dev 在package.json中，dev命令是： cross-env NODE_ENV=development node server/server.js 然后，当我打开应用程序url时，加载所有不同的块需要30秒，即使代码根本没有更新 当我检查每个块的缓存控制属性时，它会显示“无存储” 在prod模式下运行next.js时，所有内容的加载速度都要快得多，缓存控制时间设置为max 在next.js代码库中，

我的网站有一些动态路线，可以产生数千个水合页面。这些页面遵循如下url结构：/artists/[id]/[slug]或/concerts/[year]/[month]/[day]/[slug]。目前，我的页面结构模仿了这些路线：/pages/artists/[id]/[slug].tsx和/pages/concerts/[year]/[month]/[day]/[slug].tsx 首选带有slug的路由，但是当slug不可用时，站点应该优雅地重定向。例如，我希望将前往/artist/id的任何

是否有方法检测Next.js增量构建与初始构建 用例是，如果在增量构建中API调用失败，我想抛出一个错误，从而阻止静态增量构建 但是如果API调用在初始静态构建期间失败，我宁愿优雅地处理它，而不是只呈现页面的API部分。我不想抛出一个会终止构建或阻止页面呈现的错误

每次应用程序热重新加载时，它都会使用node-mysql2创建一个新的数据库连接池，以重用数据库连接。但是，当应用程序热重新加载时，将创建一个新池。随着时间的推移，这会导致RDBMS达到其最大连接数（~300）。在热重新加载放弃应用程序实例之前，如何使用钩子或其他技术关闭连接池 这在API部分，因此前端上下文提供程序无法提供帮助 event - build page: /api/order/listForUser wait - compiling... event - compiled suc

不确定是否有人可以帮忙，但我在本地网站上有一个OCR阅读器，在我的下一个js应用程序中使用Tesseract.js。 它在本地和读smy映像时工作良好，但当我部署到Vercel时，它挂在这条线上 等待worker.load（） 事情是这样的 const worker = createWorker() console.log('createWorker') //attempt ocr on processed image await worker.load() console

我使用一个自定义的app.js并在head标签内设置SEO字段。我注意到，在初始加载时，SEO标题和其他信息设置在head标记中，当使用路由器重定向到新页面时，SEO集最初将位于head标记中，但标题更改为新路由的URL 例如，选项卡标题的初始加载将是WELCOME，用户单击一个按钮将重定向到someDomain.com/HEY。现在WELCOME标题被someDomain.com/HEY覆盖，但是，如果在HEY页面中刷新页面，我可以看到WELCOME标题，直到HEY页面API调用完成 作为临时

我正在学习next auth包，并成功地将其配置为使用GitHub作为oAuth提供程序，这非常简单。现在我已经完成了身份验证，对于如何实现授权，我有点不清楚next auth似乎没有任何关于为next.js静态页面或API实现授权的模式的文档 问题：我可以遵循什么简单模式来利用下一次身份验证登录会话来实现授权模式

我创建了一个空白的Next.js应用程序： npx create-next-app 我添加了一个自定义文档 据我所知，对于预呈现页面，ctx.req将是未定义的： “如果您有一个带有getInitialProps的自定义文档，请确保在假定页面为服务器端呈现之前检查是否定义了ctx.req。对于预呈现的页面，将不定义ctx.req。” 但另一方面，同一页也说： “Next.js会自动确定页面是静态的（可以预呈现），如果该页面没有阻塞数据要求。这是由于页面中没有getServerSideProps

这是my_document.js中的代码： 从'next/Document'导入文档，{Head，Main，NextScript}； 我已确认favicon位于我根目录的静态文件夹中： 我试着将头部放在index.js中，将favicon移动到公共文件夹中，并使用不同的图标。在我的其他Next.js项目中，favicon也不会加载。我试过Firefox、Edge和Chrome。这是怎么回事？Next.js提供来自public文件夹的静态文件（无法更改）。代码可以从基本URL（/）开始引用其中的

我有一个基本的next.js应用程序，它可以做两件事： 提供一种使用keydrope的身份验证机制 与使用KeyClope访问令牌授权每个请求的后端服务器交谈 我使用@react-keybeave/ssr库来实现这一点。现在的问题是，在我登录并被重定向回我的应用程序后，包含kcToken的cookie是空的。我刷新页面后，它的工作方式与预期的一样 我知道我的整个流程可能是错误的。如果是，实现上述目标的“常规”方法是什么 导出异步函数getServerSideProps（上下文）{ const b

大家好，我是Next.js的新手，在使用Next.js之前，我使用了react+express。现在为了SEO的原因和学习，我想使用Next.js。我在API调用和具体的联系邮件方面有问题。我在api文件夹中创建了一个带有2个函数的.js，第一个是使用NodeEmailer的sendMailHandler，第二个是带有请求的控制器。所以你发送一个POST请求，我检查你的数据，然后打电话给处理程序。现在，当我使用这两个函数获取路径时，服务器发送两封电子邮件，第一封未被第一个函数定义，第二封使用用户

所以我有一个NextJS项目，在主页上我有一个按钮，当你点击它时，它会打开一个带有输入字段的模式，在那里你可以搜索一些东西 搜索返回一个项目列表，当我按enter键时，我希望它重定向到列表中的第一个项目 不幸的是，当我点击“回车”时，模式关闭，页面在重定向之前刷新 这是我按下Enter键时运行的方法 private selectFirstActivityOrSport = () => { const { closeSportsSearchModal, sports } =

我正在Nextjs中使用react-odometerjs。 根据文件的建议： import dynamic from 'next/dynamic' const Odometer = dynamic(import('react-odometerjs'), { ssr: false, loading: () => <p>0</p>, }) const App: FC = () => { const [odometerValue, setOdom

如前所述，我想在页面上添加分页，从Sanity获取数据。 我正在使用getStaticProps获取数据，我知道getStaticProps在构建时工作，所以如何添加分页？我应该预先构建页面吗 我的代码如下所示： export const getStaticProps = async () => { const textures = await clientSanity.fetch(`*[_type == "texture"] | order(publishedAt

我正在尝试创建slug函数，但无法查找slug，因为我无法将context.query转换为字符串： export async function getServerSideProps(context){ const { API } = withSSRContext(context); const VendorData = await API.graphql({ query: getVendorBySlug, variables: { slug: con

我应该从next/head中使用并在\u app.js中使用它，还是应该从next/document中使用并在\u document.js中使用它 我有点困惑什么时候该选什么。据我所知，\u document.js仅在服务器端呈现，\u app.js同时在客户端和服务器端呈现 到目前为止我学到的东西： 这是否意味着我可以把所有与相关的东西都放在\u app.js中，然后处理完？或者将所有其他标签（除了标题和视口）放在\u document.js中会有任何好处吗？您可以将与Favicon相

现在，我正在创建一个类似博客的网站，我面临的问题是，无论是否使用复选框和react-hook表单发布，我都无法更改值 它在一周前工作，所以我认为这是由于react hook表单的更新，但我不知道如何解决它 我假设下面的代码是要更改的部分 “发布”是一个复选框，选中并提交后，“发布”的值将更改为“已发布”，并变为可见。但是我不能把它出版。它保持为false，这意味着即使已选中，也不会发布它 <fieldset> <input className={styles.checkbo

例如，我有一个动态路由/blog/[article id] 当访问现有的blog post/blog/id时，它会按预期工作，现在我想正确处理不存在的案例/blog/id /blog/[id].jsx中的代码类似于： export const getStaticPaths async () => { return { fallback: true, paths: (await sequelize.models.Article.findAll()).map(

我在Next.js 9.4.4版中开发了一个应用程序。我的文件夹结构如下所示： pages [id] index.js index.js 当我向localhost:3000/something发出请求时，它会转到索引页，当我在根索引页中记录此信息时，我无法获取/something这里是根索引文件的代码 Index.getInitialProps=（ctx）=>{ log（ctx.headers、ctx.pathname、ctx.url）； 返回{}； }; 输出是 未定义/未定义 您正在

我正在使用NextJS，它使用CSS模块，我想使用一些CSS库，比如材质UI。。。但是如何覆盖我从这些库导入的组件的样式呢？。在从中读取文档之后。说真的，它非常简单，只需使用：全局范围。 例： 您总是可以在样式规则之后使用后缀，但这并不推荐，因为它不利于样式表（CSS）的级联 对我有效的方法是使用：global选择器，就像DucHT解释的那样，如下所示： ：全局（li.ant菜单项）.siderNuItem{ 显示器：flex； 对齐项目：居中； 填充顶部：26px； 填充底部：26px； }