SPAでページアクセス時のHTTPヘッダーを取得(Next.js)

今回もNext.js関連です。

もともとReactで開発していましたが、
ページにアクセスしたときのHTTPリクエストヘッダーを取得できなくて、
Next.jsに変更せざるを得なくなったので。

環境

Next.jsなどのバージョンはpackage.jsonをそのまま貼り付けておくのでご参考に。

package.json

{
  "dependencies": {
    "next": "12.1.0",
    "nookies": "^2.5.2",
    "react": "17.0.2",
    "react-dom": "17.0.2"
  },
}

※今回はHTTPヘッダーを取得したらそれをそのままcookieに保存したかったので、
　「nookies」というライブラリをインストールしています。
https://github.com/maticzav/nookies

それではやっていきます

_app.jsにgetInitialPropsを記述します。

_app.js

import App from 'next/app';
import nookies from 'nookies';

const MyApp = ({ Component, pageProps }) => {
  return (
    <>
      <Component {...pageProps} />
    </>
  );
}

MyApp.getInitialProps = async (appContext) => {
  const appProps = await App.getInitialProps(appContext);
  const { ctx } = appContext;
  const isServer = !!ctx.req;
  if (isServer) {
    console.log(ctx.req.headers.host);
    nookies.set(ctx, 'host', ctx.req.headers.host);
    nookies.set(ctx, 'aaa', ctx.req.headers['aaa']);
  }
  appProps.pageProps = { ...appProps.pageProps };
  return { ...appProps };
}

export default MyApp

以上です。(笑)

ちょっと解説します

まず、getInitialPropsはサーバサイドでもクライアントサイドでも両方動くので注意が必要です。
サーバサイドの場合、appContext.reqが存在するので、
まずはreqを見てサーバサイドかどうかを判定しています。（isServerに入れている）

サーバサイドであれば、req.headersの中の必要なヘッダーを取得できるというわけです。
「Host」の値であればctx.req.headers.host、
カスタムヘッダー「aaa」の値であればctx.req.headers['aaa']とします。

上記のコードでは、nookies.setでcookieに保持するところまでやっています。
（nookiesの使い方は割愛します）

_app.jsに上記を仕込むことで、どのページからアクセスしても
全画面共通でこの処理をやってくれます！

さいごに

SSRの時だけ実行したかったので、getServerSidePropsでやろうとしましたが、
うまくいかずに断念しました。
この辺りはまだ勉強中なので、何か分かったらまた更新します。