• ..

NextJS

    Link (next/link) の as 属性は何なのか

    NextJS のドキュメントを見ると以下のように使われている例が載っています。このasが何に使われているのかです。

    <Link href="/post?slug=something" as="/post/something">

    href

    hrefに設定する値は NextJS が見る URL です。
    NextJS では /pages 以下にページファイルを作っていきます。例えば /foo という URL にページを作りたいなら/pages/foo.jsxというファイルを作り、Linkhref属性には/fooを設定すればいいです。

    as

    asはブラウザが見る URL です。 例えば、nantoka.com/hoge/以下で NextJS で作ったサイトを公開したい場合、<Link href="/foo" />ではnantoka.com/foo/にページ遷移してしまい、リロードすると NextJS 外の URL なので正常にサイトを表示できなくなってしまいます。
    そのような場合にas属性に/hoge/fooと指定してあげることで、ブラウザの URL は nantoka.com/hoge/fooとしながら、表示するページは/foo(/pages/foo)とすることができます。