はじめに
今回から”Navigate Between Pages”というレッスンをやっていきたいと思います。
また前回のプロジェクトの続きからやるので、まだやっていないかたはそちらを参照してみてください。
リンクの作り方
pagesフォルダの中にあるindex.jsの中身を書き換えていきたいと思います。
// This is the Link API
import Link from 'next/link'
const Index = () => (
<div>
<Link href="/about">
<a>About Page</a>
</Link>
<p>Hello Next.js</p>
</div>
)
export default Indexこれで/aboutへのリンクを作成することができました。
ただ/aboutページはまだ作成していないので、クリックしてもエラーになってしまいます。
スタイルを変更する
cssを適応させるためにはstyle属性を付け加えます。
以下のようなコードに書き換えてください。
<Link href="/about">
<a style={{ fontSize: 20 }}>About Page</a>
</Link>すると、文字の表示のされかたが変化していると思います。
また、以下のコードでなにか変化があるか確認してみてください。
<Link href="/about" style={{ fontSize: 20 }}>
<a>About Page</a>
</Link>
ボタンを追加する
次はボタンで移動するようにしてみたいと思います。
以下のコードを打ち込んでみてください。
<Link href="/about"> <button>Go to About Page</button> </Link>
これでローカルホストを見ると、
無事ボタンになっていると思います！
さいごに
これで”Navigate Between Pages”は終了です！
なるべく時間を空けずにどんどん進みましょう！
