参考にしたサイトなど

Next.13 のディレクトリ構造の特徴

Next.js 13 は、12以前とはかなり仕様が異なっている
具体的には、これまでは Pages Directory だったものが App Directory になった。単に Next.js で検索すると、古い仕様の記事がヒットしてしまうため要注意。

関連ワード	page.tsxの配置	Path	備考	公式
App Directory	app/tasks/page.tsx	/tasks	page.tsxというファイル名は固定。	-
~~※Pages Directory~~	~~pages/tasks.tsx~~	~~/tasks~~	~~Next.jsでも使用できるが、非推奨。~~	-
Route Group	app/tasks/[id]/(group1)/(group2)/page.tsx	tasks/6ge49mrk	`()` を使ったディレクトリを間に含めて作成した場合、そのディレクトリ名はパスに反映されない。基本的に、ディレクトリ名がそのままパスに反映されるため、大規模アプリケーションではグループ化しないとごちゃごちゃしてしまうので、その対応策	-
Dynamic Routes	app/tasks/[id]/page.tsx	tasks/6ge49mrk	・`[]` を使ったディレクトリを間に含めて作成した場合、その部分のパスは任意の文字列を指定することができる。・例えば`Link` のtoオプションに `tasks/${task.id}`を指定し、作成するコンポーネントで`router.query.id`などの形式で利用できる。	https://nextjs.org/docs/pages/building-your-application/routing/dynamic-routes

SSGは、静的なページ（変更の少ないページ）に対して適用
SSRは、静的なページ（変更が頻繁なページ）に対して適用
Next.js 12以前は、 SSGならばgetStaticProps + getStaticPaths、SSRならば、getServerSidePropsで取得していたが、13以降は、単にfetchメソッドにオプションを追加するだけで、SSG・SSRを区分できるようになった。

区分	コード例	解説
SSG	`fetch('http:sample.com/tasks', { cache: "force-cache", next: {revalidate: 60 } })`	・force-cache（=必ずcacheを利用する）から連想する通り、最初にレンダリングしてしまい、以降はcache値を参照する。・force-cacheは省略可能・revalidateは、再度リクエストするまでの秒数。
SSR	`fetch('http:sample.com/tasks', { cache: "no-store" })`	・no-store（=保存しない）から連想する通り、保存しない代わりに、都度レンダリングする。

入力	内容
rafce	ファイル名と一致するComponentのひな型を作成してくれる
tab	インポートされていないComponentにカーソルを合わせて押すと、自動でimportしてくれる

$ npm i --save-dev @types/uuid