import {useRouter} from 'next/router'
function Tabs() {
return (
<div>
<Link href="/tabs/[tab]" as="/tabs/tab1">
<a>Tab 1</a>
</Link>
<Link href="/tabs/[tab]" as="/tabs/tab2">
<a>Tab 2</a>
</Link>
<Link href="/tabs/[tab]" as="/tabs/tab3">
<a>Tab 3</a>
</Link>
</div>
)
}
function Tab1() {
return <div>Content for Tab 1</div>
}
function Tab2() {
return <div>Content for Tab 2</div>
}
function Tab3() {
return <div>Content for Tab 3</div>
}
export default function TabsPage() {
const {query: {tab}} = useRouter();
const tabs = {tab1: Tab1, tab2: Tab2, tab3: Tab3};
const Component = tabs[tab];
return <Component/>
}
export const getStaticPaths = async () => {
return {
paths: [
{params: {tab: "tab1"}},
{params: {tab: "tab2"}},
{params: {tab: "tab3"}}
],
fallback: false
}
}