参考にしたサイトなど
Next.13 のディレクトリ構造の特徴
- Next.js 13 は、12以前とはかなり仕様が異なっている
- 具体的には、これまでは
Pages DirectoryだったものがApp Directoryになった。単にNext.jsで検索すると、古い仕様の記事がヒットしてしまうため要注意。
| 関連ワード | page.tsxの配置 | Path | 備考 | 公式 |
|---|---|---|---|---|
| App Directory | app/tasks/page.tsx | /tasks | page.tsxというファイル名は固定。 | - |
| - | ||||
| 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 |
Next.jsのFetchとSSG・SSR
- 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（=保存しない）から連想する通り、保存しない代わりに、都度レンダリングする。 |
VSCodeのスニペット
| 入力 | 内容 |
|---|---|
| rafce | ファイル名と一致するComponentのひな型を作成してくれる |
| tab | インポートされていないComponentにカーソルを合わせて押すと、自動でimportしてくれる |
周辺知識
型安全（TypeScript対応）なライブラリ
$ npm i --save-dev @types/uuid
Jamstack
- JavaScript API Markup の略
- 通常は Client→WebServer→AppServer→DB or CMS→AppServer→WebServer→Client
- Jamstackは Client⇄CDN, MicroServices