CODEWITHSUNDEEP
reactjsnext.js
Hooshyar Qaderi
Hooshyar Qaderi

Reputation: 141

why req is undefined after Router.push('url') call . (Unhandled Rejection (TypeError): Cannot read property 'headers' of undefined.)

im new in next.js. i want get cookies after router.push(/* another page */)

in index.js:

Router.push('./browse');

in browse.js:

static async getInitialProps({req,res}) {
     console.log(req.headers.cookie); // Unhandled Rejection (TypeError): Cannot read property 'headers' of undefined.
}

Upvotes: 0

Views: 802

Answers (1)

Tibi02
Tibi02

Reputation: 697

You need to create 2 separated function to get cookies from client side and server side as well. My recommendation is to use js-cookie npm package to get cookies on client-side. All of it together:

// utils/cookie.js
import cookie from 'js-cookie';

const getCookieFromBrowser = key => cookie.get(key);

const getCookieFromServer = (key, req) => {
  if (!req.headers.cookie) return false;

  const rawCookie = req.headers.cookie
    .split(';')
    .find(c => c.trim().startsWith(`${key}=`));
  if (!rawCookie) return false;
  const [, token] = rawCookie.split('=');
  if (!token) return false;

  return token;
};

export const getCookie = (key, req) => {
  if (process.browser) return getCookieFromBrowser(key);
  return getCookieFromServer(key, req);
};

// component
import React from 'react';
import { getCookie } from './utils/cookie'

const Page = (props) => <h1>Page</h1>;

Page.getInitialProps = ({ req, res }) => {
  const token = getCookie('token', req);
  console.log(token)
};

export default Page;

Upvotes: 3

Related Questions