如何在 Nextjs 中包含 cookies 和获取请求

Question

Consider the following code

Index.getInitialProps = async function({req}) {
  const res = await fetch("http://localhost/api/tiles");
  const json = await res.json();
}

Suppose the /api/tiles endpoint needs access to the uid cookie on the user. Normally, one would do {credentials: "include"} . But how do I do this in Next.js?

Answer 1

As you are using React (NextJS is built on ReactJS) you can use react-cookie to get and cookies that are stored in the system.

Install react-cookie

npm install react-cookie

If you are using Reactjs with version >= 16.8.0 you can use React hooks.

const [cookies, setCookie, removeCookie] = useCookies(['cookie-name']);

You can set cookie with setCookie(name, value, [options]) and get the cookies with cookie.get(name, [options])

So in your case the code should look like

import { useCookies } from 'react-cookie';
const [cookies, setCookie] = useCookies(['name']);

Index.getInitialProps = async functon({req}) {
  cookie = cookies.get(name)
  const res = await fetch("http://localhost/api/tiles", cookie);
  const json = await res.json();
}