共通パーツの作り方と読み込み方

WEBアプリは違う場合も多いけれど、WEBサイトに関して言えば
ヘッダーやフッターは共通のものを使うほうが効率がいい。

ページ数が少ない場合は問題ないけれど、
数十ページとかあるものをすべて書き直しとか狂気の沙汰。

なので、Nextでも共通のものが使えるなら使ったほうがいいよね？
というわけで、使い方。

1，コンポーネント用のフォルダを作る

共通パーツを作るのであれば「componets」などのフォルダを作り、
そこにぶち込むのが一般的。
なので、ヘッダーとフッターの場合はこんな感じで作る。

src
-app
-componets
--Header.tsx
--Footer.tsx

sidebarとか起きたい場合は、同様にsidebar.tsxをcomponetsの中に作れば良い。

2，コンポーネントの書き方

コンポーネントの書き方はこんな感じ。

{/* サイト内のページ遷移に使用 */}
import Link from 'next/link';

export default function Header() {
  return (
      <header>
         <p>ここにヘッダーの内容</p>
      </header>
  );
}

基本的にはpage.tsxの書き方と一緒。
なので、TypeScriptの記述方法は最低限学ぶ必要あり。