【Next.js】ページの編集と追加する方法

前回に引き続き、今回も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