next.js 相关问题

Next.js是服务器呈现的React应用程序的简约框架。

特定项目的 VS 代码速度较慢

我已经使用 VS code 好几年了,到目前为止我很喜欢这种体验,但是我最近的一个项目突然大大减慢了 VS code 的速度,我还不知道为什么。还有阿玛...

回答 1 投票 0

Next.js 14 在另一个页面隐藏根布局

我在 Next.js 14 项目中使用应用程序路由器。 我的项目文件夹结构是这样的。 - 仪表板/ /page.tsx # 使用主布局 /layout.tsx --...

回答 1 投票 0

在next js 14客户端组件中创建routeChangeStart和routeChangeComplete路由器事件

我有一个下一个js v14.0.4项目。我正在尝试将顶部加载程序进度条与 NProgress 包应用于 Link 或 router.push() 发生的每个路由更改。但是handleRouteChangeStart和

回答 1 投票 0

Next.js 11 - Axios api 调用在页面加载时触发 2 次

我一直在尝试将 React.js CRA 迁移到 Next.js SSR 应用程序,我专门迁移到 Next.js 11,因为我有一些仅支持 Next.js 11 的软件包 deps,因为我的 CRA 应用程序是 wo ...

回答 1 投票 0

错误:渲染的钩子比上次渲染期间更多。 nextjs 和 shadcn 数据表

任何人都可以向我解释或帮助解决我的代码中面临的问题。我正在尝试从 NodeJS 的后端获取数据。并在我的 nextjs 前端应用程序中渲染它,我收到此错误:“Err...

回答 1 投票 0

Google 搜索不读取 OpenGraph 元标签

Google 搜索似乎错误地显示了我网站的 OpenGraph 元标签。我正在使用 Next.js (Pages) + Next-SEO(因为使用 几乎会在子应用程序上重复来自 _app 的 OpenGraph 标签...

回答 1 投票 0

为什么动态页面在构建(应用程序路由器)期间执行请求?

既然动态页面是“服务器按需渲染”,为什么 nextjs 在构建期间执行它的请求,即使在请求页面时这些请求将再次执行? 当我

回答 1 投票 0

如何在 NextJS 13 App Router 中从 page.jsx 抛出 404 Not Found 错误以及 404 状态代码?

我在 page.tsx 组件中使用异步获取请求,类似于以下代码 从 'next/navigation' 导入 { notFound } const PostViewPage = async ({params}) => { const {slug} = 参数;

回答 1 投票 0

为什么这个回调在 React 中没有被记住?

我有一个 Next.js 项目,在 _app.tsx 中包含以下代码: const Root = ({ 组件, pageProps }) => { ... const handleHistoryChange = useCallback((url) => { 控制台.log({ url }...

回答 1 投票 0

如何使用“useEffect”和“useCallback”?

我正在制作一个Nextjs。应用程序,在我的应用程序中,我有一个标头,其中包含图像,并且该图像是从数据库获取的。 使用效果(()=> { const data = JSON.parse(localStorage.getItem('

回答 1 投票 0

如何在 NextApiRequest 中访问查询

我正在尝试使用以下 URL http://localhost:3000/api/hello?type=customer 访问我的 http 请求中的查询,有谁知道如何检索 type 的值? 导出异步函数...

回答 1 投票 0

以Node.js(Express)为后端的Next.js中未设置Cookies

我按照本教程在我的项目中使用 HTTP-Only cookie: https://maxschmitt.me/posts/next-js-http-only-cookie-auth-tokens 后端工作正常,我可以在 Postman 中看到 cookie。但对于

回答 2 投票 0

prisma 中的 GroupBy 和 Sum

我有以下 MongoDB 数据库的 Prisma 架构 型号订单{ id 字符串 @id @default(auto()) @map("_id") @db.ObjectId 总金额 Int 创建于...

回答 2 投票 0

为什么 Next-Auth 在浏览器中创建两个令牌?

我仅通过 1 个提供商(Azure AD)使用 Next Auth。通常,Next-Auth 会创建一个会话令牌 (__Secure-next-auth.session-token),我可以将其发送到后端并解码以进行身份验证。

回答 1 投票 0

无法在 Nextjs 中使用警报或将内容分配给窗口

您是否尝试使用窗口对象的内置警报功能来快速对您的应用程序进行健全性测试,并且不断收到“错误:警报未定义”之类的错误? 导入图像...

回答 1 投票 0

如何在react useEffect中使用solidity事件?

我想订阅一个solidity事件监听器,但是在渲染过程中useEffect调用了两次。如何取消订阅事件或如何处理? 使用效果(()=> { console.log('添加');

回答 1 投票 0

更新图片而不更改 URL 不算更新图片

我正在使用 Next.js 14,将其托管在 Vercel 上,使用 Supabase 作为我的数据库,并使用 Cloudflare 作为 DNS。 我正在运行一个包含图像的网站,我从我的 Supabase 获取这些图像 URL...

回答 1 投票 0

如何使用 Launch Darkly with Next app 中的 asyncWithLDProvider

Launch Darkly 有一个示例(https://github.com/launchdarkly/react-client-sdk/blob/main/examples/async-provider/src/client/index.js),说明如何将 asyncWithLDProvider 与React 项目(如下...

回答 1 投票 0

Next.js - 如何使用文字 onload 属性字符串值在 <link> 内添加 <head> 标签?

在 Next.js 项目中,我想获得一些初始 HTML,其中的内容与 完全相同: 在 Next.js 项目中,我想获得一些初始 HTML,其中的内容完全相同 <head>: <link href="..." rel="stylesheet" media="print" onload="this.media='all'" /> 我的代码中 Next.js 的 <Head> 组件内的内容是: { /* @ts-ignore */ } <link href="..." rel="stylesheet" media="print" onload="this.media='all'" /> 如果没有 @ts-ignore,它会说: 类型“DetailedHTMLProps”上不存在属性“onload”。您指的是“onLoad”吗? ts(2322) 如果我使用 onLoad 而不是 onload 我得到: 类型“string”不可分配给类型“(event: SyntheticEvent) => void”。 ts(2322) 问题是我得到的服务器端生成的 HTML 有: <link href="..." rel="stylesheet" media="print" /> 并且只有当页面重新水合后,它才会更新为: <link href="..." rel="stylesheet" media="all" onload="this.media='all'"> 我在 GitHub 上发现了这个问题,但它没有帮助,因为我没有使用 Google Fonts,而是使用 Typography.com,所以我无法使用 next-google-fonts:https://github.com/vercel/next .js/issues/12984 我正在考虑向该 ref 标签添加 link 并使用 setAttribute 设置属性,这希望也能在服务器端工作,但想知道是否有更简单的方法来做到这一点。 更新答案(下13-14): Next.js 现在提供开箱即用的 Google 和本地字体优化。以下是加载 Google 字体的方法: // This will add the Inter font to your own deployment, serving // them from your domain without sending any data to Google: import { Inter } from 'next/font/google'; // If loading a variable font, you don't need to specify the font weight const inter = Inter({ subsets: ['latin'], display: 'swap', }) export default function RootLayout({ children, }: { children: React.ReactNode }) { return ( <html lang="en" className={inter.className}> <body>{children}</body> </html> ) } 原答案(下12): 所以我最终在自定义<style>中使用带有dangerouslySetInnerHTML的_document.js标签修复了这个问题。总而言之,它应该看起来像这样: <link rel="preconnect" href="https://fonts.googleapis.com" crossOrigin="anonymous" /> <link rel="preload" href="https://fonts.googleapis.com/css2?family=Inconsolata:wght@400;600&family=Karla:wght@700&display=swap" as="style" /> <style dangerouslySetInnerHTML={ { __html: `</style> <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Inconsolata:wght@400;600&family=Karla:wght@700&display=swap" media="print" onload="this.media='all';" /> <style>` } }></style> <noscript> <link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css2?family=Inconsolata:wght@400;600&family=Karla:wght@700&display=swap" /> </noscript> 生成以下输出: <link rel="preconnect" href="https://fonts.googleapis.com" crossorigin="anonymous"/> <link rel="preload" href="https://fonts.googleapis.com/css2?family=Inconsolata:wght@400;600&amp;family=Karla:wght@700&amp;display=swap" as="style"/> <style></style> <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Inconsolata:wght@400;600&family=Karla:wght@700&display=swap" media="print" onload="this.media='all';" /> <style></style> <noscript><link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css2?family=Inconsolata:wght@400;600&amp;family=Karla:wght@700&amp;display=swap"/></noscript> 不太漂亮,但比在 <div> 中包含 <head> 更好(并非所有浏览器都能正确解释)。 有一个 open RFC 可以创建 RawHTML 组件或扩展 Fragment 来接受 dangerouslySetInnerHTML,这样就可以在没有黑客的情况下实现类似的功能,但距离创建已经一年多了。 此外,还有对此进行了相当长的讨论,以及一些似乎有效的不同解决方案(黑客)。 您可以在此处查看解决方案:https://andorratechvalley.com/

回答 1 投票 0

在 aws-amplify ui-react 中获取 aws cognito 令牌

我目前在 Next.js 前端和 NestJS 后端应用程序中工作,并使用 @aws-amplify/ui-react 设置登录组件: 就像文档中一样 https://docs.amplify.aws/lib/a...

回答 3 投票 0

© www.soinside.com 2019 - 2024. All rights reserved.