When users click on the next/link, it is triggering a problem within the getInitialProps function

Question

When users click on the next/link, it is triggering a problem within the getInitialProps function

Currently, I am attempting to include a link that will direct users to the create page. However, when I tried clicking on the link, I encountered the following error:

TypeError: Cannot read properties of undefined (reading 'cookies')

The code for the link is as follows:

<Link href={link}>Add New Employee</Link>

This snippet of code is found in getInitialProps within _app.tsx:

MyApp.getInitialProps = async (context: any) => {
    const {req, res, pathname} = context.ctx;
    const {language, auth_key} = req.cookies;

    return {
        lang: language ?? 'ar',
        token: auth_key ?? null,
    }
};

javascript next.js

Answer 1

Answer №1

To ensure your code runs seamlessly on both the server and client sides, it is essential to incorporate isomorphic code within the MyApp.getInitialProps function.

Referencing the documentation on getInitialProps:

During the initial page load, getInitialProps will execute exclusively on the server. Subsequently, when navigating to a different route using the next/link component or next/router, getInitialProps will be triggered on the client side. However, if getInitialProps is utilized in a custom _app.js file, and the destination page contains getServerSideProps, then getInitialProps will run on the server.

If you encounter an error, consider implementing the following solution. The code checks for the existence of req before accessing req.cookies. If found, the cookies are retrieved from the document instead.

// Retrieve cookie from `document` on the client-side
const getCookie = (name) => {
    const match = document.cookie?.match(new RegExp(`(^| )${name}=([^;]+)`));
    return match?.[2];
};

MyApp.getInitialProps = async (context) => {
    const { req } = context.ctx;
    const language = req ? req.cookies.language : getCookie('language');
    const auth_key = req ? req.cookies.auth_key : getCookie('auth_key');

    return {
        lang: language ?? 'en',
        token: auth_key ?? null,
    }
};

Answer 2

To ensure your code runs seamlessly on both the server and client sides, it is essential to incorporate isomorphic code within the MyApp.getInitialProps function.

Referencing the documentation on getInitialProps:

During the initial page load, getInitialProps will execute exclusively on the server. Subsequently, when navigating to a different route using the next/link component or next/router, getInitialProps will be triggered on the client side. However, if getInitialProps is utilized in a custom _app.js file, and the destination page contains getServerSideProps, then getInitialProps will run on the server.

If you encounter an error, consider implementing the following solution. The code checks for the existence of req before accessing req.cookies. If found, the cookies are retrieved from the document instead.

// Retrieve cookie from `document` on the client-side
const getCookie = (name) => {
    const match = document.cookie?.match(new RegExp(`(^| )${name}=([^;]+)`));
    return match?.[2];
};

MyApp.getInitialProps = async (context) => {
    const { req } = context.ctx;
    const language = req ? req.cookies.language : getCookie('language');
    const auth_key = req ? req.cookies.auth_key : getCookie('auth_key');

    return {
        lang: language ?? 'en',
        token: auth_key ?? null,
    }
};

When users click on the next/link, it is triggering a problem within the getInitialProps function

Answer №1

Similar questions

Shut down the pop-up in Chrome before the DOM finishes loading

What could be causing these strange white lines to show up on my AFrame meshes?

ngSanitize continues to present plain text rather than rendering HTML code

Establishing a connection to an active process within Winappdriver with the utilization of JavaScript

Exploring end-to-end testing with NestJS and Guards

Each time the web animation is utilized, it gets faster and faster

The HTML button triggers a function to execute on a different webpage when clicked

JS : Removing duplicate elements from an array and replacing them with updated values

Check if an element possesses a specific property and corresponding value in JavaScript

Leveraging a service variable in Angular

Utilize Jquery to insert the text into the input or textarea field

Creating dynamic images with animated text using PHP

Is there a way to create a JavaScript script that automatically updates a webpage for all users simultaneously?

Dynamically and asynchronously loading numerous LinkedIn share buttons on a page

Experiencing a 404 error after attempting to access an endpoint following a successful MSAL Azure AD

KnockoutJS is not recognizing containerless if binding functionality

"Why does the form.submit() function fail in IE9 when the form is in an iframe and the user is coming from Gmail

Can we activate or attach a jQuery UI event?

Is the array State not setting properly in React Native?

Troubleshooting: Issues with MongoDB Aggregation not reflecting updates in my collection