如何在 Next.js 的 `getServerSideProps` 方法中使用 cookie？答案

【问题标题】：How to use cookie inside `getServerSideProps` method in Next.js?如何在 Next.js 的 `getServerSideProps` 方法中使用 cookie？
【发布时间】：2020-12-30 18:18:30
【问题描述】：

我必须在端点上发送当前语言。但是从 Cookie 中获取语言会在 getServerSideProps 中返回 undefined。

export async function getServerSideProps(context) {
    const lang = await Cookie.get('next-i18next')
    const res = await fetch(`endpoint/${lang}`)
    const data = await res.json()

    return {
        props: { data },
    }
}

export default Index;

在getServerSideProps 中获取cookie 的正确方法是什么？

【问题讨论】：

标签： javascript cookies next.js server-side-rendering

【解决方案1】：

你可以从req.headers里面的getServerSideProps获取cookies：

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

然后你可以使用cookie npm 包来解析它们：

import * as cookie from 'cookie'

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

【讨论】：

【解决方案2】：

您可以将parseCookies 函数与cookie 包一起使用

import cookie from "cookie"

function parseCookies(req){
    return cookie.parse(req ? req.headers.cookie || "" : document.cookie);
}

然后像这样获得访问权限。

export async function getServerSideProps({ req} ) {
  const cookies = parseCookies(req);

  // And then get element from cookie by name
  
  return { 
     props: {
        jwt: cookies.jwt,
     } 
  }
}

【讨论】：

【解决方案3】：

为避免解析来自 context.req.headers.cookie 的 cookie 字符串，Next.js 还提供了 cookie 作为可通过 context.req.cookies 访问的对象。

export async function getServerSideProps(context) {
    const lang = context.req.cookies['next-i18next']
    
    // ...
    
}

来自getServerSideProps documentation：

传递给getServerSideProps 的上下文中的req 提供内置解析传入请求的中间件 (req)。该中间件是：

req.cookies - 包含请求发送的 cookie 的对象。默认为{}

【讨论】：