Session management in Next.js

Question

I am using nextjs in my reactjs project. In nextjs the getInitialProps() is called on the serverend for the first page load, and because of that we cannot access the localstorage to get sessions. How can we manage sessions properly with nextjs.

Answer 1

You can use cookies to store the session.

Here is an example:

Client-side

import jsCookie from 'js-cookie';

const result = await api.login(user, pwd);

if (result.status === 200) {
  jsCookie.set('token', result.token);
}

Server-side

import jsHttpCookie from 'cookie';

class MyPage extends Component {

  static async getInitialProps({ req }) {
    const initProps = {};

    if (req && req.headers) {
      const cookies = req.headers.cookie;

      if (typeof cookies === 'string') {
        const cookiesJSON = jsHttpCookie.parse(cookies);

        initProps.token = cookiesJSON.token;
      }
    }

    return initProps;
  }

}