My goal is to develop a user profile page that displays content based on the current tab the user is viewing.
The tab is determined by what is provided in the URL (e.g. /username/tab1). The challenge I am facing is that one of the tabs the user can access may have an empty value (/username, to display the default tab).
However, when entering this into the browser, Next automatically assumes I intend to retrieve /[user]/index.js (which does not exist). In reality, I want to access /[user]/[tab].js and pass an empty value to the tab property in context.query.
Is there a way to achieve this without creating separate index.js and [tab].js files?
// Exported within /pages/[user]/[tab].js
export const getServerSideProps = async (context) => {
// Destructure query parameters for page and tab values.
const { page, tab } = context.query;
// When on /username/foo it should output "foo".
// When on /username it should output "".
console.log(tab);
};