[Next.js] 페이지의 일부분만 라우팅하기

routing.js

import { useRouter } from 'next/router'
import Link from 'next/link'

export default function TabsPage() {
    const router = useRouter()
    const tab = router.query.tab || 0

    return <div>
        <ul>
            <li><Link shallow href={{ pathname: '/tabs', query: { tab: 0 } }}>Tab 0</Link></li>
            <li><Link shallow href={{ pathname: '/tabs', query: { tab: 1 } }}>Tab 1</Link></li>
            <li><Link shallow href={{ pathname: '/tabs', query: { tab: 2 } }}>Tab 2</Link></li>
        </ul>

        <p>Selected tab: {tab}</p>
    </div>
}