ページ遷移はどうするの？

ページ遷移ってどうするの？

あれ？ルーターがなくない？

今までReactを書いていてそろそろサーバーサイドレンダリングに手を出した私、よしポートフォリオサイトを作ってやろ！と考えたわけですよ！ここである問題が発生！あれ、Reactのときはページ切り替えはrouterを使ってたけど...NextってRouterないやんけどうするんや〜！
いや安心してくださいませ〜
別にないわけではないです。
NextではRouterを使わなくてもページ繊維なんてちょちょいのちょいで行えるのです！
（あ！ReactでRouterを使うときは npm install routerでルーターが使えるようにしてimportしてからでないと 使えませんので〜）npmとかのコマンドはまたどこかで説明するとして、話が逸れてしまったので本題に行ってみましょう！

じゃあ実際にどうすればいいの？

話は意外と簡単です！
Nextのアプリケーションは基本的にpageディレクトリ内に様々なファイルを記述しますが、そこにある.jsファイル、つまりページコンポーネントに import Link form 'next/link'と記述しましょう。これでNextで作成した各ページのjsファイルを遷移できるようになりました。あとはリンクを配置します。ページコンポーネントに以下のように記述します。

~.js

export default () => (
  <Layout header ="Top page" title ="Top page.">
    <p>Welcome to Next.js</p>
    <Link href ="./other">
      <button>Go to Other &gt;&gt;</button>
    </Link>
  </Layout>
);

とりあえず現在のページタイトルとかはtoppageとかにしといて遷移先のページのjsファイルの名前をother.jsとすると<Link href = "./other"> </Link>と言うように記述することでハイパーリンクが完成し、画面に表示されるようになります。つまり...

<Link href = " 遷移先のjsファイルの名前（.jsはいらない） ">
ここにボタンやテキストを入力する　（ex）<p>,<h3>,<button>,もしくは生テキスト....
</Link>

以上！これでNextにおける画面遷移はご理解いただけたでしょうか？
あ！忘れていました！今回のトップページはindex.jsとしていますが、もし遷移先にother.jsから戻るための画面遷移がしたいと思えばohter.jsの方でが上記のようなもの書きます。しかし、この時に遷移先がトップページであれば、href = "./index"と記述せずhref = "/"で行うことができます！覚えておきましょう！