Next.jsAPIルートの使用方法

Next.jsが提供するこの強力なテクニックを学び、Next.jsアプリ内にAPIエンドポイントを作成します

作成に加えてページルート、つまり、ページはWebページとしてブラウザに提供され、Next.jsは作成できますAPIルート

これは非常に興味深い機能です。これは、Next.jsを使用して、Next.js自体によって保存および取得されるデータのフロントエンドを作成し、フェッチリクエストを介してJSONを転送できることを意味します。

APIルートは/pages/api/フォルダとにマップされます/api終点。

この機能は非常にアプリケーションを作成するときに便利です。

これらのルートでは、(Reactコードではなく)Node.jsコードを記述します。これはパラダイムシフトであり、フロントエンドからバックエンドに移動しますが、非常にシームレスです。

あなたが持っていると言う/pages/api/comments.jsファイル。ブログ投稿のコメントをJSONとして返すことを目的としています。

コメントのリストがに保存されているとしますcomments.jsonファイル:

[
  {
    "comment": "First"
  },
  {
    "comment": "Nice post"
  }
]

コメントのリストをクライアントに返すサンプルコードを次に示します。

import comments from './comments.json'

export default (req, res) => { res.status(200).json(feeds) }

それはに耳を傾けます/api/commmentsGETリクエストのURL。ブラウザを使用して呼び出すことができます。

APIルートも使用できます動的ルーティングページのように、[]次のような動的APIルートを作成するための構文/pages/api/comments/[id].js投稿IDに固有のコメントを取得します。

内部[id].jsあなたは検索することができますid内部でそれを調べることによる価値req.queryオブジェクト:

import comments from '../comments.json'

export default (req, res) => { res.status(200).json({ post: req.query.id, comments }) }

ここでは、上記のコードの動作を確認できます。

動的ページでは、インポートする必要がありますuseRouterからnext/router、次にを使用してルーターオブジェクトを取得しますconst router = useRouter()、そしてそれから私達は得ることができるでしょうid使用する値router.query.id

サーバー側では、クエリがリクエストオブジェクトに添付されるため、すべてが簡単になります。

POSTリクエストを実行すると、すべて同じように機能します。つまり、すべてデフォルトのエクスポートが実行されます。

POSTをGETおよびその他のHTTPメソッド(PUT、DELETE)から分離するには、req.method値:

export default (req, res) => {
  switch (req.method) {
    case 'GET':
      //...
      break
    case 'POST':
      //...
      break
    default:
      res.status(405).end() //Method Not Allowed
      break
  }
}

に加えてreq.queryそしてreq.methodすでに見たように、参照することでCookieにアクセスできますreq.cookies、リクエスト本文req.body

ボンネットの下で、これはすべてによって供給されていますマイクロ、Next.jsを構築したのと同じチームによって作成された非同期HTTPマイクロサービスを強化するライブラリ。

APIルートで任意のマイクロミドルウェアを利用して、機能を追加できます。

私の無料ダウンロードNext.jsハンドブック


その他の次のチュートリアル: