[Next.js]は、クライアント側でのSWRライブラリとNext.jsのAPIルートを消費します

Next.js APIのルートに関するクールの事は、我々が直接のページからAPIエンドポイントを消費することができるということです。

SWRは、フックを使用してアプリケーションを反応させるのにデータロード状態を処理するための便利なツールである、と私たちNext.jsアプリケーションのための完璧なコンパニオンです。このレッスンでは、使用する方法を学びます  SWR  クライアント側でAPIエンドポイントを消費して、条件付きでデータが利用できない場合、エラーまたはロードコンポーネントをレンダリングするために-ツァイトでライブラリをフェッチしたデータを- 。

 

ページ/ API /ユーザー/ [ID] .TS：

「次」からインポート{NextApiHandler} 。

CONSTデータ = [ 
  {ID： 1、名称： "WAN" }、
  {ID： 2、名称： "ジェン" }、
  {ID： 3、名称： "天" } 
]。

CONSTユーザ：NextApiHandler =（REQ、RES）=> { 
  CONST {ID} = req.query。
  CONSTのuserData = data.find（X =>文字列（x.id）=== 文字列（ID））。

  もし（のuserData）{ 
    res.status（ 200 ）.json（のuserData）。
  } 他{ 
    res.status（ 404 ）.END（）; 
  } 
}。

輸出のデフォルトのユーザー。

 

ページ/ユーザー/ [ID] .tsx：

「次/ルーター」からインポート{useRouter} 。
インポート{SimpleGridの、テキスト、警告、フレックス、見出し}から "@チャクラ-UI /コア" 。
以下からの輸入useSWR「SWR」。

CONSTフェッチャ =非同期（URL：列）=> { 
  CONST RES = のawaitフェッチ（URL）。
  もし（！res.ok）{
     スローエラー（ "ヨOKではありません!!!" ）; 
  } 
  CONSTデータ：{ 
    ID：ストリング。
    名前：文字列。
    電子メール：文字列; 
  } = のawait res.json（）。

  戻り値のデータ。
}。

CONST UserDataを =（）=> {
  CONSTルータ = useRouter（）。
  CONST {ID} = router.query。
  CONST {データ、エラー} = useSWR（ `/ API /ユーザ/ $ {ID}`、フェッチャ）。もし（エラー）{
     リターン <アラートステータス=「エラー」>読み込み失敗</アラート>。
  } もし（！データ）{
     リターン <アラートステータス= "情報">読み込んでいます... </アラート>。
  } リターン（
     <SimpleGridの列= {2}幅= "2XS" spacingY = {4}> 
      <テキストたfontWeight = "ボールド" marginRight = {4}> 
        ユーザID </テキスト> 
      <テキスト> {data.id} </テキスト> 
      <テキストたfontWeight =」

  

  

  
      

      </テキスト> 
      <テキスト> {data.name} </テキスト> 

      <テキストたfontWeight = "ボールド" marginRight = {4}> 
        メール
       </テキスト> 
      <テキスト> {data.email} </テキスト> 
    </ SimpleGridの>   ）; 
}。
CONSTユーザ =（）=> {
   リターン（
     <フレックスflexDirection = "列" alignItems = "センター"> 
      <= "H1">ユーザー</見出し>として見出し
      <UserDataの/> 
    </フレックス>   ）。
}。
輸出のデフォルトのユーザー。