Code Handbook

How to Remove Cookies in Next.js? Recently I had a requirement to remove all cookies from the Next.js app’s domain. The Next.js page was using getServerSideProps. Here is how the code looked const deleteCookies = (cookies:any, res:any) => { try{ let cookiesArr = []; // ## iterating over the list of cookie // ## and setting max-age to 0 for(const cookie in cookies){ cookiesArr.push(`${cookie}=;Path=/;MAX-AGE=0`); } // ## reset the modified cookie list to res res. [Read More]

Fetch data from REST API in Next.js during build time to create pages in server side using getStaticProps.

In this Next.js project tutorial, you’ll learn how to fetch data in Next.js using getStaticProps. The video focus on the following points

• How to fetch data using getStaticProps
• Why use getStaticProps

Unhandled Runtime Error Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it’s defined in, or you might have mixed up default and named imports. I was getting the above error on importing a component into another component in my Next.js/React.js project. Here is the component I was trying to import. [Read More]

Recently I had integrated Google sign using AWS Cognito in my Next.js application. I had mapped the Google attributes with some custom attributes in my user pool. So custom field custom:social_gender was mapped to Google attribute genders. I had received the value in the custom gender field as encoded string. Here is a sample, '%7B%22resourceName%22%3A%22people%2FXXXXXXXXXXXXXXXXXXXX%22%2C%22etag%22%3A%22XXXXXXXXXXXXXXXXXXXXX%22%2C%22genders%22%3A%5B%7B%22metadata%22%3A%7B%22primary%22%3Atrue%2C%22source%22%3A%7B%22type%22%3A%22PROFILE%22%2C%22id%22%3A%22XXXXXXXXXXXXXXXXXXXX%22%7D%7D%2C%22value%22%3A%22male%22%2C%22formattedValue%22%3A%22Male%22%7D%5D%2C%22birthdays%22%3A%5B%7B%22metadata%22%3A%7B%22primary%22%3Atrue%2C%22source%22%3A%7B%22type%22%3A%22ACCOUNT%22%2C%22id%22%3A%22XXXXXXXXXXXXXXXXXXXX%22%7D%7D%2C%22date%22%3A%7B%22year%22%3A1901%2C%22month%22%3A1%2C%22day%22%3A1%7D%7D%5D%7D' Here is how I parsed the data, let encoded_data = '%7B%22resourceName%22%3A%22people%2FXXXXXXXXXXXXXXXXXXXX%22%2C%22etag%22%3A%22XXXXXXXXXXXXXXXXXXXXX%22%2C%22genders%22%3A%5B%7B%22metadata%22%3A%7B%22primary%22%3Atrue%2C%22source%22%3A%7B%22type%22%3A%22PROFILE%22%2C%22id%22%3A%22XXXXXXXXXXXXXXXXXXXX%22%7D%7D%2C%22value%22%3A%22male%22%2C%22formattedValue%22%3A%22Male%22%7D%5D%2C%22birthdays%22%3A%5B%7B%22metadata%22%3A%7B%22primary%22%3Atrue%2C%22source%22%3A%7B%22type%22%3A%22ACCOUNT%22%2C%22id%22%3A%22XXXXXXXXXXXXXXXXXXXX%22%7D%7D%2C%22date%22%3A%7B%22year%22%3A1901%2C%22month%22%3A1%2C%22day%22%3A1%7D%7D%5D%7D'; let parsed_data = JSON.parse(decodeURIComponent(encoded_data)); console. [Read More]

How to Read Object Properties in JavaScript Without Using Dot or Square Brackets. const calculate = (params) => { let region = params.region; let country = params.country; let name = params.name; } As seen in the above code, you can see that we are using the dot notation to read object properties. The above code is fine but we can use object destructuring to shorten the code into a clean single line. [Read More]

Static data can be fetched during build time itself in Next.js. Let’s see how. getStaticProps can be used to fetch static data in Next.js in server side and pass it on to the page during render. getServerSideProps can also be used to fetch data. But here since the data to be fetched is static it doesn’t make sense to wait till the page is requested. We can fetch static data during build time itself. [Read More]

How to fetch data from an API in Next.js Page on Request? getServerSideProps can be used to fetch data in Next.js in server side and pass it on to the page during render. Define getServerSideProps method inside the next.js page. Inside this method what ever you do will get executed only on server side and not on browser. getServerSideProps method gets executed whenever the page is requested and data is passed as props to the Page component. [Read More]

How to read environment variables in AWS lambda function in Node.js ? To read the environment variables defined in the lambda function’s configuration, you can use process.env.VARIABLE_NAME All Environment variables defined in the lambda function configuration will be available in the process.env. Reading Configuration from .env file Now instead of defining in the lambda function configuration, if you are defining it in a separate enviroment file like .env you need to load it to the environment. [Read More]

What Is DevSecOps? DevSecOps is a management approach that unifies software development (Dev), security (Sec), and operations (Ops). It involves using infrastructure as a code (IaaS) to create an automated, continuous delivery lifecycle. The goal is to integrate security into the entire DevOps process and prioritize it equally to prevent bottlenecks and minimize the attack surface. Traditionally, security is situated at the end of the software development life cycle (SDLC). However, discovering security vulnerabilities at the end of the SDLC after the product is already ready is more difficult, takes more time, increases costs, and can postpone releases. [Read More]

What is Kubernetes RBAC? If your Kubernetes journey started with a small cluster of a few team members and a few nodes, you probably granted admin privileges to everyone in your team to simplify management. However, not all users need unlimited rights to create, modify, and delete resources, and giving everyone admin access can create serious security issues. As the number of cluster nodes, applications, and team members grow, you need to limit the resources that team members and applications can access and the actions they can perform. [Read More]