クローンアプリを作ってみたーNetflixクローン⑤

はじめに

初めまして！
エンジニアになって数年、今まで本を読むだけでしたが、もっとプライベートで楽しみながら成長したい！自分が学んだ足跡を残していきたい！と思い記事を書きました！
最終的には自在に開発できるようになりたいと思っています。
いろいろな記事を参考にさせてもらっています。
その中でもこれってどういう意味？とかつまづいたところを念入りに書いていこうかと思います。

今回の目的

nextjsはまだですが、実際のアプリ開発からどう作られていくかを学んでいくためにクローンアプリを開発します。
とは言っても自分で考えることは特になくYoutubeを見てやっていきます。
その中で覚えておきたい部分を分類ごとに記載していきます。なので、その時々に知ったことを小出しにしていく形になります。

前回

使用したものや事前準備

・Macbook Pro
・Visual Studio Code

使用にさせていただいた動画

Next.jsの知識

next-auth

Github

取得できる情報は下記を参考

~Provider

clientId

OAuth アプリケーションを識別するために GitHub によって提供される一意の公開識別子。「ユーザーID」のようなもの。Github上で一意なためURLに付与しアプリケーション認証へ遷移する。

clientSecret

OAuth アプリケーションの認証を行うための秘密キー。「パスワード」のようなもの。

GithubProvider({
    clientId: ...
    clientSecret: ...
}),

import { NextPageContext } from 'next';

Next.jsのコンテキストオブジェクトで、HTTPリクエストやルーティングの情報などが含まれる

import { getSession, signOut } from 'next-auth/react'

getSession(context: NextPageContext)

ページコンテキストからセッション情報取得。
内部でfetchDataを呼び出しており、cookieをparamにリクエストした結果、jsonが帰ってこなければnullとなる。

signOut

サインアウト実行

getServerSideProps

Next.js で定義された特別な関数。ページがレンダリングされる前にサーバー側で自動的に実行され、その結果がページコンポーネントにpropsで渡される。

リダイレクト構文

  if(!session){
    return {
      redirect: {
        destination: '/auth',
        permanent: false,
      }
    }
  }

import useSWR from "swr";

React アプリケーションでデータフェッチングを簡単に行うためのカスタムフック

const { data, error, isLoading, mutate } = 
useSWR("/api/user", (url: string) => axios.get(url).then((res) => res.data));

/api/user

エンドポイントURL

(url: string) => axios.get(url).then((res) => res.data)

fetcher関数。urlはエンドポイントURL

data

リクエストが成功するとフェッチされたデータが格納される。

error

リクエスト中にエラーが発生した場合、エラー情報が格納される。

isLoading

ローディング状態を判断

mutate

ローカルキャッシュのデータを手動で再検証（更新）することができる関数

次