こんにちは、エンジニアのオオバです。
Editing the Page - Create a Next.js App | Learn Next.js
公式サイトのチュートリアルを進めていきます。
→11万文字で徹底解説した「DOTweenの教科書」Unityアニメーションの超効率化ツールはこちら
ページ編集
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>
https://localhost:3000/にアクセスします。
ソースコードを編集するとブラウザを更新すること無く、
見た目が更新されるようです。
ページ追加
pagesディレクトリにfirst-post.jsを追加します。
export default function FirstPost() {
return First Post
}
first-post.jsに上のソースコードを追加します。
https://localhost:3000/posts/first-postにアクセスしてみます。
するとこのようにページが追加できました。
まとめ
ページはpagesディレクトリに格納することで、
ルーティングが可能ということですね。
分かりました。
次回
Link Component - Navigate Between Pages | Learn Next.js
ページ同士にリンクを貼るところから、
やっていきます。
この記事が気に入ったらフォローしよう
オススメ記事
検証環境
- Node.js v14.7.0
- npm 6.14.8
- macOS Catalina 10.15.7