如果配置是 trailingSlash: true
,则表示在Next.js + GitHub页面中启用了尾斜杠模式。在这种配置下,可以通过以下步骤为项目创建自定义404页面:
404.js
的文件,用于定义自定义404页面的内容。404.js
文件中,可以使用React组件的方式编写404页面的内容,例如:import React from 'react';
const Custom404 = () => {
return (
<div>
<h1>404 - Page Not Found</h1>
<p>The page you are looking for does not exist.</p>
</div>
);
};
export default Custom404;
_error.js
文件来处理错误页面。在项目的根目录下创建一个名为_error.js
的文件,并将以下代码添加到文件中:import React from 'react';
import { useRouter } from 'next/router';
import Custom404 from './404';
const ErrorPage = () => {
const router = useRouter();
// 如果页面不存在,返回自定义404页面
if (router.asPath === '/404') {
return <Custom404 />;
}
return (
<div>
<h1>500 - Server-side error occurred</h1>
<p>An error occurred while rendering the page.</p>
</div>
);
};
export default ErrorPage;
404.js
文件导出为404.html
文件,以便GitHub Pages能够正确识别并显示自定义404页面。可以通过以下命令将404.js
文件导出为404.html
文件:next build && next export && mv out/404/index.html out/404.html
404.html
文件添加到GitHub项目的根目录下。现在,当访问Next.js + GitHub页面中不存在的路由时,将显示自定义的404页面。请注意,以上步骤是基于Next.js框架和GitHub Pages的配置,具体的实现方式可能因项目配置和需求而有所不同。
推荐的腾讯云相关产品:腾讯云云服务器(CVM)、腾讯云对象存储(COS)。
没有搜到相关的沙龙
领取专属 10元无门槛券
手把手带您无忧上云