<p>※本記事は過去に私がQiitaに執筆した記事の移行版になります。<br><a href="https://qiita.com/koh97222/items/c46d1ef2a63b92bb6c15" target="_blank" rel="noopener noreferrer">https://qiita.com/koh97222/items/c46d1ef2a63b92bb6c15</a><br></p><h2 id="hc69c85bcf9">背景</h2><p>Dockerのnodeコンテナ内で、create-react-appでReactプロジェクトを作成し、その後にmaterial-uiをインストールしようとしたときに、発生したエラーでした。<br>※調べてみた感じ、npm installで、インストール元のパッケージのバージョンが最新(latest)で、インストールするパッケージの最新バージョンが同等(peer)でなかったときに発生するエラーのようでした。</p><h2 id="hcb9dacb773">結論</h2><p>そのライブラリを<strong>インストールしたい</strong>場合は、npm installのあとに、<strong>--save --legacy-peer-deps</strong>を追加してあげましょう。<br>もしくは、インストール元のプロジェクトの<strong>ダウングレード</strong>を検討しましょう。。</p><h2 id="hd2c91c24e4">経緯</h2><pre><code># material-uiをインストールしようとしたら。。
npm install @material-ui/core
# このようなエラーが発生。。
npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! While resolving: my-app@0.1.0
npm ERR! Found: react@17.0.1
npm ERR! node_modules/react
npm ERR!   react@"^17.0.1" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer react@"^16.8.0" from @material-ui/core@4.11.0
npm ERR! node_modules/@material-ui/core
npm ERR!   @material-ui/core@"*" from the root project
npm ERR!
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force, or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
npm ERR!
npm ERR! See /root/.npm/eresolve-report.txt for a full report.</code></pre><p>上のログを確認すると、reactのバージョンが17.0.1であるのに対し、material-ui/<a style="color:#4aac00" href="mailto:core@4.11.0">core@4.11.0</a>がサポートしているreactのバージョンは16.8.0でした。（＝最新のReactプロジェクトに対応していない。）<br>なので、依存関係を解決できずエラーになって、インストールができないことに。。<br>ここで、npm install のあとに、オプションで、<strong>--save --legacy-peer-deps</strong>を追加しました。<br>すると、インストールが無事に完了します。<br><br>npm installする際に、インストールするライブラリのバージョンが、インストール先のプロジェクトのバージョンに対応していない場合、オプションで、<strong>--legacy-peer-deps</strong>を使うことで、半強制的に？installできるようになるようです。<br>ただ、インストール後に、そのパッケージが期待通りに正しく動くかを、しっかり確認する必要がありそうです。</p><pre><code>npm install --save --legacy-peer-deps @material-ui/core

added 29 packages, removed 2 packages, and audited 1720 packages in 18s

117 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities</code></pre><h2 id="h5fcec0cf90">所感</h2><p>ライブラリを使うときは、そのライブラリの最新版が、どのバージョンと対応しているのか、実装する前にしっかり調べておくべきなんだなー、、と改めて感じました。<br>安直に最新版！はアブナイ。。<br>参考になった記事：<br><a style="color:#4aac00" href="https://github.com/mui-org/material-ui/issues/23306" target="_blank" rel="noopener noreferrer">https://github.com/mui-org/material-ui/issues/23306</a></p>

ERESOLVE unable to resolve dependency treeの解決方法

<p>弊ブログにFont Awesomeを導入した際のメモと注意点。</p><h2 id="h038d6117c5">導入</h2><p>下記ライブラリをインストール。</p><pre><code>npm i --save @fortawesome/react-fontawesome
npm i --save @fortawesome/fontawesome-svg-core
npm i --save @fortawesome/free-brands-svg-icons
npm i --save @fortawesome/free-solid-svg-icons</code></pre><h2 id="ha0e95c0643">使用方法</h2><pre><code>// 下記ライブラリをインポートする。
import "@fortawesome/fontawesome-svg-core/styles.css";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faGithub } from "@fortawesome/free-brands-svg-icons";

const Hoge = () =&gt; {
	  return (
	      &lt;a href="https://github.com/w8f/blog_app"&gt;
        {/*
            iconに表示したいアイコンのモジュールを指定する。
            size等の指定も可能（詳細はFontAwesomeIconPropsを確認）
         */}
  	        &lt;FontAwesomeIcon icon={faGithub} size="2x" /&gt;
  	      &lt;/a&gt;
  	    &lt;/div&gt;
  	  );
  	};</code></pre><h2 id="h86c1eb6dfa">注意点</h2><p>Next.jsのSSGを利用している場合、Font Awesomeのアイコンが表示されなかったり、大きく表示される場合がある。<br>その場合、下記をインポートし、CSSを先読みにすることで、その事象を避けることができる。</p><pre><code>import "@fortawesome/fontawesome-svg-core/styles.css";</code></pre>

Next.jsにFont Awesomeを導入する。

<h3 id="he19151e780">FastAPIの特徴</h3><ul><li>リクエストとレスポンスのスキーマ定義に合わせて自動的に Swagger UI のドキュメントが生成される</li><li>上記のスキーマを明示的に定義することにより、型安全な開発が可能</li><li>ASGI（非同期サーバーゲートウェイインターフェース）に対応しているので、非同期処理を行うことができ、高速</li></ul><p>スキーマを明示的に定義することによって、フロントエンドエンジニアが実装の際に利用するドキュメントを簡単に自動生成でき、さらに実際にリクエストパラメータを変更して API の呼び出しを試すこともできる。<br>→スキーマ駆動開発を自然的に始めることができる。</p><h2 id="h0ef859a5d4">環境構築</h2><p>Docker 環境を用意。<br>詳細は、Dockerfile と docker-compose.yml を参照。</p><h3 id="h803fd52017">Poetryとは</h3><ul><li>Python のパッケージマネージャの一つ。Java における Maven のように、パッケージ同士の依存関係を解決する。</li></ul><blockquote style="padding-left:3em">poetry では pip が行わないパッケージ同士の依存関係の解決や、lock ファイルを利用したバージョン固定、Python の仮想環境管理など、より高機能でモダンなバージョン管理が行えます。</blockquote><ul><li><em>pyproject.toml</em>*は、poetry において依存関係を管理するファイル。</li></ul><h3 id="h91e537bd04">Uvicornとは</h3><blockquote style="padding-left:3em">Uvicorn は uvloop と httptools を使った高速な ASGI サーバの実装です。最近まで Python には、asyncio フレームワークのための最小限の低レベルサーバー/アプリケーションインターフェースがありませんでした。ASGI 仕様はこのギャップを埋めるもので、すべての asyncio フレームワークで使える共通のツールセットを構築することができるようになりました。<br>ASGI は、Python の Web フレームワークのエコシステムを実現し、IO 負荷の高いコンテキストで高いスループットを達成するという点で、Node や Go に対して高い競争力を持つようになるはずです。また、WSGI では扱えない HTTP/2 や WebSocket への対応も行っています。<br>Uvicorn は現在、HTTP/1.1 と WebSocket をサポートしています。HTTP/2 への対応も予定されています。</blockquote><h3 id="h996b313dd8">Poetry 定義ファイル作成</h3><p>docker-compose build でイメージ作成後、下記コマンドで poetry の初期化、fastapi のインストールを行う。引数として、 fastapi と、ASGI サーバーである uvicorn をインストールする依存パッケージとして指定</p><pre><code># poetry 定義ファイル作成
docker-compose run \
--entrypoint "poetry init \
--name demo-app \
--dependency fastapi \
--dependency uvicorn[standard]" \
demo-app

# Fast API インストール
docker-compose run --entrypoint "poetry install" demo-app

</code></pre><h3 id="h9ccea023e2">api ディレクトリ配下に、init.py と main.py を定義する</h3><p>docker-compose up でコンテナ立ち上げ後、<a href="http://localhost:8000/docs" target="_blank" rel="noopener noreferrer">http://localhost:8000/docs</a>にアクセスすると、Swagger UI が確認できる。実際にブラウザ上で定義した API を叩くことができる。</p><h2 id="hdf10a4d783">Router</h2><p>routers ディレクトリに、パスオペレーション関数を定義する。</p><ul><li><em>パスオペレーション関数</em>*は、REST API の「エンドポイント」と「HTTP メソッド」にそれぞれ対応します。</li></ul><p>routers ディレクトリにはリソースごとに、ファイルを分けるのが良さそう。</p><h3 id="h285d9f66e9">router の実装</h3><pre><code># /api/routers/task.py 抜粋
from fastapi import APIRouter

router = APIRouter()

@router.get("/tasks")
async def list_tasks():
    pass


# main.py 抜粋

from fastapi import FastAPI
from api.routers import task

app = FastAPI()

# routerインスタンスをfast apiインスタンスに取り込む
app.include_router(task.router)

</code></pre><h3 id="hde9293d1b7">スキーマの定義</h3><p>FastAPI では、依存するPydanticという強力なライブラリによって、型ヒントを積極的に利用し、 API の入出力のバリデーション を行います。</p><pre><code>from typing import Optional
from pydantic import BaseModel, Field

# BaseModelクラスを継承
# 型を定義することで、バリデーションの役割を担う。
class Task(BaseModel):
    id: int
    title: Optional[str] = Field(None, example='クリーニングを取りに行く')
    done: bool = Field(False, description='完了フラグ')

</code></pre><h2 id="h927a3e3a31">MySQL 環境の構築</h2><h3 id="hf20694e889">Docker 側</h3><ul><li>docker-compose ファイルを参照</li></ul><h3 id="h156a7cbe76">アプリ側</h3><p>mysql クライアントのインストール</p><ul><li><em>sqlalchemy</em>*という ORM ライブラリを使用</li></ul><blockquote style="padding-left:3em">sqlalchemy 単体は非同期処理をサポートしていないため、下記ライブラリも入れる。</blockquote><ul><li>aiomysql もインストール</li></ul><blockquote style="padding-left:3em">MySQL 向けに非同期 IO 処理を提供するライブラリ。依存する pymysql もインストールされる。</blockquote><pre><code># "demo-app" コンテナの中で "poetry add sqlalchemy aiomysql" を実行
$ docker-compose exec demo-app poetry add sqlalchemy aiomysql

</code></pre><p>pyproject.toml から、パッケージが追加されていることを確認する。その後、DB 接続クラスを作成する。<br>→ api/db.py 参照</p><h3 id="h5911738a10">マイグレーション</h3><p>マイグレーションのスクリプトを作成する<br>→ api/migrate_db.py 参照</p><pre><code># api モジュールの migrate_db スクリプトを実行する
$ docker-compose exec demo-app poetry run python -m api.migrate_db

</code></pre><h2 id="ha31fe94c64">CRUD 処理</h2><p>api/cruds にリソースごとに、CRUD 処理を記述し、router 側でその処理を呼び出す流れ。</p><pre><code># api/router/task.py抜粋

from typing import List
from fastapi import APIRouter, Depends
import api.schemas.task as task_schema
import api.cruds.task as task_crud
from api.db import get_db
from sqlalchemy.ext.asyncio import AsyncSession

router = APIRouter()

# Depends は引数に関数またはコルーチンを取り、
# DI（Dependency Injection、依存性注入） を行う機構です。
# db: AsyncSession = Depends(get_db)
# DB接続部分にDIを利用することにより、ビジネスロジックとDBが密結合になることを防ぐ。
@router.get("/tasks", response_model=List[task_schema.Task])
async def list_tasks(db: AsyncSession = Depends(get_db)):
    return await task_crud.get_tasks_with_done(db)

</code></pre><h2 id="h33c7350f10">Unit Test</h2><h3 id="h98f0338f18">テスト関連のライブラリインストール</h3><p>下記ライブラリをインストール</p><ul><li>pytest-asyncio</li></ul><blockquote style="padding-left:3em">unit-test ライブラリの pytest を非同期用に拡張</blockquote><ul><li>aiosqlite</li></ul><blockquote style="padding-left:3em">SQLite の非同期クライアント</blockquote><ul><li>httpx</li></ul><blockquote style="padding-left:3em">非同期 HTTP クライアント</blockquote><pre><code># -Dオプションは開発用モード。テストや開発時のローカル環境でのみ使用できる。
# 本番環境では不要なライブラリをインストールせずに済み、
# コンテナでインストールする場合も結果的にコンテナのイメージサイズを減らしたり、
# ビルド時間を短縮することが可能
docker-compose exec demo-app poetry add -D pytest-asyncio aiosqlite httpx

</code></pre><p>api/tests ディレクトリを作成し、init.py, test_main.py を作成する。その後、fixture（テスト関数の前処理や後処理を定義することができる関数） を定義する。</p><h3 id="hefa04901a2">ユニットテスト実行方法</h3><pre><code># 1. コンテナ内に入る
docker-compose exec demo-app bash
# 2. poetryの仮想環境に入る
poetry shell
# 3. 実行
pytest

</code></pre><h2 id="hdfa6d2d105">tips</h2><h3 id="h10c3bc69e7">dict の展開について</h3><pre><code>@router.post("/tasks", response_model=task_schema.TaskCreateResponse)
async def create_task(task_body: task_schema.TaskCreate):

# dict インスタンスに対して先頭に ** をつけることで、 dict を キーワード引数として展開 し、
# task_schema.TaskCreateResponse クラスのコストラクタに対して、
# dict のkey/valueを渡します。
# つまり、task_schema.TaskCreateResponse(
#         id=1,
#         title=task_body.title,
#         done=task_body.done
#       ) と等価となります。
    return task_schema.TaskCreateResponse(id=1, **task_body.dict())

</code></pre><h3 id="hab98aa66e5">yield の役割について</h3><blockquote style="padding-left:3em">関数の処理を一時停止してから値を返す。</blockquote><p>return の役割と対比するとわかりやすい。セッションや、コネクションを関数の返り値として渡す時とかに使えそう？<br><a href="http://ailaby.com/yield/" target="_blank" rel="noopener noreferrer">http://ailaby.com/yield/</a></p>

Fast API 入門してみた

<p>本記事は、Next.jsチュートリアルをもとに、私自身が特に重要そうだなと思った部分をコンパクトにまとめた記事（備忘録）になります。<br>適宜加筆、修正予定です。</p><h2 id="h08e3d9267e">Why Next.js</h2><ul><li>SEO に強い SPA 開発</li><li>パフォーマンスを効率化する仕組み</li><li>ルーティングが楽</li><li>API の作成がかんたん（プロジェクトの中でバックエンドの API を作れる）</li><li>TypeScript を簡単に導入できる</li></ul><h2 id="h0ef859a5d4">環境構築</h2><h3 id="hccdc86dd14">Next.js で環境構築するメリット</h3><ul><li>Babel+Webpack の複雑な環境設定が不要</li><li>Code Splitting のような最適化設定が不要</li><li>パフォーマンスや SEO のための Pre-render 設定が不要</li><li>Rendering のタイミングを選択できる<ul><li>SSR 　レンダリングをサーバ側でしたり</li><li>SSG 　静的サイトジェネレーション</li></ul></li><li>サーバーサイドの処理を簡単に実装できる</li></ul><h3 id="h046876a126">手順</h3><ol><li> Node.js をインストールする。(ver.10.13 以降)</li><li> 下記コマンドを実行</li></ol><pre><code>npx create-next-app</code></pre><p>※チュートリアルで使用したライブラリのインストール</p><pre><code># markdownのパースに必要
npm install gray-matter

# markdownのレンダリングに必要
npm install remark remark-html

# 日付のフォーマットに必要
npm install date-fns</code></pre><h2 id="hf64c7c1253">ルーティング</h2><p>pages ディレクトリで管理</p><pre><code>ex)
pages/index.js → /
pages/posts/first_post.js → posts/first_post</code></pre><h3 id="h1f4493c378"><strong> Client-Side Navigation とは？</strong></h3><blockquote>クライアントサイド・ナビゲーションとは、JavaScript を使用してページの遷移を行うことで、ブラウザが行うデフォルトのナビゲーションよりも高速に行うことができます。<br>&lt;a&gt;タグなどで遷移 → ページがすべて再読み込みされる<br>&lt;Link&gt;タグを利用することで、Production モードの際に、Link タグの JS を Prefetch されるので、表示の高速化につなげることができる。</blockquote><p>className などの属性を追加する必要がある場合は、Link タグではなく、a タグに追加する。<br>※Link タグの下に入れ子で a タグを利用する。</p><h2 id="h5e9d05aef2">Asset, Metadata, CSS</h2><ul><li>画像などの静的データは、public ディレクトリに配置する。</li><li>&lt;img&gt;タグではなく、&lt;Image&gt;タグを使うといい感じに Next.js 側で調整してくれる。</li><li>リサイズ、最適化、および WebP などの最新フォーマットでの画像提供が可能に。ビューポートが小さいデバイスに大きな画像を配信することがなくなります。</li><li>CMS などの外部データソースでホストされている場合でも、最適化してくれる。</li><li>Next.js は、ビルド時に画像を最適化するのではなく、ユーザーからのリクエストに応じてオンデマンドで画像を最適化する。</li></ul><h3 id="h7b3c950f25">画像</h3><pre><code>import Image from "next/image";

// next.jsが用意しているImageタグを使う
// Imageタグのsrc属性には絶対パスを記載する。
// Publicに保持している画像を表示したい場合は下記のように指定。
const image = () =&gt; {
  return (
    &lt;&gt;
      &lt;Image
        priority
        src="/sauna_boy.png"
        className={utilStyles.borderCircle}
        height={144}
        width={144}
        alt={name}
      /&gt;
    &lt;/&gt;
  );
};</code></pre><h3 id="h0b1359ef3a">Metadata</h3><pre><code>import Head from "next/head";

// next.jsが用意しているHeadタグを使う
const head = () =&gt; {
  return (
    &lt;&gt;
      &lt;Head&gt;
        &lt;title&gt;First Post&lt;/title&gt;
      &lt;/Head&gt;
    &lt;/&gt;
  );
};</code></pre><h3 id="h20b4c98e2a">CSS</h3><pre><code>/**
 styled-jsxを利用して
 React Component内でCSSを書きたい時
 CSS-in-JSライブラリによって記法はいろいろあるっぽい。
 */

&lt;style jsx&gt;{`
  …
`}&lt;/style&gt;</code></pre><h3 id="he8015688cc">CSS Modules を利用してコンポーネント単位で CSS を 適用する方法</h3><p>① CSS ファイルを用意する。</p><pre><code>.container {
  max-width: 36rem;
  padding: 0 1rem;
  margin: 3rem auto 6rem;
}</code></pre><p>② style を適用したいコンポーネント内で css ファイルを Import し、className に記載する</p><pre><code>import styles from "./layout.module.css";

export default function Layout({ children }) {
  return &lt;div className={styles.container}&gt;{children}&lt;/div&gt;;
}</code></pre><blockquote>ブラウザ上でレンダリングされるときは、CSS Module がユニークなクラス名を生成するので、CSS Module を利用している限りは、クラス名が衝突することはない。</blockquote><h3 id="he9c410f5cf">Global に CSS を適用したい時</h3><p>グローバル CSS ファイルを読み込むために、pages/_app.js というファイルを以下の内容で作成。</p><pre><code>export default function App({ Component, pageProps }) {
  return &lt;Component {...pageProps} /&gt;;
}</code></pre><ul><li>App コンポーネントは Top レベル</li><li>グローバル CSS ファイルは、どこに置いても、どんな名前を使ってもよい</li><li>公式チュートリアルでは Top レベルに style ディレクトリを切り、そこに global.css を定義。その css を pages/_app.js に import することでグローバルに CSS を適用していた。</li><li>css の tips(公式) </li></ul><p>			<a href="https://nextjs.org/learn/basics/assets-metadata-css/styling-tips" target="_blank" rel="noopener noreferrer">https://nextjs.org/learn/basics/assets-metadata-css/styling-tips</a></p><h2 id="hc25b551f84">Pre-rendering and Data Fetching</h2><p>Next.js&nbsp; は基本的に、全てのページを<strong> プリレンダリング</strong>する。</p><blockquote> Next.js は、クライアントサイドの JavaScript ですべてを処理するのではなく、各ページの HTML を事前に生成します。プリレンダリングを行うことで、パフォーマンスや SEO の向上につながります。</blockquote><p><strong>プリレンダリング</strong>の形式は 2 つある。具体的には HTML の生成されるタイミングが異なる。また、ページごとにレンダリングの方法を指定できる。</p><ul><li>SSG(Static Generation)　(※Next.js 公式は SSG を推奨している)</li></ul><blockquote>ビルド時に HTML を生成するプリレンダリング方式です。プリレンダリングされた HTML は、各リクエストで再利用されます。ページを一度作成して CDN で配信することで、リクエストごとにサーバーがページをレンダリングするよりもはるかに高速になる ◎</blockquote><ul><li> SSR(Server-side Rendering)</li></ul><blockquote>サーバーサイドレンダリングは、リクエストごとに HTML を生成するプリレンダリング方式です。</blockquote><h3 id="hb2c566b4bf"> プリレンダリングの使い分け</h3><p>ユーザーがリクエストする前に、このページを事前にレンダリングすることができるかどうか。<br>→ 事前にレンダリングできる場合は、SSG がよい。<br>頻繁に更新されるデータを表示するページでは、リクエストのたびにページの内容が変わる。<br>→ Server-side Rendering 　を選択する。</p><h2 id="h0f003336dd">SSG</h2><h3 id="he313a7dc2a">getStaticProps</h3><p>ビルド時にデータを fetch する必要がある場合<br>→ <strong> getStaticProps</strong> 関数を使用する。<br><strong> getStaticProps</strong> 関数内でデータを fetch して Props としてデータを渡すことができる。(ex, file system, api, DB...)</p><pre><code>import { getSortedPostsData } from "../lib/posts";

// getStaticPropsは、サーバー側で実行される関数
// = ブラウザ側に渡すこと無く、DBのクエリなども発行できちゃう。
// getStaticPropsは、pagesディレクトリのページでのみ使用可能
export async function getStaticProps() {
  const allPostsData = getSortedPostsData();

  return {
    props: {
      allPostsData,
    },
  };
}

export default function Home({ allPostsData }) {
  return (
    &lt;div&gt;
      // 描画内容
    &lt;/div&gt;
   )
}</code></pre><blockquote>注：Next.js は、クライアントとサーバーの両方で fetch()を実装しています。インポートする必要はありません。</blockquote><h2 id="hae9c71da8d">Server-side Rendering</h2><p><strong> getServerSideProps</strong>の実行タイミング：<span style="color:#292c32">ページをリクエストしたタイミングで、サーバーにAPIリクエストを送信し、getServerSidePropsを実行する。</span></p><blockquote>Server-side Rendering を使用するには、ページから getStaticProps ではなく<strong> getServerSideProps</strong> をエクスポートする必要があります。</blockquote><pre><code>// request時にデータを取得する必要がある場合のみ使用する。

export async function getServerSideProps(context) {
  return {
    props: {
      // props for your component
    },
  };
}</code></pre><h2 id="h35e1aa5bdd">Client Side Rendering</h2><p>プリレンダリングする必要がそもそもない場合は Client Side Rendering を選択することもできる。外部データを必要としないページのロード → クライアント側からデータを取得する。（ユーザのダッシュボード画面等頻繁に更新されるページ、SEO の対策が必要でない場合など）<br>Client Side Rendering を使用してデータを取得する場合は、<strong>SWR</strong> と言われる React hooks を使用するのが推奨されている。</p><h3 id="hb7891d18b0">SWR</h3><pre><code>npm install swr
// 使用例

import useSWR from "swr";

function Profile() {
  // JSON データを使用する通常の RESTful API の場合、
  // まずネイティブの fetch をラップした fetcher 関数を作成する必要があります
  const fetcher = (...args) =&gt; fetch(...args).then((res) =&gt; res.json());

  // 第２引数にfetcher関数を渡す。
  const { data, error } = useSWR("/api/user", fetch);
  if (error) return &lt;div&gt;failed to load&lt;/div&gt;;
  if (!data) return &lt;div&gt;loading...&lt;/div&gt;;
  return &lt;div&gt;hello {data.name}!&lt;/div&gt;;
}</code></pre><h2 id="hc2270f065e">Dynamic Routes</h2><p>動的ルーティングで、静的ページを生成する方法。/posts/&lt;id&gt;として、id ごとに 動的に静的ページを生成したい時、<strong>getStaticPaths</strong> という非同期関数をエクスポートします。この関数では、id に指定できる値のリストを返す。</p><pre><code>// id に指定できる値のリストの例
// 文字列のリストではなく、オブジェクトの配列を返却しなければならない。
// 各オブジェクトは、params キーを持ち、id キーを持つオブジェクトを含んでいなければなりません
//（ファイル名に[id]を使用しているため）。


[
  {
    params: {
      id: "ssg-ssr",
    },
  },
  {
    params: {
      id: "pre-rendering",
    },
  },
];</code></pre><p>流れとしては、</p><ol><li>/posts/[id].js 内に、<strong>getStaticPaths</strong>定義し、id の配列 を返却する。</li><li>/posts/[id].js 内に、<strong>getStaticProps</strong>定義し、id に紐づくデータを取得する。</li><li>2 で取得したデータを Props として渡す。</li></ol><pre><code>export async function getAllPostIds() {
  // Instead of the file system,
  // fetch post data from an external API endpoint
  const res = await fetch("..");
  const posts = await res.json();
  return posts.map((post) =&gt; {
    return {
      params: {
        id: post.id,
      },
    };
  });
}</code></pre><h3 id="hac93ff2e58"><strong>getStaticPaths</strong>関数の return に含まれる fallback オプションについて</h3><pre><code>export async function getStaticPaths() {
  // Return a list of possible value for id
  const paths = getAllPostsIds();
  return {
    paths,
    fallback: false,
  };
}</code></pre><ul><li>fallback: false の場合、</li></ul><blockquote>getStaticPath で生成されたパス以外を指定された場合に 404 のページを返却する。</blockquote><ul><li>fallback: true の場合、</li></ul><blockquote>getStaticPath で生成されたパス以外を指定された場合に 404 のページを返却しない。</blockquote><ul><li>fallback: blocking の場合、</li></ul><blockquote>新しいパスはサーバーサイドで getStaticProps を使ってレンダリングされ、将来のリクエストに備えてキャッシュされるため、パスの生成は 1 回のみ実行される</blockquote><h3 id="he957690e69">Dynamic Route の拡張について</h3><p>[連想配列].js として、getStaticPaths のパスの指定を下記のようにすることで、階層をより深くした動的パスのルーティングが生成ができる。</p><pre><code>// pages/posts/[...id].js matches /posts/a,
// but also /posts/a/b, /posts/a/b/c and so on.
return [
  {
    params: {
      // Statically Generates /posts/a/b/c
      id: ["a", "b", "c"],
    },
  },
  //...
];</code></pre><h3 id="h229881b749">Error Page のカスタム</h3><p><a href="https://nextjs.org/docs/advanced-features/custom-error-page" target="_blank" rel="noopener noreferrer">https://nextjs.org/docs/advanced-features/custom-error-page</a></p><pre><code>// pages/404.jsを作成し、Custom404()関数内に表示したい内容を返却する。
export default function Custom404() {
  return &lt;h1&gt;404 - Page Not Found&lt;/h1&gt;;
}


// ※500エラーの時なども同様</code></pre><h2 id="h516f682966">API Routes</h2><p>	API エンドポイントを Node.js のサーバーレス関数として作成できる。</p><h3 id="h8259385cd8">API Routes 作成手順</h3><ol><li>pages ディレクトリ配下に api ディレクトリ作成</li><li>api ディレクトリ配下に hoge.js ファイルを作成</li><li>下記の用な感じで handler を定義してあげる</li></ol><pre><code>// pages/hoge.js
export default function handler(req, res) {
  res.status(200).json({ text: "Hello" });
}</code></pre><p><a href="http://localhost:3000/api/hoge" target="_blank" rel="noopener noreferrer">http://localhost:3000/api/hoge</a> にアクセスすると上記の API が叩かれる　※ API Routes 配下では、getStaticProps or getStaticPaths は使用するべきではない。<br>→ サーバサイドで実行されるべきコード、ブラウザ側に渡したくないコード(DB のクエリ投げたり等)は、getStaticProps or getStaticPaths を使用する。</p><h2 id="hcf32fdcfc9">Vercel を利用したデプロイ方法</h2><p>とりあえずこれ見ましょう。<br><a href="https://nextjs.org/learn/basics/deploying-nextjs-app/deploy" target="_blank" rel="noopener noreferrer">https://nextjs.org/learn/basics/deploying-nextjs-app/deploy</a><br>チュートリアルの成果物<br><a href="https://nextjs-tutorial-w8f.vercel.app" target="_blank" rel="noopener noreferrer">https://nextjs-tutorial-w8f.vercel.app</a></p><h2 id="h263fd9d31f">プロジェクトの TypeScript 化</h2><pre><code># 1. tsconfig.jsonファイル作成
touch tsconfig.json

# 2. npm run dev する。→tsconfig.jsonに設定が書き込みされる。

# 3. typescript関連のパッケージをインストール
# → next-env.d.tsファイルが自動で作成される。
npm install --save-dev typescript @types/react @types/node</code></pre>

Tech