前回に引き続き、今回も15分の制限時間ででやっていきます。
公式サイトのチュートリアルを進めていきます。
ページ編集
pages/index.js
を編集していきます。
【編集前】
<h1 className="title"> Welcome to <a href="https://nextjs.org">Next.js!</a> </h1>
【編集後】
<h1 className="title"> Learn to <a href="https://nextjs.org">Next.js!</a> </h1>
http://localhost:3000/
にアクセスします。
ソースコードを編集するとブラウザを更新すること無く、
見た目が更新されるようです。
ページ追加
pages
ディレクトリにfirst-post.js
を追加します。
export default function FirstPost() { return <h1>First Post</h1> }
first-post.jsに上のソースコードを追加します。
http://localhost:3000/posts/first-post
にアクセスしてみます。
するとこのようにページが追加できました。
まとめ
ページはpagesディレクトリに格納することで、
ルーティングが可能ということですね。
分かりました。
次回
ページ同士にリンクを貼るところから、
やっていきます。
環境
- Node.js v14.7.0
- npm 6.14.8
- macOS Catalina 10.15.7