首页 > 解决方案 > 如何使用 nextJs 显示自定义 410 页面

问题描述

我正在尝试在我的 nextjs 应用程序上处理 410 代码。我已经设置了一个 404 页面,因为它很容易由 nextjs 管理。但我不知道如何显示自定义 410 页面。我试图浏览_error页面并检查,httpStatusCode但它似乎只是为了处理5xx错误。

有没有办法显示自定义 410 页面?而且,我应该尝试显示 410 页面还是只让浏览器显示错误(我不确定这里的最佳做法是什么)?我刚刚在我的网站上进行了“大”迁移,并且有几个 410(不取决于我)。

如果需要,我可以提供更多信息谢谢

标签: node.jsnext.jsseohttp-status-code-410

解决方案


你可以做这样的事情。检查一个不存在的页面是否应该用 404 或 410 响应的逻辑可以根据您的需要进行修改。

// _error.js

import Error from 'next/error';

const CustomError = ({ statusCode }) => (
  <Error
    statusCode={statusCode}
    title={
      statusCode === 410
        ? 'The requested resource is no longer available'
        : undefined
    }
  />
);

const gonePages = ['gone', 'moved', 'foo/bar'];

const compareURLs = (n, h) => {
  const nParts = n.split('/').filter(Boolean);
  const hParts = h.split('/').filter(Boolean);
  return (
    nParts.length <= hParts.length &&
    nParts.every((part, i) => part === hParts[i])
  );
};

const getServerSideProps = async ({ req, res }) => ({
  props: {
    statusCode:
      res.statusCode === 404 &&
      gonePages.some((slug) => compareURLs(slug, req.url))
        ? 410
        : res.statusCode,
  },
});

export default CustomError;
export { getServerSideProps };

检查沙箱:codesandbox.io/s/zealous-driscoll-ru62j


推荐阅读