动态路由防止在 Next.js 中重定向到 404 页面

Question

我的 Next.js 项目中有一个 [pid].js 文件。我还想实现一个自定义 404 页面，但问题是：我将 404.js 文件放在 /pages 目录中。如果我删除我的[pid].js 文件，404 页面就可以正常工作。但是，如果我保留我的 [pid].js 文件，第一个请求会进入 pids，并且由于 url 与 pids 中定义的任何页面都不匹配，我会收到错误消息。我应该从 pid 显式返回我的 404 组件吗？这是一个好习惯吗？

这里是代码（现在不会重定向到 404 页面）：

[pid].js

const Pid = ({ url, props }) => {
    const getPages = () => {
        let component = null;
        switch (url) {
            case 'checkout':
                component = <CheckoutPage {...props} />;
                break;
            //other switch cases...
            default:
                //should I return my 404 component here?
                component = <DefaultPage {...props} />;
        }
        return component;
    };

    return getPages();
};

export async function getServerSideProps(context) {
    const res = await getReq(`/getUrl`, 'content', context);

    switch (res.url) {
        case 'checkout': {
            return {
                props: {
                    url: res.url,
                    props: {
                    ... //my other props
                    },
                },
            };
        }
        default:
            return {
                props: null,
            };
    }
}

Pid.propTypes = {
    url: PropTypes.string.isRequired,
};

export default Pid;

Answer 1

从 NextJS 10 开始，您不必显式返回 404 页面，这要归功于新标志 notFound: true。 您可以在 getStaticProps 和 getServerSideProps 使用它来自动触发默认 404 页面或您自己的自定义 404 页面。

从 NextJS Docs 查看这些示例。

export async function getStaticProps(context) {
  const res = await fetch(`https://.../data`)
  const data = await res.json()

  if (!data) {
    return {
      notFound: true,
    }
  }

  return {
    props: { data }, // will be passed to the page component as props
  }
}

export async function getServerSideProps(context) {
  const res = await fetch(`https://...`)
  const data = await res.json()

  if (!data) {
    return {
      notFound: true,
    }
  }

  return {
    props: {}, // will be passed to the page component as props
  }
}

文档参考

1. notfound Support on Nextjs10

2. notfound on getStaticProps

3. notfound on getserversideprops

4. Custom 404 Page

Answer 2

从 Next.js 10 开始，您可以从 getServerSideProps 返回 notFound: true 以触发 404 页面。

export async function getServerSideProps(context) {
    const res = await getReq(`/getUrl`, 'content', context);
    switch (res.url) {
        case 'checkout': {
            return {
                props: {
                    //my other props
                },
            };
        }
        default:
            return {
                notFound: true
            };
    }
}

我已将它放在default 案例中作为示例，但您可以在任何其他时间点/条件下随时将其退回。