Posted at

Next.js(React)のチュートリアルのメモ

next.jsのチュートリアルをやっている。書き途中。


基礎


ページ間の移動



  • next.jsでは、[プロジェクト名]/pages直下にhoge.jsなど各ページのjsファイルを作成することでページの追加ができる。


    • nextにおいて特別なディレクトリは、このpagesstaticディレクトリ

    • その他のディレクトリは自由に設定できる




  • ページ間の移動は、Linkコンポーネントを使う


    • 通常のアンカータグのみでのリンク移動ではだめ。

    • 目的のページは表示されるが、再読み込みされてしまうから。→SPAの意味がない




js(index.js)

~

<div>
<a href="/about">About Page</a>
</div>
~

↑こうではなく、こう↓

import "Link" from 'next/Link';

~
<div>
<Link href="/about">
<a>About Page</a>
</Link>
</div>
~

Linkコンポーネントのにhref属性として遷移先のパスを指定する。


共有コンポーネントの使用