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

Question

我必須在端點上發送當前語言。 但是從 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 的正確方法是什么？

Answer 1

您可以從getServerSideProps的req.headers獲取 cookie：

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

然后你可以使用cookies npm 包來解析它們：

import * as cookie from 'cookie'

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

Answer 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,
     } 
  }
}

Answer 3

你好嗎？ 你可以使用這樣的東西：

export async function getServerSideProps(context) {
  console.log(context.req.cookies)
}

如此簡單，如此美麗！

Answer 4

為了避免從context.req.headers.cookie解析 cookie 字符串，Next.js 還提供了 cookie 作為可以通過context.req.cookies訪問的對象。

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

Answer 5

如果您使用的是 Axios 這很簡單

• 這將在getServerSideProps方法中起作用。 您無法使用 withCredentials 訪問 cookie，因為它位於服務器上。

const { token } = context.req.cookies;
  const response = await axios.get('/staff/single', {
    headers: { Cookie: `token=${token};` },
  });

• 或嘗試（這將在客戶端工作）

  const response = await axios.get('/staff/single', {
    headers: { withCredentials: true },
  });

Answer 6

我們可以從沒有npm的 getServerSideProps 中的 req.headers 中獲取cookies

 export async function getServerSideProps(ctx) { 

 const data = ctx.req?.cookies['CookiesName'];
                OR
 const data_1 = ctx.req?.cookies?.CookiesName;

 console.log(data, data_1)

}