nextjs-getserversideprops-redirect

勉強用にNext.jsで個人開発をしていて、cookieに値がない時トップ画面にリダイレクトする実装をしたかったのですが、参考にできる情報が少なかったので記事にしました。

リダイレクト方法

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17

import { parseCookies } from "nookies";
import { GetServerSideProps } from "next";

// ...

export const getServerSideProps: GetServerSideProps = async (context) => {
  const cookies = parseCookies(context);
  const userId = typeof cookies.userId === "undefined" ? "" : cookies.userId;
  if (userId === "") {
    context.res.writeHead(302, { Location: "/" });
    context.res.end();
  }

  return {
    props: {},
  };
};

cookieにuserIdを仕込んでいて、userIdがなかったらログインしていないとみなしてトップ画面に戻す実装をしました。

最後に

RFC: Returning redirects from getServerSideProps / getStaticProps にもあるようにgetServerSidePropsでリダイレクトする方法が書かれていますが、うまく実装ができなかったのでレスポンスを書き換える感じの実装にしました。
Next.js関連は日本語の記事が少ないので、情報を探すのが大変ですね。