渋谷ほととぎす通信

新しいこと・枯れたこと問わずオオバが興味を持ったものを調査し実践する効率を求める完全趣味の技術ブログ

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


f:id:esakun:20210220045552p:plain

前回に引き続き、今回も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/にアクセスします。

f:id:esakun:20210130040017g:plain

ソースコードを編集するとブラウザを更新すること無く、
見た目が更新されるようです。

ページ追加

f:id:esakun:20210130040408p:plain

pagesディレクトリにfirst-post.jsを追加します。

export default function FirstPost() {
    return <h1>First Post</h1>
}

first-post.jsに上のソースコードを追加します。 http://localhost:3000/posts/first-postにアクセスしてみます。

f:id:esakun:20210130040654p:plain

するとこのようにページが追加できました。

まとめ

ページはpagesディレクトリに格納することで、
ルーティングが可能ということですね。

分かりました。

次回

ページ同士にリンクを貼るところから、
やっていきます。

次回の記事はコチラ

環境

  • Node.js v14.7.0
  • npm 6.14.8
  • macOS Catalina 10.15.7