<aside> 💫 Reactの場合は、下層ページを作る際にはreact-router-domをインストールしつつ、コンポーネント内でも「このパスの時はこのコンポーネントを表示する」みたいに設定を逐一書かなければならなかった。

それがNext.jsだと設定不要！ファイル作成するだけでページ遷移可能！というのだから、めちゃ開発効率上がるよね！！

</aside>

ページの編集方法

Next.jsでは、pagesフォルダの中の各ファイルが、Reactでいうところのコンポーネントファイルで、それらがエクスポートされてページとなる。

各ファイルをReactのときと同じようにいじって、デザインを再現すべし。

ただし、「pages」なので、TopやContactなど各ページファイルを格納しよう。

（各ページの中で使うHeaderやFooterといったコンポーネントは、componentsフォルダに入れていくよ。詳しくは以下参照

コンポーネントの追加（収納場所）

）

ページの追加方法

<aside> 💫 Next.jsでは、ファイル名がそのままURLになるよ！ 例） pages/index.js → /ルートに pages/posts/first-post.js → /posts/first-post ルートに

</aside>

1. 「pages」フォルダ内に新たに作りたいページまたはフォルダを作成する。

   フォルダを作成した場合は、その中にページとなるファイルを新規作成する。

   

2. コンポーネントを書いていく　※export default を忘れずに！

   書き方例）

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

3. 開発サーバーが実行されていることを確認し、作成したファイルのディレクトリをURLに含めたものにアクセスする。無事にJSXが表示されたらページ追加完了🎉

   上記の場合のURL：http://localhost:3000/posts/first-post

ページ遷移の方法

<aside> 💫 <Link></Link>と<a></a> を使うよ！ import Link from ‘next/link’; もね！

ただし、外部リンクを載せる場合は、Linkコンポーネントは使わず、aタグのみを使用すること！！Linkコンポーネントが使えるのは、内部リンクのみ！

</aside>

▼基本の書き方

/**
* ・内部リンクにしたい文字列、画像だけを <Link href=""></Link> と <a></a> で囲む
* ・リンク前の文字列との間にスペースを入れたい場合は {' '} を書く
* ・hrefに記述するパスは {} なしでOK、拡張子も書かなくてOK
* 　ただしHTMLと同様ダブルクォーテーションで囲むこと。
* ・クラス名などの属性は <a>タグに記述する。 <Link> にはhref属性のみ
* ・外部リンクには <a></a>タグのみ記述する。<Link>コンポーネントは書かない。
* ・動的パス（dynamic routes）の場合は、href={`/該当フォルダ名/${id}`} でOK
*/

**import Link from 'next/link';**

export default function Home() {
  return (
    <>
      <h1 className="title">
			  **Read{' '}
			  <Link href="/posts/first-post">
			    <a className="hoge__link" target="_blank" rel="noopener noreferrer">this page!</a>
			  </Link>**
			</h1>
		</>
  );
}

/**
* 動的パスの場合
*/
import Link from 'next/link';

export default function Home() {
  return (
    <>
      <h1 className="title">
			  Read{' '}
			  **<Link href={`/posts/${id}`}>**
			    <a className="hoge__link" target="_blank" rel="noopener noreferrer">this page!</a>
			  </Link>
****			</h1>
		</>
  );
}

▼上記コードでのブラウザ表示