NextJS在服务器上返回错误页面，但在客户端上返回登录页面(_E)

Question

我遇到了一个奇怪的问题，老实说，我甚至不知道从哪里开始寻找。

我有一个NextJS应用程序，它在pages/api部分内置了GraphQL端点。它仍然很基本，我主要只是建立了登录/注册功能。

我注意到一个问题，我的currentUser查询是在不应该运行它的页面上运行的(比如/login和/register(。我发现，在我的Page组件包装器上，_error路由由于某种原因被触发，尽管它没有显示客户端。这个组件只是将main封装在_app.tsx.中

这是页面组件包装：

/* eslint-disable @typescript-eslint/no-explicit-any */
// third-party
import React, { ReactChild, ReactChildren } from 'react';
import { useRouter } from 'next/router';
import { AnimateSharedLayout } from 'framer-motion';
// custom components
import CustomDrawer from 'components/common/Drawer';
import Navbar from 'components/common/Navbar';
// styles
import CommonPageStyles from './CommonPageStyles';
interface AuxProps {
children: ReactChild | ReactChildren;
}
const Page: React.FC = ({ children }: AuxProps) => {
const router = useRouter();
console.log(router.route);
const isLoggedOut =
router.route === '/_error' || // temporary fix
router.route === '/login' ||
router.route === '/register' ||
router.route === '/terms-and-conditions';
const isOnboarding = router.route === '/onboarding';
const renderPage = () => {
console.log({ isLoggedOut });
console.log({ isOnboarding });
if (isLoggedOut && !isOnboarding) {
return (
<div style={{ padding: '0', height: '100%', width: '100%' }}>
{children}
</div>
);
} else if (!isLoggedOut && isOnboarding) {
return (
<div style={{ padding: '64px 0 0 0', height: '100%', width: '100%' }}>
<Navbar simple />
{children}
</div>
);
} else {
return (
<div className="page-container">
<Navbar />
<CustomDrawer />
<div className="inner-wrap">{children}</div>
</div>
);
}
};
return (
<AnimateSharedLayout>
<CommonPageStyles>{renderPage()}</CommonPageStyles>
</AnimateSharedLayout>
);
};
export default Page;

我在这个组件中放置了三个控制台日志：一个用于router.route，另一个用于我的自定义变量isLoggedIn和isOnboarding。当我刷新/login页面时，以下是我在服务器上看到的内容：

/login
{ isLoggedOut: true }
{ isOnboarding: false }
/_error
{ isLoggedOut: true }
{ isOnboarding: false }

但是客户端正在正常地呈现登录页面。

因此，我构建了一个粗糙的自定义错误页面来尝试调试以下内容：

function Error({ statusCode }) {
return (
<p>
{statusCode
? `An error ${statusCode} occurred on server`
: 'An error occurred on client'}
</p>
);
}
Error.getInitialProps = ({ res, err }) => {
const statusCode = res ? res.statusCode : err ? err.statusCode : 404;
console.log({ statusCode });
return { statusCode };
};
export default Error;

现在我在服务器上看到这个：

{ isLoggedOut: true }
{ isOnboarding: false }
event - build page: /_error
wait  - compiling...
event - compiled successfully
{ statusCode: 404 }
/_error
{ isLoggedOut: true }
{ isOnboarding: false }

正如你所看到的，返回的错误状态代码是404，但我不知道为什么！有人对为什么会发生这种情况有什么建议吗？

Answer 1

想明白了！

我忘记了在最初构建这个项目时安装了next-pwa包。这会生成一个manifest.json，它在的_document.tsx中被引用。该文件没有被构建，导致404。我只是简单地删除了这个包和对它的任何引用，这似乎已经解决了这个问题！