当用户通过导航更改页面时，我试图获取 useEffect 来执行一些代码。
我的问题是 useEffect 不会在路线更改时执行（不会显示在控制台中）。它只在第一次初始页面加载时显示，之后就不再显示
我使用了谷歌分析nextJS 中的
这是我简单的 _app.tsx
import type { AppProps } from "next/app";
import "./styles/css.scss";
import { useRouter } from "next/dist/client/router";
import { useEffect} from "react";
const Child: React.FC = ({ children }) => {
return (
<>
<div>{children}</div>
</>
);
};
const App = ({ Component, pageProps }: AppProps) => {
const router = useRouter();
useEffect(() => {
console.log("called");
}, [router.events]);
return (
<>
<Child>
<Component {...pageProps} />
</Child>
</>
);
};
export …有没有办法选择要部署的自定义分支？我似乎无法选择分支，它采用默认的主分支
提前致谢
当像这样传递我的颜色作为道具时<List text="something" color="#84AB86" /> and using in the code className={'bg-[${color}] '} it does not render properly.
当查看 chrome 开发工具时，颜色已正确添加，如下所示bg-[#84AB86]
当手动放置颜色而不从道具中取出颜色时，它确实可以正常工作
经过更多测试后，似乎也不可能这样做
const color = "#84CC79"
className={`bg-[${color}]`}
知道为什么吗
有没有办法对高度属性进行动画处理，这是我的简单代码，但高度没有动画处理，它只是立即更改
<div>
<a className="group flex items-center w-full pr-4 pb-2 text-gray-600 transition-transform transform rounded-md hover:translate-x-1 focus:outline-none focus:ring collapsed" onClick={() => { setSecond(!secondElement) }}>
<span className="ml-1 text-white text-xl group"> TITLE </span>
</a>
</div>
<div className={`transition-all duration-300 ease-in-out transform ${!secondElement ? 'h-0' : 'h-auto'} bg-blue mt-2 space-y-2 px-7`}>
<a
role="menuitem"
className="block p-2 text-sm text-white transition-colors duration-200 rounded-md dark:text-light dark:hover:text-light hover:text-gray-700">1</a>
<a
role="menuitem"
className="block p-2 text-sm text-white transition-colors duration-200 rounded-md dark:hover:text-light hover:text-gray-700">2</a>
</div>
</div>
我对 NextJS 的 getServerSideProps 有点困惑。
在文档中您可以找到此解释。
例如，假设您的页面需要预渲染经常更新的数据（从外部 API 获取）。您可以编写 getServerSideProps 来获取此数据并将其传递给 Page
让我困惑的是，如果你可以简单地在 React 组件本身中每隔 x 秒获取一次数据（在通过 getStaticProps 获取缩写数据之后），为什么要使用 getServerSideProps 呢？
使用 getServerSideProps 比仅使用 React 方式有优势吗？
例如这样：
useEffect(() => {
const interval=setInterval(()=>{
const fetchdata = async () => {
const res = await fetch("url")
const data = await res.json()
setsongs(data)
}
fetchdata()
},15000)
return()=>clearInterval(interval)
}, [])
我开始学习 prisma 来替换我的 nextJS 应用程序中的 nodejs 后端。
似乎 prisma 不适用于在我的 mysql 数据库中创建的视图和存储过程。
如果我不能只使用视图和存储过程，那么切换到 prisma 是否还有意义，这允许我在数据库中创建一个只能访问这两个而不能访问其他内容的用户。
任何 prisma 专业人士都可以证实或否认我的想法
谢谢
使用此代码不断给我错误ReferenceError: Audio is not defined。我得到这个是因为 nextjs 是 ssr 但应该有一种方法让它以任何方式工作
const musicPlayers = useRef<HTMLAudioElement>(
new Audio("")
);
我在网上发现我可以使用这个东西
const musicPlayers = useRef<false |HTMLAudioElement>(
typeof Audio !== "undefined" && new Audio("")
);
但然后我需要使用 false as possible 选项，这给了我播放暂停代码的错误
Property 'paused' does not exist on type 'false | HTMLAudioElement'
Property 'play' does not exist on type 'false | HTMLAudioElement'.
if (musicPlayers.current?.paused) {
musicPlayers.current.play();
} else {
musicPlayers.current?.pause();
}
当我尝试在 Vercel 上构建我的应用程序时，我不断收到此错误，但它在本地运行没有问题。
这是错误消息
Cannot find module Type error: Cannot find module './sidenav/SideNav' or its corresponding type declarations.
在这一行
import SideNav from "./sidenav/SideNav"
当导入时，这在同一组件中工作得很好
import NavigationBar from "./navigationBar/NavigationBar"
我的 SideNav 没什么特别的
const SideNav = () => {
return (
<>
<div></div>
</>
);
};
export default SideNav;
知道问题出在哪里吗？
当进行生产构建时，我不断收到此错误。在升级到 12.0.0 版本之前我从未遇到过这个问题。我尝试删除该文件，但它仅在开发服务器未运行时有效，而在它运行时我无法打开或删除它，这会使每个生产构建失败。
info - Creating an optimized production build .events.js:291
throw er; // Unhandled 'error' event
^
Error: EPERM: operation not permitted, open 'D:\etc\ss\ss\ss\.next\trace'
Emitted 'error' event on WriteStream instance at:
at D:\etc\ss\ss\ss\node_modules\next\dist\compiled\@vercel\nft\index.js:1:287421
at D:\etc\ss\ss\ss\node_modules\next\dist\compiled\@vercel\nft\index.js:1:287860
at FSReqCallback.oncomplete (fs.js:164:23) {
errno: -4048,
code: 'EPERM',
syscall: 'open',
path: 'D:\\etc\\ss\\ss\\ss\\.next\\trace'
}
我有一个工作useEffect在更改页面时调用我的谷歌分析。这在更改页面时工作正常，但当您最初第一次加载或刷新时，它不会调用router.events.on
这是我的代码
useEffect(() => {
if (cookies === true) {
router.events.on("routeChangeComplete", () => {
ReactGA.pageview(window.location.pathname);
});
return () => {
router.events.off("routeChangeComplete", () => {
ReactGA.pageview(window.location.pathname);
});
};
}
}, [router.events]);
我想过使用另一个useEffect来最初调用reactGA，但是当更改页面时它会被调用两次，这不好。
关于如何在初始页面加载时使其工作的任何想法？
我试图在 md 断点内的 height 属性上添加一些动画，但 tailwind 不会使用我的类
<div className={`h-12 bg-blue flex w-full text-white fixed mt-1 md:bg-white ${scrolling ? 'md:animationNav md:h-16' : 'md:animationBasisNav md:h-20'} lg:bg-gray-500 `}>
<p>test</p>
</div>
我的无礼
.animationNav{
-webkit-transition: height 1s ease-in-out;
transition: height 1s ease-in-out;
img{
-webkit-transition: padding 1s ease-in-out;
transition: padding 1s ease-in-out;
padding: 0;
}
}
.animationBasisNav{
-webkit-transition: height 1s ease-in-out;
transition: height 1s ease-in-out;
img{
-webkit-transition: padding 1s ease-in-out;
transition: padding 1s ease-in-out;
padding: 0.25rem
}
}
我尝试将其添加到这样的 tailwindcss 实用程序中，但仍然无法工作
@layer utilities {
.animationNav{
-webkit-transition: …