删除节点单元模块并重新安装npm后，我仍然在http://localhost:3000/。当我在终端中运行npm run dev时，一切正常，直到我转到http://localhost:3000/并获取上述错误。有人能帮忙吗 去年某个时候，我在MacBook上运行了这个程序，但现在我又回到了它，我无法让next.js正常工作。谢谢 以下是我使用的确切命令以及在VS代码中创建的文件： 更新： 删除了node_modules和package-lock.json，并使用hello next文件

我正在为我的next.js项目使用next-i18next包。现在我正在发送创建电子邮件功能，该功能发生在服务器端，我想使用我已经用于前端的相同翻译文件 next-i18next是否提供了类似于我在前端使用翻译的功能？如果您正确设置了next-i18next，则可以使用req.i18n.t const nextI18NextMiddleware=require（'next-i18next/middleware'）。默认值； ... 使用（nextI18NextMiddleware（nextI18

根据文件 要导入css文件，我可以在'pages/\u app.js'中执行以下操作： import '../styles.css' // This default export is required in a new `pages/_app.js` file. export default function MyApp({ Component, pageProps }) { return <Component {...pageProps} /> } 然而，当我第一次用Ne

在Next.js中登录服务器端的最佳实践是什么 我有同步两个数据库的代码，我需要查看日志。我曾考虑使用Papertrail这样的外部日志服务，但我找不到任何例子 您在使用什么？您可能想查看Github上的官方示例，例如Sentry：

基本上，如果任何组件缺少Proptype，我想显示一个警告或错误。 我添加了此规则，但不起作用 "rules": { "react/prop-types": 2, ... } 这对ReactJs非常有效，我使用Nextjs，没有收到任何错误

在NextJS中有可能有这样的URL吗 /items/item-[id] 或 /items/items-[page]-[offset] 我在这里做的是尽可能多地使用尽可能少的级别。这两种我都试过了，但都不管用。我不希望URL带有/items/item/[id]或/items/items/[page]/[offset]。我尝试做这两个搜索引擎优化和人类可读性的原因 是否有任何示例或文档指出这是可能的或不可能的？从SEO或人类可读的角度来看，您试图做的事情没有意义。这是一个原因，几乎所有的网站都遵循

我安装了这个示例，并在其中添加了react native paper，每当我使用它时，都会出现此错误 Error: Cannot find module 'react-native' Require stack: - /Users/amesbahi/Code/with-react-native-web-app/node_modules/react-native-paper/lib/commonjs/styles/fonts.js - /Users/amesbahi/Code/with-react

我正在为SSR和graphQL（Apollo）使用NextJs（9.3.0） 我的应用程序运行良好，但当我检查谷歌看到的内容时，阿波罗的数据不可用 如果我在做卷曲https://myWebsite.com随机地，我有的内容（比如谷歌）没有阿波罗的数据，有的内容有阿波罗的数据 出于SEO目的，我需要始终使用buy my Backend（Apollo）提供的数据进行第一次渲染（刷新后） 这是我的文件：apolloClient.tsx import { ApolloClient } from "ap

我定义了很多路由，其中一个路由专门用于用户配置文件 每个用户都有一个可从访问的公共配置文件 我尝试过创建文件pages/@[username].js，但似乎不起作用 有没有一种方法可以在不使用用户名传递@sign的情况下实现这种行为，因为这会使index.js处理主页变得非常复杂，我希望将代码分开 提前感谢。Next.js还不支持此功能 你应该注意这一点。Next.js还不支持这一点 您应该注意这一点。您现在可以在next.config.js module.exports={ 异步重写（）{ 返

我对Next.js中的_document.js文件感到非常困惑，并想知道为什么它似乎违反了Next.js中的规则，即“getInitialProps将禁用自动静态优化” 显然，它并不像您在运行生产构建时看到的那样。结果输出声称页面将进行静态优化。因为页面总是通过_document.js运行，所以它们都不能静态优化 import Document, { Html, Head, Main, NextScript } from "next/document"; class MyD

上面是静态html表单。 我在下面添加javascript呈现表单： <form name="contact" method="POST" data-netlify='true' action="/pages/success" hidden> <input type="text" name="Name" /> <input type=&quo

我正在运行我的nextjs应用程序，永远如下： 永远开始-c“npm开始”/ 这对启动它非常有效，但我没有找到阻止它的方法。如果我终止了这个进程，应用程序就会启动一个新的进程。我怎么停车 我在运行Ubuntu的Linode服务器上运行我的nextjs应用程序 使用永久列表，您可以在终端中看到uid 永远停止你的应用程序uid 如果你想停止一切，请永远停止一切

我想在我的NextJS项目中使用purgeCss。 在文档中，它说我应该将我的next.config.js更改为这样： module.exports = withCss(withPurgeCss()) 但是我在哪里设置当前配置 module.exports = { distDir: '../.next', webpack: config => { const env = Object.keys(process.env).reduce((acc, curr)

我想实现的目标 我希望我的next.js应用程序能像这样部署并托管在我的域中- 我还希望它支持本地化，这样当用户进入带有检测到的区域设置的页面时，应用程序将执行如下重定向- 有什么问题 当前的行为是，当用户使用默认区域设置进入页面时，应用程序将正确加载。但是，如果用户将不同的语言环境设置为其首选语言环境，而不是重定向到，则应用程序会重定向到。我还应该提到，当我手动输入时，将加载正确的区域设置，并且一切都按预期工作 我当前的配置是什么 这是我的next.config.js文件： const isP

我在SSR（Nextjs）上注入字体时遇到了问题，正如您从图像中看到的，页面加载时没有特定的字体（在我的例子中是Segoe，我在项目中本地存储），浏览器用一些默认字体替换它。这感觉就像文字在跳跃）所以我的问题是：是否有可能加载带有所需字体的页面。 这是我的密码 字体文件样式。ts: export default ` @font-face { font-display: swap; font-weight: normal; font-family: '

我正在尝试让下一个名为“With Apollo Auth”的.js示例正常工作： 我设置了所有设置，但我得到了错误： TypeError: Cannot destructure property `req` of 'undefined' or 'null'. const { AppTree, ctx: { req, res }} = ctx <----- Error line TypeError:无法对“undefined”或“null”的属性“req”进行解构。 常量{AppTree

我在玩nextjs 我很难调试像这样的函数 这： 在页面中使用 ProfilePage.getInitialProps = async () => { const auth = authInitialProps(true); if (!typeof auth === "function") { const user = await getUserProfile(); return { user }; } return { user: null }; };

我曾尝试使用Cloud Build将我的Next.JS应用程序自动部署到App Engine，但在Build阶段，它一直失败： Error: > Build directory is not writeable. https://err.sh/vercel/next.js/build-dir-not-writeable 我似乎不知道该怎么解决这个问题 我当前的生成文件是，并且在步骤2中不断失败： steps: # install dependencies - name: 'gcr.i

我正在努力改进我的next.js网站（thinkimmo.com）。我目前的灯塔得分是44分，还有一些改进。 不过->当我测试网站vercel.com（next.js的创建者）时，我得到了55分。55岁是新的100岁吗？如何到达100？现在使用next.js似乎是不可能的。是什么让你认为这是不可能的？这绝对是可以实现的。你有什么特别的问题吗？我用的是前面提到的next.js，除了一些小问题之外，我也无能为力（你可以向LH查询）。我检查了Twitch、TikTok、Netflix——它们都在60岁

因此，我试图访问我在SSR页面中设置的缓存：queryClient.prefetchQuery 我在SSR方面使用这个，我认为： ala: await queryClient.prefetchQuery(['userSesion'], () => fetchUserSession()); //这是包装我的app.js文件 <QueryClientProvider client={queryClient}> <Hydrate state={props.de

导入agora.io时，我发现一个错误窗口未定义。请按如下所示导入它 const AgoraRTC = (await import('agora-rtc-sdk-ng')).default } 看起来Next正在尝试进行SSR，您将无法使用带有服务器端呈现的Agora SDK

i在next.js中设置imge的样式和位置i使用什么 样式组件，或者是否有更好的方法 您可以使用styled（）包装组件并设置它们的样式，注意：并非所有组件都接受样式，请选中 您还可以给它className和基于它的样式，检查 从“下一个/图像”导入图像 从“样式化组件”导入样式化 const StyledImage=styled（图像）` //你的风格在这里 高度：100px；//例子 宽度：100px； ` 类别 集合{“} 资源{“} ; import Image fro

我对next.js以及它与graphql的集成感兴趣。 我在网上找到了很多关于这个主题的例子，其中大多数都使用apollo客户端和apollo服务器 我知道最新版本的next.js有api路由。这会用next.js取代apollo服务器吗 我在prisma存储库中发现了一个只使用apollo客户端而不使用服务器的存储库 我还在“下一个存储库”中的api routes文件夹中找到了另一个使用apollo server的存储库 我有点困惑，因为在第一个示例中，我们已经有了一个graphql服务器，而

我在应用程序的下一个js中使用redux： //减速机 常量初始状态={ carRequest:错， carSuccess:错， 汽车：{}， 错误：“” }; export const carReducer=（state=initialState，{type，payload}）=>{ 开关（类型）{ 案例水合物：{ console.log（状态、负载） 返回{ ……国家， …有效载荷， } } case CAR.GET_CAR_错误： 返回{ ……国家， carRequest:错， carS

我遇到了一个我在其他上下文中看到过的问题，但还没有找到解决方案。我的项目将Next.js框架用于react、Smooth Scrollbar和ScrollTrigger。我有一个.to（），里面有一个scrollTrigger对象，它位于组件中。页面顶部的文本只需固定自身并随窗口滚动，但它只在某些情况下起作用。我想我还没有完全理解一些生命周期的东西。所有这些重现我的错误的方法也会在沙箱中index.js文件的顶部进行注释 启用平滑滚动条、存储在组件中的scrollTrigger对象以及导入并嵌套

我对next.js还不太熟悉，基本的问题还没解决 这是我的app.js class MyApp extends App { constructor (props) { super(props) this.persistor = persistStore(props.store) } static async getInitialProps ({ Component, ctx }) { let pageProps = {} if (Component

使用getStaticProps时，是否有方法将呈现的页面存储到外部源而不是服务器上？我知道如果使用vercel，这是可能的，但我在AWS上使用的是自定义基础结构 我有很多动态页面，我想静态生成和文件夹大小迅速填补了很多

我正在处理的用例很常见，但我需要一些建议来可视化它。 每个用户都可以订阅多个项目 例如，用户有两个项目，项目X和项目Y。现在每个项目都有自己的订阅 对于每个特定于项目的付款，我如何标记客户->项目->订阅 我可以用订阅标记客户，但不确定如何标记项目的订阅 我在想 在用户创建时，添加客户 在“项目创建”中，添加具有价格的产品 结帐 会议 订阅/签出已完成 更新数据库 我看到这一个的问题，如果我改变价格计划，我将不得不在所有地方更新( 实现这一目标的最佳/其他备选方案是什么？ 我正在使用Nextjs

我正在尝试在我的下一个.js项目中使用ArchilogicEmbed模块 如果我这样导入： import ArchilogicEmbed, { PresentationMode } from 'https://code.archilogic.com/embed-api/v2.0.0/embed.module.js' 它给我一个错误，说模块未找到：无法解析'https://code.archilogic.com/embed-api/v2.0.0/embed.module.js“ 我正在努力在

我有一个组件，它在参数化查询中将字符串（userToFetch）作为变量参数传递给它。该组件如下所示： // pages/index.jsx import React from 'react'; import { useQuery } from '@apollo/react-hooks'; import gql from 'graphql-tag'; const GET_USERS = gql` query users ($limit: Int!, $username: String!)

我们最近实现了amp-app-banner，并且在除Safari之外的测试浏览器上运行良好 在页眉中，我们添加了以下内容： 在body，first child下，我们添加了以下标记： <amp-app-banner layout="nodisplay" id="our-app-banner" style={{ top: '0px', height: '40px', minW

js引入了图像组件。我想使用它，我目前正在努力找到使用样式化jsx将样式应用于它的方法 以下是我的尝试： export default function MyComponent({description}) { return ( <div> <Image src={concept.icon.url} className="icon" width={40} height={40}></Image>

我开始使用nextjs和Vercel部署构建一个API。设置非常简单，只需在pages/api/下创建文件即可。例如，创建端点/显示，/movies，/sports我有： ./pages/api/ /shows /movies /sports 这很好，但我希望API的版本如下：/v1/shows/，/v1/movies，等等 如果我可以基于git提交标记创建一个新版本，那就更好了。也就是说，当我合并到main分支时，Vercel要么部署到当前生产环境（例如v1 env）

我正在尝试将我的应用程序迁移到最新版本的NextJS（v10）。他们引入了一个新的图像组件（请参阅），当我尝试使用它时，我的应用程序无法正确地提供图像 在我的next.config.js中，我设置了一个basePath值，以便能够从子路径而不是根路径为我的应用程序提供服务： const nextConfig={ 页面扩展：[“js”、“jsx”、“ts”、“tsx”、“mdx”、“md”]， 基本路径：“/an”， }; 设置此选项后，Image组件无法获取我的img文件。没有它，一切都可以完

我使用的是next.js 10，有一个[slug]页面，可以从内容丰富的CMS创建动态页面。 我正在更改CMS中的slug并运行next dev旧slug正确返回404，新slug工作。 但是，当我构建并运行next start时，旧的slug仍然返回一个缓存页面，新的slug工作正常。 我将返回重新验证日期10，并假设页面应在10秒后刷新 export const getStaticProps: GetStaticProps<SlugRoutePageProps> = async

根据文档，通过getStaticProps获取数据只能从页面调用，不能从/components目录下的组件或子/嵌套组件调用。在需要通过组件获取数据的情况下，您可以： 使用useffect获取数据 从父组件（存在于/pages下的组件）获取数据，并将数据发送到子/嵌套组件 这两种方法是官方支持的方法吗（推荐的方法）？或者，在获取子组件/嵌套组件的数据时，是否有其他替代方法？这是两种受支持的数据获取方法。感谢您的评论！我想我必须坚持这两种方法。

我不知道为什么不能使用tailwind.config.js覆盖我的字体系列。我从谷歌字体下载了一个名为Poppins的字体。然后我用字体脸从我的公用文件夹中附加我的字体。之后，我在tailwind.config.js中创建了一个主题。但是当我尝试使用devtools时，字体家族仍然不是我想要使用的Poppins tailwind.config.js const defaultTheme = require('tailwindcss/defaultTheme'); module.exports

我正在尝试在nextjs上使用我的access_令牌，并将其与存储持久化一起使用 但没用，我什么也没找到， 如何将持久化数据传递给nextjs ssr import storage from "redux-persist/lib/storage"; ...blablabla... export const getServerSideProps = async(context) => { const { sef, group, concept } = context.

项目结构如下 /pages /user login.js register.js /admin dashboard.js 我想做的是当用户成功登录时（登录url:->http://localhost:3100/user/login)然后用户应该导航到仪表板页面（预期url:->http://localhost:3100/admin/dashboard). 请任何人帮我解决这个问题。用于处理导航。成功登录后，请致电router.push（'/admin/dashb

接下来，它似乎不处理传输，但根据文档，它应该传输所有react组件 yarn run v1.15.2 $ next [ wait ] starting the development server ... [ info ] waiting on http://localhost:3000 ... [ ready ] compiled successfully [ info ] ready on http://localhost:3000 [ event ] client pings, bu

我正在使用graphql瑜伽，我正在编写访问Microsoft Graph API的cookies。在前端，我有一个apollo客户端，安装了NextJS，它工作得非常好。。。正在开发中。部署服务器时，前端根本无法识别cookie。在我的阅读中，我认为这与服务器呈现的NextJS有关（即使当我运行下一个构建时，它说的是静态构建…），我确信问题在这里的某个地方（我将注释留在这里，以显示我试图将凭据设置为“包括”的所有位置） 其他答案都涉及CORS，但我在GraphQL服务器上设置了CORS： co

我正在使用NextJS开发一个类似电子商务的网站 我将在/products页面中获取并显示产品列表。单击任何产品后，我将导航到/details/[productId]，并按如下方式获取这些产品详细信息 // In /details/[productId].js file export async function getServerSideProps({params}) { const res = await fetch(`https:my-api-url/api/products/$

我有一个使用Next/Link的Link组件，我传入的电话号码格式如下：tel:+1555555 但是，我得到一个错误： 传递给路由器的href无效：电话：+15555 不支持电话号码吗？Next/Link是页面导航的组件。没有充分的理由将其用于特殊链接，例如tel:/mailto:Next/Link是用于页面导航的组件。没有充分的理由将其与特殊链接一起使用，例如tel:/mailto:

在下面的html中，我根据message.error或message.info选择应用引导类、alert danger或alert primary。目标类是引导类，它按预期工作 <div className={classnames(`alert, ${styles.alertDiv}`, { "alert-danger": message.error, "alert-primary": message.info, })}

我想从SSG和CSR两个优势中获益，这取决于访问者的来源 对于直接访问第1页或第2页，我希望使用SSG呈现页面并优化加载时间和SEO 如果用户从第1页转到第2页，我希望使用CSR渲染第2页，这样我就能够为过渡设置动画 使用Next.js可以吗 Next.js将自动处理此问题-如果页面可以静态呈现，那么导航到该页面几乎是即时的。这是由于在后台发生的预加载

更新： 由于[category_slug]-index.js的getServerSideProps，导致此错误的原因是什么 我试着在product文件夹下做index.js，它可以工作。。。意思是说它可以和[category_slug]一起使用哪些服务器端道具，对吗 这是我的文件夹结构 pages |-categories | | | |-[category_slug] | |-index.js | |-prod

我们有一个现有的应用程序，默认情况下根“/”被重定向到“/search”。通过我们的next redirects.js文件，它运行良好： async function redirects() { return [ { source: '/', destination: '/search', permanent: true, }, ]; } 我必须使用next-i18next实现对应用程序的翻译，这样我们就可以使用NextJS实现翻译文

本教程允许我从页面获取数据。组件如何取而代之地获取数据 我有要从中获取数据的组件。我该怎么做 您可以使用useEffect获取数据。另一方面，您可以从父组件获取数据并将数据传递给子组件 const Component = props => { // You can get data from parent component. const parentData = props.parentData useEffect(() => { // Fetch D

我希望通过一个简单的Next.js应用程序设置Chakra UI（最新版本）。在执行“入门”步骤之后，我在运行dev server时遇到以下错误： error - ./node_modules/@chakra-ui/portal/dist/esm/portal.js Attempted import error: 'useCallbackRef' is not exported from '@chakra-ui/hooks'. 这是我的\u app.js文件： 从“@chakra ui/rea

我在下一个.js项目中有一个[pid].js文件。我还想实现一个定制的404页面，但问题是：我把404.js文件放在/pages目录中。如果我删除我的[pid].js文件，404页面就可以正常工作。但是，如果我保留我的[pid].js文件，第一个请求将进入pids，并且由于url与pids中定义的任何页面都不匹配，我会得到一个错误。我应该从pids显式返回404组件吗？这是一种好的做法吗 下面是代码（现在不会重定向到404页）： [pid].js constpid=（{url，props}）=>