【Next.js】URLにクエリパラメータを付ける方法。

関連:【Next.js】クエリパラメータの取得方法。

作りたいもの

こういうクエリパラメータを含むURLに飛べるリンクを作りたい。

https://example.com/posts?title=砂糖

⑴ Linkにクエリパラメータを指定する

import Link from "next/link";

...

<Link href={{ pathname: "/posts", query: {title: "砂糖"} }}>
    <a>タイトルに"砂糖"を含む投稿を見る</a>
</Link>

...

⑵「useRouter」を使う

import { useRouter } from 'next/router'

export default function Top() {
    const router = useRouter();
    
    // aタグがクリックされるとリダイレクト
    const handleClick = (keyword) => {
        router.push({
            pathname: "posts",
            query: { title: keyword },
        });
    };

    return(
        <div>
            <a onClick={() => handleClick('砂糖')}>タイトルに"砂糖"を含む投稿を見る</a>
            <a onClick={() => handleClick('塩')}>タイトルに"塩"を含む投稿を見る</a>
        </div>
    )
};

クエリパラメータを複数設定したい場合

Link」の場合も「router.push」の場合も、queryの中にパラメータを追加すると付与されます。

パラメータ一つの場合

query: {
    title: "砂糖"
} 

// https://example.com/posts?title=砂糖

パラメータ複数の場合

query: { 
    title: "砂糖",
    sort: "asc",
    ...,
},

// https://example.com/posts?title=砂糖&sort=asc

コメント

コメントを残す

*