Next.js <Link>でpropsを[id].tsxに渡したい React.js

Question

const [movies, setMovies] = useState([])
<Link href="/movies/[id]" as={`/movies/${movie.imdbID}`}>
    <a>{movie.Title}</a>
</Link>

このような形で、

page/movies/[id].tsx

にmovieを渡したいのですが、通常のコンポーネントですと

<Component movie={movie}/>

という形で渡せると思うのですが、Linkの場合こうはいかず、どのように渡せば良いかわかりません。

[id].tsxで

<p>{ movie.title }</p>

のような形でreturn内で使い、タイトルを表示させたいです。

よろしくお願いいたします。

Comments

[maisumakun]

「[id].tsx」とありますが、1.tsx、2.tsxといった感じでコンポーネントをいくつか作ってあるような状況でしょうか？＞

[sarukawa]

ありがとうございます。
作成しているのは[id].tsxのみで、動画タイトルでをinputから検索すると、一覧で表示し、タイトルをクリックすると、/movies/${movie.id}に個別ページ遷移させたいです。
遷移先で、タイトルなどを表示させるため、movieをpropsで渡したいです。

Answer 1

next/linkにCustom Propsを渡すことは不可能です。
以下のようにQuery stringで受け渡しをしてください。

<Link 
    href={{
        pathname: "/movies/[id]",
        query: {
            movie: 'hoge',
        }
    }}
    as={`/movies/${movie.imdbID}`}
>
    <a>{movie.Title}</a>
</Link>

Comments

[sarukawa]

ありがとうございます。queryで渡すことができました