Yanonoblog!

こつこつと

Next.jsのcontextについて

背景

実務ではReactを使っているのですがNext.jsのキャッチアップしておきたいと思ったので、その内容を整理したいと思います。

本記事では、Next.jsに関する情報をまとめています。

内容は易しめです。

前回の続きになります！

▶ Next.jsでSSRの挙動を確認してまとめてみる

Context

contextとは

前回の記事ではgetServerSideProps関数を使用してSSRを行うページを作成しましたがgetServerSideProps関数にはcontext引数を指定する必要があります。

contextは、サーバーサイドでリクエストを受け取る際の情報を提供するオブジェクトで、例えば現在のURL、HTTPリクエストのヘッダー、クエリパラメーターなどが含まれます。

以下のコードではcontextを引数に指定してgetServerPropsContextを呼び出しています。

import { GetServerSidePropsContext } from 'next';

export async function getServerSideProps(context: GetServerSidePropsContext) {
  const res = await fetch("http://localhost:3000/data.json");
  const data = await res.json();
  console.log(context);
  console.log(data);

  return {
    props: {
      data
    }
  };
}

contextオブジェクトの中身を見てみる

contextオブジェクトにはクライアントからのHTTPリクエストに関する情報が含まれています。

以下はconsole.log();で出力した結果ですがcontextオブジェクトはNode.jsのhttp.IncomingMessageクラスのインスタンスであることがわかります。

{
  req: IncomingMessage {
    _readableState: ReadableState {
      ...略...
    },
      ...略...
    socket: Socket {
      ...略...
    },
    httpVersionMajor: 1,
    httpVersionMinor: 1,
    httpVersion: '1.1',
    complete: true,
    headers: {
      'cache-control': '',
      'x-forwarded-host': 'localhost:3000',
      ...略...
    },
    rawHeaders: [
      ...略...
    ],
    trailers: {},
    rawTrailers: [],
    aborted: false,
    upgrade: false,
    url: '/_next/data/development/index.json',
    method: 'GET',
    statusCode: null,
    statusMessage: null,
    client: Socket {
      ...略...
    }
  },
  res: <ref *1> ServerResponse {
    _events: [Object: null prototype] { finish: [Function: bound resOnFinish] },
    _eventsCount: 1,
    _maxListeners: undefined,
    outputData: [],

    ...略...

  },
  query: {},
  resolvedUrl: '/',
  locales: undefined,
  locale: undefined,
  defaultLocale: undefined
}
IncomingMessageクラス

IncomingMessageクラスはNode.jsのコアモジュールの一つであり、Node.jsでHTTPサーバーを構築する際に利用されます。

Next.jsでは、getServerSideProps()関数がサーバーサイドで実行されるためIncomingMessageクラスのインスタンスがコンテキストオブジェクトに含まれることになります。

このオブジェクトには、req、res、query、resolvedUrl、locales、locale、defaultLocaleなどのプロパティがあります。

resはhttp.ServerResponseクラスです。

contextの活用方法

context を活用することで、例えば以下のようなことができます:

  • クライアントから送信されたリクエストヘッダーの情報を取得する
  • クエリパラメーターや URL パスから取得した情報に基づいてページの挙動を調整する
  • リクエストに対して特定のレスポンスヘッダーを設定する
  • セッション管理や認証など、セキュリティに関わる処理を実装する
パスに応じたコンポーネントの動的切り替え

リクエストされた URL パスに応じてページのコンポーネントを動的に切り替えることも出来ます。

export async function getServerSideProps(context) {
  const path = context.params?.path || "/";
  let pageComponent;

  switch (path) {
    case "/about":
      pageComponent = AboutPage;
      break;
    case "/blog":
      pageComponent = BlogPage;
      break;
    default:
      pageComponent = HomePage;
      break;
  }

  return {
    props: {
      pageComponent
    }
  };
}

続く…

コメント

本記事の内容は以上になります！

続きのアウトプットも随時更新したいと思います。

間違いがありましたら修正いたしますので、ご指摘ください。

興味があれば他の記事も更新していきますので是非ご覧になってください♪


プログラミングスクールのご紹介 (卒業生より)

お世話になったプログラミングスクールであるRUNTEQです♪

https://runteq.jp/r/ohtFwbjW

こちらのリンクを経由すると１万円引きになります。

RUNTEQを通じて開発学習の末、受託開発企業をご紹介いただき、現在も双方とご縁があります。

もし、興味がありましたらお気軽にコメントか、TwitterのDMでお声掛けください。

https://twitter.com/outputky

参考