ヌテラはなぜ旨いのか/TypeScriptの型エラー/Next.jsのLinkタグ

ヌテラはなぜ旨いのか

ヌテラってなんであんなに旨いんですかね？Youtubeによると、原材料のほとんどは砂糖とパーム油だそうです。

先日苫小牧のイオンに行った時に、ヌテラへの反抗心でカルディでお高いチョコスプレッドを買ったのですが、3倍くらいの値段するのにヌテラの足元にも及びませんでした。

なんでヌテラっていうやつは安い原料であんなにリッチな味がするんだろう？イタリア製らしいけど、考えた人は天才だな。

（考察風の見出しなのに何も考察していない）

TypeScriptの型エラー

というわけでTypeScriptのお時間だよ〜〜（一個の記事にポエムから技術ネタまでありとあらゆる責務を負わせるスタイル）

こんなReactコンポーネントを作りたかっただけなのに...（src/app/_components/page-title.tsx）

export default function PageTitle({ title }) {
  return (
    <h1 className="text-5xl md:text-7xl lg:text-8xl font-bold tracking-tighter leading-tight md:leading-none mb-12 text-center md:text-left">
      {title}
    </h1>
  );
}

バインド要素 ‘title’ には暗黙的に ‘any’ 型が含まれますっていうエラーが出る。

引数のtitleに型を指定してよっていうことらしい。

ChatGPTによると引数をインラインで指定する方法もあるらしいんだけど、

export default function PageTitle({ title }: { title: string }) {}

他のコンポーネントに倣ってPropsを定義してみた

type Props = {
  title: string;
};

export default function PageTitle({ title }: Props) {}

type Propsの部分、クラスで括らないでポーンとファイルに書かれてると他のファイルと競合しないかドキドキしちゃう///

でも、TypeScriptの仕様で、タイプ、変数、関数のスコープはモジュール（ファイル）内におさまるようになっているらしい。だから全ファイルでtype Props 宣言してても大丈夫。

普通のページのタイトルをコンポーネント化できて、めでたしめでたし。

Next.jsのLinkタグとaタグの違い

私が愛用している、最もフィジカルで最もプ（略）なNext.jsブログテンプレートのソースコード見てると、リンクを作るのにLinkっていうタグを使っている部分とaタグを使っている部分があるので、調べてみた。

結論から言うと、LinkはNext.jsのオリジナルのコンポーネントで、

• 内部リンクに使える
• Next.jsのPrefetch機能で事前にリンク先を取得できるので高速
• ページ遷移が発生しないので高速

ということらしい。外部リンクはLinkは使えないのでaタグを使う。（内部リンクにaタグを使うこともできるけど、ページ遷移が発生して遅くなる）

Next.jsすっごいねぇ？こういう謎技術たまらん