[Nextjs] Router

PathVariable

pages/index.js

<Link href={'/user/1'}>user 1</Link>
<Link href={'/user/2'}>user 2</Link>

pages/user/[id].js

import {useRouter} from "next/router";

const UserPage = () => {
    const router = useRouter();
    const {id} = router.query;

    return (
        <div>
            <h1>User: {id}</h1>
        </div>
    );
};

export default UserPage;

QueryString

pages/index.js

<Link href={'/user?name=tyler'}>user tyler</Link>

pages/user.js

import {useRouter} from "next/router";

const UserPage = () => {
    const router = useRouter();
    const {query} = router;

    return (
        <div>
            <h1>{query.name}</h1>
        </div>
    );
};

export default UserPage;