I am facing an issue with my Next.js project. I have a file named [pid].js and I also want to add a custom 404 page. However, when I place the 404.js file inside the /pages directory, it causes a problem. If I remove the [pid].js file, the 404 page works fine. But, if I keep the [pid].js file, the first request goes into pids and since the URL does not match any of the pages defined in pids, I encounter an error. Should I explicitly return my 404 component from pids? Is this considered good practice?
The current code snippet (which does not redirect to the 404 page):
[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;