こんにちは、エンジニアのオオバです。

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/にアクセスします。

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

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

ページ追加

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

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

export default function FirstPost() {  
    return First Post  
}

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

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

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

まとめ

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

分かりました。

次回

Link Component - Navigate Between Pages | Learn Next.js
ページ同士にリンクを貼るところから、
やっていきます。

オススメ記事
検証環境