【YWT】210306

1. [Y] やったこと

  • 3.7m歩いた
  • Lineモバイルの支払い方法でLine payが選択できなくて、クレジット払いに変更した
  • Next.jsのチュートリアルをすすめた
  • 久々に高円寺のたちばなで餃子を食べた

2. [W] わかったこと

  • Next.jsの動的なルーティングの概要についてチュートリアルをすすめた

    • 外部に依存するデータのパス生成と生成手順について
    • 静的生成で必要なデータをフェッチするときには getStaticProps
    • 各ページパスが外部データに依存している場合、そのパスを静的生成するのは getStaticPaths
    • パスを動的に生成するための手順
      • 表示するページのレイアウトを管理するコンポーネントを用意する
      • 同ページ内に getStaticPaths でページ情報を配列として取得
      • 同ページ内に getStaticProps で静的生成に必要なデータを取得
    • pages ディレクトリ配下に [] をつけたjsファイルを作ることで、動的ルーティングが有効になる
    • getStaticPaths は動的ルーティングを利用する際に静的なファイルを生成するためのAPI
      • 事前ビルドするパスを配列にして返す
    • getStaticProps では、ルーティングの情報が入ったパラメーターを params で受け取る
    • ビルド時に getStaticPaths と getStaticProps の処理によって、表示するページが入っているディレクトリのパスを動的ルーティングの対象にできる
    • getStaticPaths で表示するすべてのページを取得し、 getStaticProps で指定されたIDをもとにそのページを取得する

  • Next.jsの動的なルーティングに使うパス取得の実装方法についてチュートリアルをすすめた

    • 実装方法について
    • 外部データを読み込むモジュールを作成
      • .md の拡張子を取り除いて取得
      • 取得したファイル名がそのままパスとなる
    • getStaticPaths で受け取るデータ形式にはいくつか制約がある
      • オブジェクトの配列にする必要がある
      • 各オブジェクトには params というキーをもつオブジェクトが必要になる
        • {
  params: {…}
}
    • 外部データを読み込むモジュールを動的ルーティングをするページの getStaticPaths で呼び出してreturnする
    • 動的ルーティングに必要なパスの返し方について

  • Next.jsの動的なルーティングでページを表示する実装方法についてチュートリアルをすすめた

    • getStaticProps で表示するページのパスが渡されたときの処理を作成する
      • params をパラメータとして受け取る
      • params.id を表示するパスとして、表示するページのデータを取得し、 props として返す
      • データ取得時に、非同期式で受け取る
    • 表示部で props を受け取り、表示に必要なデータを組み立てる

  • 以前、 Laravel でルーティングをしたときは前もって一覧化した上で管理していたのもあって、なかなか慣れないなと思った

  • Next.jsの動的なルーティングを使うときのヒントについてチュートリアルをすすめた

    • 動的ルートを使う歳のtips
    • getStaticPaths も　getStaticProps と同様に、外部のデータを取得できる
    • dev 環境ではリクエストごとに getStaticPaths が走る
    • production ではビルド時に動く
    • Next.jsのルーターにアクセスする場合、 useRouter でアクセスできる
    • 404ページは pages/404.js を作成することでカスタムできる

  • Next.jsのAPIルートについてチュートリアルをすすめた

    • pages/api ディレクトリを作って、apiのエンドポイントとなるファイルが作れる
      • pages/api/hello.js を作ったら、エンドポイントは ドメイン/api.hello となる
      • ファイル内の書き方の例
        •   export default function handler(req, res) {
    res.status(200).json({text: 'hello'})
  }
      • サーバーレス関数（ラムダ）として使える

  • Next.jsのAPIルートのヒントについてチュートリアルをすすめた

    • APIルートは getStaticPaths 、 getStaticProps からフェッチでしてはならない
      • 代わりに、 getStaticPaths 、 getStaticProps に直接サーバーサイドのコードを書く
      • 理由として、 getStaticPaths 、 getStaticProps はサーバーサイドでのみ動作するため、クライアント側では実行されない
      • getStaticPaths 、 getStaticProps はJSバンドルされないので、ブラウザには送信されないため、直接データベースクエリが書ける
    • APIルートの良いユースケースとしては、フォーム入力がある
      • ページにフォームを作成して、 POST でAPIルートにリクエストの送信ができる
      • APIルートのこ～後はクライアントバンドルの一部ではないので、サーバー側のコードを安全に使える
    • プレビューモードや動的APIルートも使える
    • APIルートをクライアント側から呼び出す例としてこれが参考になりそう

  • これでNext.jsのチュートリアルはNext.jsのプロジェクトをデプロイするチャプターのみになった

3. [T] 次にやること

results matching ""

    No results matching ""