接下来是一个内置的API路由 它使用/pages/api 是否可以将默认路径从/api/*更改为类似于/myApi/*的其他路径 我正在考虑将其添加到exportPathMap 有什么建议吗？我相信您不能更改/api路径，因为Next.js在该位置看起来特别合适 // Regex for API routes export const API_ROUTE = /^\/api(?:\/|$)/ 如果要使/api目录与/pages中的任何其他目录一样工作，可以使用重写选项 next.confi

本人有以下申请： docker中带有Restful API的magento2电子商务站点 docker中的一些nodejs微服务Restful API 我有个问题，如果我想开发一个ecommence+用户门户前端站点，我应该选择哪个框架？NEXTJS还是盖茨比 鉴于： 我有超过30000个用户 我需要为10多个地区提供服务，而且可能会不断增加 我需要为10多个国家提供服务，而且可能会不断增加，每个国家可能会有许多不同的本地化设置 我有10多家分店，代表10个国家，每个分店都有20多种产品，

我正在尝试使用Prismic作为CMS部署一个应用程序，并且一切都在本地完美运行，但一旦我部署到vercel，我就会得到错误： 19:09:51.850 | TypeError: Cannot read property 'titulo_categoria' of undefined 当它试图从Prismic获取数据时，似乎出现了问题。 我的代码如下： 从“../../lib/api”导入{getAllCategorias，getCategory2}； 导出默认函数索引（{cat}）{ 返回{

可以从特定css样式表中的css模块访问css类吗？例如，我想在组件标记的末尾连接mediaQueries.css，但在mediaQueries.css的私有类aboute.module.css或index.module.css中看不到。那么我如何配置webpack或者我可以做什么呢？将它们作为对象导入，并将类作为属性引用： 从“/path/to/stylesheet.module.css”导入样式； 导出默认函数组件（）{ 返回你好世界 } CSS示例： .className{ 颜色：红色；

我不确定是否在Next.js文档中遗漏了一些内容，但似乎在Next.js应用程序中重用组件而不破坏组件是不可行的 根据我的理解： Next.js使用SSR通过getStaticProps、getstaticpath或getServerSideProps在页面级别获取数据 一旦获取了这些数据，它就会通过道具返回到页面 然后，页面可以访问道具，然后可以按照自己的意愿处理这些数据 为了对页面的子组件使用SSR技术，我们必须在页面级别获取子组件数据，然后将这些数据传递给我们的组件 这给我带来了一些担

我最近修复了我的CLS和LCP问题，希望我所有的URL都能修复。我在前端使用next.js，我的问题根本没有解决。我目前每个页面的CLS是0.039，LCP是2.5，对于移动设备，这是符合谷歌指南的。 但最重要的是，我很困惑谷歌为什么要计算26个网址，广告126个。下面的截图将解释我面临的所有问题 正如您所看到的，它显示了126个URL，但在右侧，总共有20个URL。我还想澄清一下，我在每个slug页面的头部使用了规范链接标记，如下所示 <link rel="canon

我想在应用程序呈现之前从api加载一些数据 是的，我知道我们可以在组件的getInitialProps方法中完成，但我不想在每个组件加载时加载它， 我只需要进行1个api调用，并在所有组件中访问检索到的数据。最简单的方法是什么 是的，我知道我们可以在组件的getInitialProps方法中完成 我想这可能是你困惑的原因。getInitialProps方法用于页面加载。不适用于单个构件荷载 我只需要进行1个api调用，并在所有组件中访问检索到的数据 有几种方法可以做到这一点 如果您想利用SSR

在我的下一个js项目中，我有以下内容： <h4 className="caption-title"> <Link href="/products"> <a>{key}</a> </Link> </h4> 链接出现在我的页面上，我点击了它，但它没有进入产品页面。 在pages目录中，我有products.js 单击时，显示的url为：http://loc

我正在我的项目中使用nextJS SSR。现在，当我尝试使用下面的代码来获取页面参数时，它显示undefined function About() { const router = useRouter(); const { plan_id } = router.query; console.log(plan_id) } export default About; 当页面从其他页面路由时（没有使用“下一步/链接”重新加载页面），它可以工作，但当我刷新页面时，它不工作。有人能帮忙

我在下一个.js页面中使用了getStaticProps export const getStaticProps=wrapper.getStaticProps（异步（{store}）=>{ dispatch（getInfoRequest（））； 存储调度（结束）； wait store.sagaTask.toPromise（） }); 这是一条动态路线。 当我刷新页面时，我会得到： 错误：动态SSG页需要getStaticPaths，而“/dates/[…info]]”缺少getStaticP

我在一个隐藏的图库中有一堆图像，只有当用户单击某个按钮时才会显示 在开发服务器上，一切都很好，没有错误或问题，但是当我部署我的网站并打开图库时，图像不会显示，并在控制台中抛出404错误（我包括了所需的道具） 当我用替换组件时，开发服务器和live上的一切都很好。有人能帮忙吗？我搜索了很多次，没有找到类似的问题。使用Next.js的默认加载程序优化图像与下一次导出不兼容 可能的解决方案： 使用next start，启动图像优化API 使用Vercel进行部署，它支持映像优化 在next.conf

我正在使用next compose plugins，当我尝试构建nextjs应用程序时，它抛出错误： 运行时错误：未捕获错误：模块分析失败：保留关键字“interface”。 您可能需要适当的加载程序来处理此文件类型，目前没有配置加载程序来处理此文件 我正在使用react jss，我认为这就是我缺少配置的原因。我不确定我的配置出了什么问题。任何帮助都将不胜感激。谢谢。闻起来像是在JS中加载了一些TypeScript，如果您删除withPlugins，它会工作吗？ const nextConfig

我将Next.js与样式化jsx以及stylelint一起使用，直到我开始在样式化jsx中使用变量，因为stylelint在这些变量上抛出stylelint（CssSyntaxError） 比如说 const Button = ({ color }) => ( <> <button>Hello World!</button> <style jsx>{` button { color: ${co

我在nextjs组件中呈现了字符串，该字符串有一些包含标记的链接。 如何注入nextjs链接组件安装一个有效的标签已解决 在页面上将字符串呈现为html后，我用一种方法编写了此代码 const router = useRouter(); window.addEventListener('click', (e) => { if (e.target.classList.contains('nextjs-link')) { // this line check a tag contain

我只有一个项目有一个特别的问题，那就是使用nextjs和tailwindcss 我尝试用一些自定义颜色扩展配色方案，Intellisense会识别颜色，但它们不会应用，当我将其与@apply一起使用时，app会中断，说这些类不存在 语法错误：@apply不能与.text test一起使用，因为.text test要么找不到，要么它的实际定义包含一个伪选择器，如：hover、：active等。如果您确定.text test存在，在Tailwind CSS看到您的CSS之前，请确保所有@import

我正在尝试构建下一个Js项目。但不幸的是，我收到了这个错误消息 net：：ERR_中止404 在生产过程中。它在本地主机中工作正常 我认为这是我面临的问题 <Link href={`/questions/[questionid]`} as={`/questions/${id}`}> <a> Answer</a> </Link>

我不擅长英语，所以请理解 我的问题就像标题一样 <Table columns={[ { key : 1 title: 'No. ', dataIndex: 'id', width: 70, align: "center" }, { key : 2 title: 'g

创建下一个应用程序并执行“npm运行开发程序”浏览http://localhost:300我得到： 得不到/ 为什么会这样？确定您没有忘记0，例如http://localhost:3000？npm说什么？当然，响应“无法获取/”表示应用程序正在运行。但它不显示主页。npm说：“0.0.0.0:3000上的就绪启动服务器，url:info-Loaded env from C:\Users\yigo\Desktop\next\abc app\.env.development info-Loaded

我正在寻找通过下一次翻译将静态文本加载到故事书中的方法 我的代码看起来像这样，但它正在加载我的语言环境文件，但没有正确地编写它们 这是故事书预览版。js: import '../src/styles/global/global.scss'; import CssBaseline from '@material-ui/core/CssBaseline'; import { ThemeProvider } from '@material-ui/core/styles'; import theme

在nextjs中有许多方法可以保护路由。我不需要在每一页ssr。所以我在useEffect钩子中使用条件渲染，根据身份验证状态重定向用户。如果未通过身份验证，则重定向到“/”。如果用户登录并尝试访问“/”，它将重定向到经过身份验证的页面 假设有三个页面/、/[user]和/[user]/dashboard。我的“/”页面具有登录表单，当用户进行身份验证时，它将重定向到“/[user]/dashboard”。如果用户在验证后尝试访问“/”，则它将重定向到“/[user]/dashboard”。现在

我创建了这样的目录 /页/ ├── user-info-top.jsx（我的页面） ├── 编辑-user-info.jsx ├── confirm-edited-user-info.jsx ssr用户信息顶部　（从服务器获取用户数据并在客户端以全局状态存储） ↓ csr编辑用户信息　（参考并编辑存储在用户信息页面的全局状态下的用户数据） ↓ csr确认已编辑的用户信息　（请参阅“编辑用户信息”中存储的全局状态下的“编辑用户数据”部分） _app.jsx const UserInfoContex

我目前正在从Wordpress迁移到Netlify CMS，但我在设置“标签”系统时遇到了问题。我的前端是用Next.js构建的 在我的配置中，我有一个标记字段： fields: # The fields for each document, usually in front matter - { label: "tags", name: "tags", widget: "list" } 这允许我在Markdown（文件\u po

我正在测试一个简单的next.js react应用程序 误差如下；TypeError:无法读取未定义的属性“map” 服务器端.js: ... export default function Home({books}) { return ( <Grid container spacing={2}> { books && books.map(row =>

在next.js中，您可以使用根目录中的“public”目录为静态资产提供服务。我在这个目录中有index.html文件，因为我希望我的登录页是纯静态的 但是，当使用next或next start时，我无法访问位于的登录页。我只能在“”访问我的登录页 有没有办法设置next.js，以便顶级域（）将服务于我的登录页？next.js路由器只服务于从页面目录中的.js、.ts和.tsx导出的页面 您需要一个自定义服务器来服务除此之外的任何内容 此外，如果使用反向代理，如nginx，则可以在服务器到达

我刚刚使用Vercel将我的nextjs应用程序发布到生产中 我喜欢整个体验，除了一小部分：我本希望能够将我的应用程序置于维护模式，但该选项在Vercel上似乎不可用 我的问题是：以前有没有人做到过这一点，可以在这里分享一些细节 我猜这可以在两个层次上完成： 修改我的应用程序，以便在检测到环境变量（即MAINTENANCE\u MODE=true）时，每页都会重定向到维护屏幕。但是，这并不理想，因为在Vercel上添加环境变量需要考虑它的部署 具有一个简单的每个项目切换，以从Vercel启用/

我使用的是最新版本的NextJS 10.0.9。我有一个试图显示的图像，但收到错误： Error: Image with src "https://picsum.photos/480/270" must use "width" and "height" properties or "layout='fill'" property. 正如您在这里看到的，我设置了所有这些属性： <div className=&q

因此，在文档中，我们有以下代码： RE：使用“useRef”存储引用 // _app.jsx import { QueryClient, QueryClientProvider } from 'react-query' import { Hydrate } from 'react-query/hydration' export default function MyApp({ Component, pageProps }) { const queryClientRef = R

我有一个使用nextjs 10.1的网站 我正在使用SSG和catchall策略，即在/pages下，我有 -pages --[...slug] ---index.tsx 在我的index.tsx中 export const getStaticProps: GetStaticProps = async (context: any) => { const { params, locale } = context; const slug = params.slug; //multiple s

请给我一个解决方案，从帐户中获得2个余额HPB、ESR。 为了获得令牌余额，您需要知道令牌合约的地址，因为地址的令牌余额存储在令牌合约上 MetaMask仅将保存的帐户共享给请求应用程序，用户需要首先手动确认此操作。但它不共享用户添加到其MM UI的令牌地址 因此，如果您知道令牌地址，您可以使用一个简单的web3调用，例如： const jsonAbi = {}; // JSON ABI of the token contract const contractAddress = "0x

我一直在开发一个利用Firebase的NextJS应用程序。我已经设置好了所有内容，在构建过程中，我得到了以下错误：package.json在/package.json中不存在（参见图片） 要提供有关这方面的更多内容，请执行以下操作： nextjsv^9.3.0 Firebase v^7.10.0 目标：服务器（默认情况下） My next.config.js： const path=require（'path'）） const resolve=require（'resolve'） co

在我的package.json中，我有一个build脚本集来构建我的下一个项目，如下所示： “构建”：“echo\“$NODE\u ENV\”和&NODE\u ENV=$NODE\u ENV下一个构建和&npm运行构建服务器”， 我得到的命令的输出是： > admin-ui@1.0.0 build /usr/src/admin-ui > echo "$NODE_ENV" && NODE_ENV=$NODE_ENV next build &&

在下一节中，我如何在下一节中停止路由器导航 我正在尝试使用routerChangeStart事件停止导航 useEffect(() => { const handleRouteChange = (url: string): boolean => { if (dirty) { return false; } return true; }; Router.events.on('routeChangeStart

我试图找到如何更改默认页面路径（当您在“/”路径上访问服务器时），但找不到任何内容。我在pages目录中有一个index/index.jsx格式的结构，我希望在访问服务器时默认返回此页面。我在这个论坛上没有发现类似的问题，也许有人需要你的帮助，除了我。Next.js中页面结构的工作方式非常有见解。如果在访问/时需要从不同的页面结构发送文件，则需要配置自己的little express服务器 然后，您将得到如下结果： // Some code if (pathname === '/') {

我最近更新了我的个人网站（使用Gitlab.com上的Gitlab页面），使用了一个nextjsssg项目，您可以看到 当我即将完成这项工作（一切正常）时，我在GT Metrix和Twitter卡验证程序上检查了我的SEO…令人不快的是（！）：对于一些页面（但不是每个页面），GT Metrix告诉我他收到503错误，对于相同的页面，Twitter验证程序向我显示了指向Gitlab signin页面的链接（显然已重定向） 以下是出现错误的页面： 及 和（博客帖子可以） 我坚持认为该网站在浏览时

我有一个使用谷歌托管的应用程序。在实施动态路由之前，我通过执行next export和firebase deploy托管了它 在我的[id].js文件中，我使用getServerSideProps获取数据，在执行next export时，我得到了下一个错误： 无法导出带有getServerSideProps的页面 解决方案是“从package.json中删除next export”。但是，如果没有下一次导出，我如何托管我的应用程序？为什么不在vercel上托管你的应用程序？它让一切变得如此简单。

当我像下面一样使用useQuery时，它会以react query文档中使用的方式发送无限多的获取请求。文档还说fetch不会自动抛出错误。因此，我尝试了下面相同的代码，但是使用了一个try-catch块。我还尝试在useQuery钩子中的一个对象中配置staleTime，但没有成功，我真的不知道什么是stale time。哈哈，请帮帮我。努力在周一之前完成这个项目 在我的控制台中发现此错误： (node:27609) UnhandledPromiseRejectionWarning: Refe

我是新来的。我对图像很困惑。我得到下面的错误。我按照npm下一幅图像的文档进行操作，但仍然无法显示该图像 模块分析失败：意外字符'�' (1:0) 您可能需要适当的加载程序来处理此文件类型，目前没有配置加载程序来处理此文件。看见 （此二进制文件的源代码省略） 检查package.json中的下一个版本，如果超过10，则不需要任何第三方库我必须确保在根项目目录中创建一个名为next.config.js的文件。把这个放进去 const withImages = require('next-image

我试图理解如何迁移到我们的结构中的Gatsby/NextJS src ├── scripts ├── components ├── domains │ ├── ca.cdn.domain-1.com │ │ ├── global │ │ └── pages │ │ │ ├── page.html │ │ │ └── page-2.html │ ├── m.cdn.domain-2.de │ │ ├── global │ │ └──

我正试图找到一种最好的方法来为带有聊天组件的应用程序生成电子邮件通知 为了提供一点上下文，我们在应用程序中有一个场合列表，每个场合都有一个聊天记录。我们希望发送电子邮件通知，通知用户有消息等待阅读。但我们不希望每封邮件发送一封电子邮件，因为有时我们会一次性发送多封邮件 我们想在第一条消息发送1分钟后发送一条消息，并发送该分钟内要发送的所有消息的摘要 为了提供额外的上下文，我们的应用程序位于Nextjs、Supabase和其他事务性电子邮件的邮戳上（但如果有更好的选择，则不必附加到它） 你将如何处

我希望Next.js 7同时支持css模块和普通css，与CRA的行为相同 我发现： . 但它不适用于Nextjs7。他们在那里使用迷你css提取插件 那么解决方案是什么呢？遵循以下步骤： 在Head组件（next/Head）中为每个所需组件添加常规css文件 如果它在所有应用程序之间通用，则可以直接将其放入\u app.js文件中 然后将css模块加载到next.config.js文件中，如前所述

我正在使用next.config.js文件开发一个应用程序，该文件根据环境变量设置了一组配置变量，以便在应用程序的其他地方使用。我想在这个列表中添加更多基于URL的内容，我使用包jekrb/next absolute URL来读取URL 我遇到的问题是在他们的示例中使用了const{origin}=absoluteUrl（req），但我无法在next.config.js文件中使用它。它只是告诉我，req没有定义 下面是我当前next.config.js文件的简化示例 const withTM =

我想使用graphql建立一个新的下一个JS项目。我认为跳过独立服务器并使用Next JS提供的API路由是一个好主意。这是一个启发我的例子。不幸的是，我无法启动并运行graphql 下一个JS启动时没有错误，但在将请求发送到api/graphql TypeError: resolver is not a function at apiResolver (/home/vavra/Projects/project-united/node_modules/next/dist/next-ser

我想将图像上载到公用文件夹，可以吗 到目前为止，我正在手动插入图像并一次又一次地部署应用程序 我急需一个更简单的方法 根据路径URL，我将匹配公用文件夹中的图像，然后将图像放入meta标记中。简单。只需将图像添加到公共目录中，并以public作为根引用图像的路径 从： 函数MyImage（）{ 返回 } 导出默认MyImage

我正在使用中的DateRangePicker构建一个项目 有没有其他方法可以将日期注入DateRangePicker 假设我从查询参数中获取日期签入日期：2020-11-03，签出日期：2020-11-15，我想在反应日期中显示签入日期和签出日期 我在github上搜索了google和issue页面，但找不到任何有用的东西 是否有一个道具支持的反应日期本身，使事情的工作

我想知道动态导入（next.js功能）和等待导入之间的区别 我无法在网上找到有关差异的解释。 我知道您可以使用动态导入仅导入React组件，而不导入库。 但是为什么我应该使用动态导入，而不仅仅是等待导入 感谢他们在这里解释的，在导入dynamic React组件时，您应该使用next/dynamic，以确保NextJS能够将webpack bundle与特定的动态调用相匹配，并在呈现组件之前预加载组件 所以对您的问题的答案是肯定的，您应该使用Nextjsdynamicimport，而不是awai

当测量页面速度时，即 谷歌显示的不是这个，而是我们的主页。但我们不会改变方向。那为什么呢 您的站点在第一次访问时会重定向到主页 如果您再次访问该页面，它将停留在正确的页面上 快速浏览之后，如果您在访问页面之前尚未在本地存储中设置“tempUserUuid”，它会重定向（就像我删除此页面时，它会再次重定向） 这可能就是为什么你没有发现你身边的问题 由于PageSpeedInsights总是从干净的缓存中运行（就像它是第一次访问一样），这就是为什么您在PSI中看到这种行为

我目前正在尝试用next.js实现一个多地区、多语言的电子商务解决方案 我想使用子域进行商店导航（即fr.example.com是法国商店，而de.example.com）将对应于德国商店 现在，通过使用，这是非常可行的。但是，通过在next.config.js子文件夹中使用i18n，似乎也会自动启用路由 这意味着像pages/[language]/product（例如fr.example.com/en/product-1）这样的路由不起作用，因为en也被解释为区域设置。使用域路由时，是否有方法

我正在使用Nextjs应用程序，我创建了组件并将其添加到\u app.tsx文件中，但我不需要只在一个页面上显示它，您能告诉我这是可能的吗？您可以检查该路由是否是您要通过的路由排除的路由。您将需要对照进行检查，因为路径名将不匹配动态或捕获所有路由。这是一种对支票进行未来验证的简单方法 import { useRouter } from 'next/router'; const { asPath } = useRouter(); retturn ( <> {asPat

按照关于使用Sass的真正基本用法指南，我发现以下错误： ./assets/styles.scss ValidationError: Invalid options object. CSS Loader has been initialised using an options object that does not match the API schema. 我还尝试了nextless（使用Ant设计）和基本nextCSS包，但结果是一样的 ./assets/styles.less Va

我想在我的next.js应用程序中将我的URL设置为slug，但还需要将itemID传递给getStaticProps，以便从API中获取所需的数据 如何将ID和slug从GetStaticPath传递到getStaticProps，而不是一个或另一个 export async function getStaticPaths() { const paths = items.map(item => ( { params: { id: item.itemID }} ))