Next.js でクッキーを扱う

frontend

クッキーは基本的にクライアントサイド(ブラウザ)側で保持していますが、
ブラウザからサーバーにアクセスするたびにリクエストヘッダに埋め込まれるようです。

レスポンスヘッダにもクッキーが埋め込まれることにより、
ブラウザ側のクッキーも更新されるんでしょうか?調査中です。

サーバーサイド

export async function getServerSideProps(context) {
  const cookies = context.req.headers.cookie;
  return {
    props: {},
  };
}

You could then use the cookie npm package to parse them:

import * as cookie from 'cookie'

export async function getServerSideProps(context) {
  const parsedCookies = cookie.parse(context.req.headers.cookie);
  return { props: {} }
}

How to use cookie inside `getServerSideProps` method in Next.js?
https://stackoverflow.com/questions/63860373/how-to-use-cookie-inside-getserversideprops-method-in-next-js

クライアントサイド

import Cookies from "js-cookie";

export const signOut = () => {
  return client.delete("auth/sign_out", {
    headers: {
      "access-token": Cookies.get("_access_token"),
      client: Cookies.get("_client"),
      uid: Cookies.get("_uid"),
    },
  });
};

リダイレクト

Redirects – next.js
https://nextjs.org/docs/api-reference/next.config.js/redirects

Next.jsでリダイレクトを行う方法をまとめてみた – 2021.10.11
https://zenn.dev/uttk/articles/4649e49f1e6628

Next.jsのgetServerSidePropsでリダイレクトをする – 2020.9.3
https://www.yuyagishita.com/tech/javascript/nextjs-getserversideprops-redirect

参考記事

【Next.js】getServerSidePropsでクエリパラメータを取得する方法 – 2020年11月29日
https://qiita.com/syu_ikeda/items/9f3c2f041a1031651c61

getServerSidePropsでURLのパラメータ取得する方法 – 2021年12月31日
https://off.tokyo/blog/getserversideprops-url

getServerSideProps – next.js
https://nextjs.org/docs/api-reference/data-fetching/get-server-side-props

Next.jsとFirebaseでCookieを使った認証処理を実装する – 2021.10.11
https://zenn.dev/uttk/articles/f48fc75120f018

[Next.js] getServerSideProps でパラメータを受け取る – 2022年2月4日
https://www.sukerou.com/2022/02/nextjs-getserversideprops.html

コメント

タイトルとURLをコピーしました