使用Next.js 13实验appDir功能，我已经能够将所有页面从页面目录移植到应用程序目录，并且一切在开发环境中运行良好，但问题是我一直在404 error生产中。
我决定通过next build本地运行来排除故障并注意到
app/page.js为 0 字节，这反过来会导致所有这些页面出现 404 错误。笔记：
在我的
next.config.js文件中，我配置了实验appDir标志，同时我还删除了该pages目录，因为所有页面现已移至该app目录。
这是我的文件next.config.js：
/** @type {import('next').NextConfig} */
const nextConfig = {
experimental: {
appDir: true,
},
...
};
module.exports = nextConfig;
我尝试查看官方文档以了解可能的配置和修复，但没有找到任何帮助。
我能做些什么？
谢谢。
编辑：
所以在进一步的试验中，
(dashboard)文件夹名称来做到这一点dashboard，然后将其添加'/dashboard'到我不想要的路线中。我需要应用程序目录中的路由组，以便在应用程序中共享布局，而无需更改路径名。例如，路由组目录例子：
app/(dashboard)/meeting/page.js仍然有一个路径"/meeting"而不是这个目录；app/dashboard/meeting/page.js现在有一条路线"/dashboard/meeting".vercel/next上的存储库上经历了类似的问题后，我发现这个特定问题中的错误发生是因为该选项是在项目的文件中设置的，但我在我的文件中没有设置该选项。此外，针对此问题的特定修复仍然指出了我所面临的路线组的特定错误。output: …Next JS 13 于上个月刚刚发布，完全改变了数据的获取方式，同时还通过使用根布局.js 提供了 _app.js 和 _document.js 的替代方案。以前在 Next JS 12 及更低版本中，要使用 Hydration 方法使用 React Query SSR 功能，您需要像这样设置 _app.js 文件：
import { Hydrate, QueryClient, QueryClientProvider } from '@tanstack/react-query';
import queryClientConfig from '../queryClientConfig';
export default function MyApp({ Component, pageProps }) {
const queryClient = useRef(new QueryClient(queryClientConfig));
const [mounted, setMounted] = useState(false);
const getLayout = Component.getLayout || ((page) => page);
useEffect(() => {
setMounted(true);
}, []);
if (!mounted) return null;
return (
<ErrorBoundary FallbackComponent={ErrorFallbackComponent}>
<QueryClientProvider client={queryClient.current}>
<Hydrate state={pageProps.dehydratedState}>
<AppProvider>
{getLayout(<Component {...pageProps} …javascript reactjs server-side-rendering next.js react-query
我react-query与 Next JS getServerSideProps 结合使用，在页面加载之前使用文档中指定的水合方法来获取数据，如下所示：
// Packages
import { dehydrate, QueryClient } from '@tanstack/react-query';
// Hooks
import { useGetGoogleAuthUrl, useGetMicrosoftAuthUrl } from '../hooks/auth';
import { getGoogleAuthUrl, getMicrosoftAuthUrl } from '../hooks/auth/api';
export async function getServerSideProps({ req, res }) {
const queryClient = new QueryClient();
const microsoftAuthQueryClient = new QueryClient(); // Not working
await queryClient.prefetchQuery(['getGoogleAuthUrl'], getGoogleAuthUrl);
await microsoftAuthQueryClient.prefetchQuery(['getMicrosoftAuthUrl'], getMicrosoftAuthUrl); // Not working
return {
props: {
dehydratedState: dehydrate(queryClient),
dehydratedMicrosoftAuthState: dehydrate(microsoftAuthQueryClient), // Not working
},
};
}
export default function Signin() …javascript reactjs server-side-rendering next.js react-query
我正在尝试使用 React Beautiful DND 库在待办事项应用程序中拖放列表，但我不断在控制台中收到这三个错误。
错误1：
Function components cannot be given refs. Attempts to access this ref will fail. Did you mean to use React.forwardRef()?
Check the render method of `Droppable`.
错误2：
Function components cannot be given refs. Attempts to access this ref will fail. Did you mean to use React.forwardRef()?
Check the render method of `Draggable`.
错误3：
Invariant failed: provided.innerRef has not been provided with a HTMLElement.
以下是我的代码片段。我还使用了样式组件：
import React from 'react';
import styled from 'styled-components';
import { DragDropContext, …我正在尝试使用 GSAP CSS 规则插件来定位伪选择器并对其进行动画处理。问题是它没有检测到它并记录GSAP target undefined not found到控制台。我尝试通过将元素记录到控制台来获取该元素，但它也是未定义的。
这是我的使用方法：
import { gsap } from "gsap"
import { CSSRulePlugin } from "gsap/CSSRulePlugin"
const IndexPage = () => {
useEffect(() => {
gsap.registerPlugin(CSSRulePlugin);
const titleRule = CSSRulePlugin.getRule(
"span.landing__title--span::after"
)
// Log titleRule
console.log(titleRule). // undefined
const tl = gsap.timeline();
tl.to(
titleRule,
{
cssRule: {
scaleY: 0,
duration: 1
},
}
)
},[])
return (
<div>
<span className="landing__title--span">Hey there</span>
</div>
)
}
export default IndexPage
我做错了什么以及如何纠正？提前致谢