[自分用]Next.jsのコンポーネントとpropsについての豆知識 #JavaScript

コンポーネント作成

コンポーネントを作成するときは、まず「components(名前は任意)」ディレクトリを作成する。
ちなみにコンポーネントファイルはjsx拡張子で作成すると、これコンポーネントか！とすぐわかる。

コンポーネントを作成したら
関数名、エクスポート方法(default等)をチェック。

ちなみにjsxで記述するときは親タグが一つだけでないとエラーが出てしまうが、一番親タグに指定するのは
<></>ではなく<div></div>を推奨する。
理由は、<></>でインポートすると親タグが何個もインポートされてしまうので、スタイリングに影響が出てしまうことがある。しかし<div></div>なら親タグは一つしかないため、それを加味したスタイリングをすることができる。

psopsを使いたいとき

propsを使いたいときは、「コンポーネント化したいけど、少し受け取る文が違うんだよな〜」というときに使える。
従来のJavaScriptの引数のようなもの。

（propsの詳細は別投稿に記載しています。）

export default function Headline({title}) {
  return (
      <p>{title}.js</p>
  )
}

上記のように分割代入を使用する場合は、Headline({title})の　{}を忘れないように気をつける。

propsの継承

※また、propsをpropsとして渡すことができる。
↓
①index.jsのmainコンポーネントに、それぞれ適したpropsを渡す。
②mainコンポーネントのheadlineコンポーネントにpropsをそのまま渡す。
③mainコンポーネントに指定したpropsをheadlineでも使うことができる。

といった感じです。