Frontend Development Articles

How to Add the lang Attribute to the Root of your Next JS Website without _document.js

How to Add the lang Attribute to the Root of your Next JS Website without _document.js

Learn how to add the lang attribute to the root of your Next JS website without creating a _document.js file

Dec 21, 2022

Next.js Highlight Current Page Link – How to Highlight the Active Link in Next.js

Next.js Highlight Current Page Link – How to Highlight the Active Link in Next.js

Learn how to dynamically highlight the active link in your Next.js project navigation for improved user experience

Aug 17, 2024

The CSS var() Function – How to Create and Use CSS Variables

The CSS var() Function – How to Create and Use CSS Variables

Yes. You can declare and reuse variables in CSS by reading this article.

Dec 28, 2022

How to Use The JavaScript Intersection Observer API

How to Use The JavaScript Intersection Observer API

Everything you need to know to start using the JavaScript intersection observer API in your projects.

Sep 21, 2024

Next.js Layout Example – How to Add a Layout to your Next.js Website

Next.js Layout Example – How to Add a Layout to your Next.js Website

Master the technique of adding a unified layout across your Next.js website, featuring consistent headers, footers, and navigation.

Aug 24, 2024

Next JS Data Fetching: How to Fetch Data in a React Server Component

Next JS Data Fetching: How to Fetch Data in a React Server Component

Learn how to fetch data in React server components with Next.js for improved performance and SEO optimization
How to Create Environment Variables Inside next.config.js File and Use them

How to Create Environment Variables Inside next.config.js File and Use them

You can put your environment variables in a next.config.js file

Dec 24, 2022

Next Cloudinary – How to Integrate Cloudinary with Your Next.js Project

Next Cloudinary – How to Integrate Cloudinary with Your Next.js Project

Learn to streamline image uploads and management in Next.js projects by using Cloudinary for optimized media handling.
How to Import a JSON File in JavaScript

How to Import a JSON File in JavaScript

Learn how to import a JSON file in JavaScript, handle common errors, and explore a practical alternative.
How to Integrate MongoDB into your Next.js Applications

How to Integrate MongoDB into your Next.js Applications

Learn how to set up MongoDB with Next.js using Mongoose for dynamic, cloud-based web applications
Image with src "/location.extension" was detected as the Largest Contentful Paint (LCP) [Fixed]

Image with src "/location.extension" was detected as the Largest Contentful Paint (LCP) [Fixed]

Learn how to fix the Largest Contentful Paint warning in Next.js by optimizing image loading with the priority attribute

Aug 10, 2024

What is the HTML Role Attribute?

What is the HTML Role Attribute?

The role attribute is an important aspect of accessibility. Reading more about it in this article.

Dec 23, 2022

Next JS Routing – How to Implement File-based Routing in Next.js

Next JS Routing – How to Implement File-based Routing in Next.js

Learn file-based and nested routing in Next.js. Create folders, manage pages, and enhance navigation with layouts and active link highlights.

Sep 7, 2024

How to Highlight the Current Page Link in Astro

How to Highlight the Current Page Link in Astro

Highlighting the current page link in Astro won't be a complex feature to implement when you read this article
JavaScript Format Number as Currency – How to Format Currencies in JavaScript

JavaScript Format Number as Currency – How to Format Currencies in JavaScript

You can display currencies without manually attaching currency symbols to numbers in JavaScript

Sep 28, 2024

Astro Data Fetching: How to Fetch Data in Astro

Astro Data Fetching: How to Fetch Data in Astro

Learn about how Astro makes data fetching effortless with its built-in top-level await support

Nov 16, 2024

What are the Differences between Array and Set in JavaScript?

What are the Differences between Array and Set in JavaScript?

Learn about the differences between an array and a set in JavaScript so you can decide which to use

Dec 1, 2024

Next.js Hydration Error: Hydration failed because the initial UI does not match what was rendered on the server [Fixed]

Next.js Hydration Error: Hydration failed because the initial UI does not match what was rendered on the server [Fixed]

Hydration errors arise from mismatched server-client rendering, often caused by incorrect tags, changing data or third-party library inconsistencies.

Oct 12, 2024

What is the Difference between a .js and .jsx File in React?

What is the Difference between a .js and .jsx File in React?

A JavaScript and JSX file are not exactly the same thing. There's one notable difference between them you can learn of in this article.

May 23, 2023