Error “localStorage is not defined” in NextJs – how to fix it

Let's say we want to build a popup component in NextJs that does something based on a value set in the localStorage. Something like this: export default function Popup() { const status = localStorage.getItem('status') // do stuff based on the status ... more

Javascript includes() multiple values

The Javascript array includes() function will return true if a value is found in an array or false otherwise. But is it possible to add multiple conditions to this function? Something like this: myArray.includes("one", "two", "three") ... more

Deploying your first NextJs app to GitHub pages

GitHub pages can be a simple and easy-to-use hosting solution for your NextJs learning projects. Let's see how we can deploy a first Hello world app to GitHub Pages. First, we will need to create a blank new GitHub repo. I will name the repo nextjs-helloworld ... more

Using the pages/api in NextJs to create endpoints

We have seen how one can use the /pages folder to make basic routes and query params routes in NextJs. But, there is also another special folder called /pages/api . Using it we can create endpoints for our NextJs app. Each file from this folder will ... more

Detecting the active Link in NextJs

One common thing we need to do is to highlight the active Link in the navigation of a NextJs app. For this example, we will begin from this basic code repository. The initial app looks like this: We have 2 basic pages /pages/index.js and pages/about.js ... more

[Js-Craft #31] A new course about NextJs, optimizing custom fonts loading performance, and more

I've started a few weeks ago to read about and learn NextJs. And the more I dig into it the more I like it. I think it's a great tool for building SEO-friendly React apps, and overall it's super elegant to use. Was considering making a course about NextJs. ... more

Setting the page title and metadata in NextJs

Let's take the following code: import { useRouter } from 'next/router' function BlogPostPage() { const router = useRouter() let {title} = router.query const formatedTitle = title?.replace(/-/g, ' ') return (<h1>{formatedTitle}</h1>) } export ... more

Using the font-display CSS property to optimize custom fonts loading

The custom fonts are great! They give us have unlimited typography options, but they also make our pages slower because we need to download them. They even cause something called FOUT - flash of unstyled text. This means that while the browser downloads ... more

Absolute paths imports in NextJs

Do you find yourself writing Nextjs components imports paths like the one below? import SiteNav from '../../components/common' export default ()=> { <SiteNav /> } If the answer is yes, then you can benefit from the absolute paths imports feature. ... more

Components vs pages in NextJs

We usually have a ton of info on a real page. We need different components to present and organize this information. For example, let's say we have a contact.js page with the following content. export default () => { return(<div> <h1>Contact ... more

[Js-Craft #30] Rebooting the newsletter, NextJs articles and more

It has been quite some while since when I've last sent a JsCraft newsletter. It has been a mix of too much work at my day job, a bit of burnout and general fatigue from working from home, and too much screen time. But, overall I've realized that I miss ... more

Using the _app.js file in Nextjs to add common template parts

Whenever you have a component that needs to be present on all your pages the _app.js file may be of help. Let's say we have the following project structure: /components header.js footer.js /pages about.js contact.js index.js We need the header and footer ... more

Selecting the full text with just one click in CSS

In CSS we can use the user-select property to decide how the user can select the text. By default, a user has to drag and hold the cursor to select the wateded text. But thanks to the user-select prop we can select a full text with just one click: .select-all-text ... more

Is there a difference between DOM Node and Element?

Driven by a strange curiosity I've spent some time reading why we have both the Node and Element notations, and if there is a difference between them. This is what I've discovered: An HTML document is made of multiple nodes, organized as a tree structure, ... more

When to use the img, figure or picture html tags

When it comes to showing images we have multiple choices. The img , figure , or picture do the same thing, but in different ways. Knowing when to use each of them leads to better semantics and SEO in our web pages. Using the plain old img tag The scope ... more

The CSS grid minmax() function explained

What if we have a scenario where we need a layout made of 3 columns with the following behavior: the first column can go anywhere from 100px to a maximum of 300px, depending on the screen of size of the screen the second and third columns will take 50% ... more

Screencast – building a fully responsive layout in 4 minutes by using the CSS grid

I've received quite a lot of feedback for the Making a responsive CSS grid layout with just 3 properties article published a few weeks ago. So I've decided to record a small screencast with that content in action. Hope you like it: ... more

Links, ideas, news roundup #5

A few more weeks have passed and some links to some cool stuff have started to pile up in my bookmarks. So, let's see: On the Code with Jason podcast found a great conversation between Jason Swett and Peter Cooper about building a successful career by ... more

Stacking elements on top of each other with CSS grid

Even dough I don't believe the CSS grid was designed especially for stacking elements one on top of each other this can be achieved easily with a combination of grid-area and z-index . Let's say we want to build the below widget. This can be described ... more

What is an executor function for a Javascript promise?

We can pass an executor function to the constructor of a Javascript native promise. It takes two parameters: the resolve and rejects callouts of that promise: new Promise( () => {...} ).then ( ... ); Based on our needs we can customize the behavior ... more

Getting the value of the content property of ::after or ::before with Javascript

Let's say we have the following CSS declaration: #myElement::before { content: " <- Javascript is cool!"; color: green; } We want to be able to read the value of the content property. The " <- Javascript is cool!" string. In ... more

The grid layout: the grid-column and grid-column properties are using line numbers

When placing elements in a CSS grid it's very important to remember that the grid is using the lines number to place the elements. Take for example the following layout. For the columns, we have 4 lines . So, for the footer element when we are declaring ... more