Calebbenjamin Blog

How to Approach Frontend Performance in 2025 (and Why It Still Matters)

Caleb Benjamin — Fri, 18 Apr 2025 23:08:55 GMT

This guide is for frontend developers, senior engineers, tech leads, and performance-focused product teams who want to build faster, more scalable, and user-first web applications in 2025. Whether you're working with React, Next.js, Vue, or Svelte, the principles in this post will help you make smarter decisions about speed, architecture, and experience.

If you care about shipping apps that don’t just work, but wow—this is for you.

Web performance in 2025 is no longer just about page speed. It's about delivering experiences that feel fast, reliable, and responsive—across devices, network conditions, and user expectations.

We're building more dynamic and complex interfaces than ever before, and users aren’t just comparing your app to competitors—they’re comparing it to TikTok, YouTube, and ChatGPT.

That means performance isn’t just a technical metric. It’s a product decision.

In this article, I’ll walk you through how I approach performance as a senior frontend engineer today—from architecture to tooling to culture.

1. Start With User Experience, Not Lighthouse

Before I open any performance profiler or run Lighthouse, I ask:

How fast does the app feel to a real user?
Does the page show something useful immediately?
Are clicks and scrolls smooth?
Do transitions feel instant?

Performance is a perceived experience. You can score a 95 on Lighthouse and still feel slow if the first contentful paint doesn’t show something useful.

2. Architecture is the Foundation of Performance

Great performance starts with how you structure your app.

That means picking the right rendering strategy:

SSR for dynamic content with SEO
SSG/ISR for speed at scale
SPA for simple flows (but lazy-load carefully)

Also consider:

Server components (in React 19+)
Edge rendering with Vercel or Cloudflare
CDN-first asset and data delivery

Performance should be baked into your system design—not patched later.

3. Audit Before You Act

Performance tuning without data is like fixing a car with a blindfold on.

Here are my go-to tools:

Chrome DevTools – Performance tab + Lighthouse
WebPageTest.org – for real-world scenarios
Next.js built-in analytics
next/web-vitals – to measure real user metrics
React Profiler – for rendering issues

Always benchmark before and after changes.

4. Modern Tools Give You Superpowers

We’re no longer in the 2015 jQuery days. Most frameworks today come with performance baked in—you just have to use them right.

If you're using Next.js:

next/image handles image optimization
app/ directory with server components = less JS sent to client
API routes can run at the edge
Automatic static optimization with ISR

Don’t fight the framework—leverage it.

5. Optimize the Critical Path

Once your architecture is sound, optimize what matters most to perceived speed.

Images:

Use next/image, WebP or AVIF
Compress + lazy-load images
CDN delivery for fast loading

Fonts:

Use system fonts where possible
Subset and self-host if using custom fonts
Add font-display: swap for instant rendering

JavaScript:

Avoid huge bundles (tree-shake!)
Use dynamic imports for code splitting
Drop bloated libraries (e.g., moment.js → day.js)

CSS:

Purge unused styles
Use Tailwind or CSS modules
Minimize layout shifts from animations

6. Understand and Control Renders

React and Vue apps often suffer from unnecessary re-renders.

Be intentional:

Use React.memo, useMemo, and useCallback
Flatten your component tree
Avoid lifting state too high
Profile components with the DevTools

Sometimes switching to Zustand, Jotai, or Signals can massively reduce render frequency compared to Context or Redux.

7. Don’t Forget Network + Backend

A blazing-fast frontend can still feel slow if the backend is lagging.

Use API caching with stale-while-revalidate strategies
Use GraphQL persisted queries to reduce overfetching
Minimize client-side waterfall requests
Deliver static content and JSON via CDNs

Frontend performance is full-stack.

8. Build a Performance Culture

The best engineering teams don’t fix performance once—they bake it into how they build.

Add Lighthouse checks to your CI/CD pipeline
Track web vitals with tools like Vercel Analytics or Datadog RUM
Set performance budgets
Make performance a KPI alongside features and design

Performance shouldn’t be an afterthought—it should be part of your definition of done.

Final Thoughts

In 2025, web performance isn’t a niche skill—it’s a competitive edge.

As engineers, we owe it to our users and our teams to build experiences that are not just functional, but fast, responsive, and delightful.

Because performance isn’t just about the code—it’s about how people feel when they use what you built.

What performance practice changed how you build apps? Let’s trade tips in the comment

Mastering Redux Toolkit: A Step-by-Step Tutorial for New Developers.

Caleb Benjamin — Sat, 22 Apr 2023 21:46:21 GMT

In the world of building large applications, one of the biggest challenges, especially for teams of developers, is managing the state. While the Context API is useful, it has its limits, especially for applications with many features. To address this, several state management tools have been introduced, but Redux has emerged as a leading solution.

It is worth noting that Redux is not part of ReactJS, despite being frequently used together. While Redux solves many problems, it also introduces new challenges. Setting up a Redux store and writing reducers can be a cumbersome and error-prone process that involves a lot of boilerplate code and manual configuration. This is where the Redux Toolkit comes in - the creators of Redux recognized the need for a more opinionated approach to setting up Redux applications, resulting in the development of the Redux Toolkit, which can be thought of as Redux with batteries included.

The Redux Toolkit eliminates the need for additional libraries and configurations, speeding up the workflow significantly. With the Redux Toolkit, users can benefit from Redux without having to deal with manual setups.

This article will cover all the essential building blocks of the Redux Toolkit. Specifically, we will be developing a shopping cart application that allows users to add and remove items, displaying the total price of the items in their cart. We will explore many of the features of the Redux Toolkit, including Store, Slice, Reducers, and Action Creators.

What we will cover

Setting up the Project
Installing Redux Toolkit
Creating the Redux Store
Setup Provider
Creating the Cart Slice
Creating the UI Components
Rendering the App
Running the App
Conclusion

Step 1: Setting up the Project

We will start by creating a new React project using Create React App. Open up your terminal and run the following command:

npx create-react-app shopping-cart

Once the project is created, navigate to the project directory:

cd shopping-cart

Step 2: Installing Redux Toolkit

Next, we need to install Redux Toolkit. Run the following command in your terminal:

npm install @reduxjs/toolkit react-redux

This will install the latest version of Redux Toolkit and add it to our project dependencies. Redux can be used for any frontend framework and is not specific to react, so in order to connect our Redux with react this is where the react-redux comes in.

Just a side note: When we install @reduxjs/toolkit we actually installed a few libraries which are:

- redux (core library, state management)
- immer (which allow us to mutate the state)
- redux-thunk (which will handles the async actions)
- reselect (which will simplifies the reducer functions)

All these will make sense if you have worked with Redux, but if you haven't worked with Redux before don't worry I will explain all of those as we go.

As an extra, we also get:

- redux devtools
- combine reducers

Step 3: Creating the Redux Store

You are going to think of the store as the entire state of your application.
Create a new file called store.js in the src directory and add the following code:

import { configureStore } from '@reduxjs/toolkit'; 
import cartReducer from './features/cart/cartSlice';

export default configureStore({ 
    reducer: { 
        cart: cartReducer, 
    }, 
});

This code imports the configureStore function from Redux Toolkit and our cartReducer from a file that we will create in the next step. It then exports the configured Redux store.

Step 4: Setup Provider

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';

// import store and provider
import { store } from './store';
import { Provider } from 'react-redux';

ReactDOM.render(
  <React.StrictMode>
    <Provider store={store}>
      <App />
    Provider>
  React.StrictMode>,
  document.getElementById('root')
);

Next, we import the store and Provider and then wrap the entire application with the Provider and pass the store as props.

Step 5: Creating the Cart Slice

I want you to think of slice as the features of your application for example increasing and decreasing the number of items in the cart or triggering a modal. The bigger the application the more features we are going to have. And in the Redux toolkit land, it is called slice.

To setup a slice, a common convention is to create a features folder, Create a new directory called features in the src directory, and inside it, create a new directory called cart. Inside the cart directory, create a new file called cartSlice.js and add the following code:

import { createSlice } from '@reduxjs/toolkit';

export const cartSlice = createSlice({
  name: 'cart',
  initialState: [],
  reducers: {
    addToCart: (state, action) => {
      const index = state.findIndex(item => item.id === action.payload.id);
      if (index !== -1) {
        state[index].quantity += 1;
      } else {
        state.push({ ...action.payload, quantity: 1 });
      }
    },
    removeFromCart: (state, action) => {
      const index = state.findIndex(item => item.id === action.payload);
      if (index !== -1) {
        state.splice(index, 1);
      }
    },
    incrementQuantity: (state, action) => {
      const index = state.findIndex(item => item.id === action.payload);
      if (index !== -1) {
        state[index].quantity += 1;
      }
    },
    decrementQuantity: (state, action) => {
      const index = state.findIndex(item => item.id === action.payload);
      if (index !== -1) {
        state[index].quantity -= 1;
        if (state[index].quantity === 0) {
          state.splice(index, 1);
        }
      }
    },
  },
});

export const { addToCart, removeFromCart, incrementQuantity, decrementQuantity } = cartSlice.actions;

export default cartSlice.reducer;

export const selectCart = state => state.cart;

export const selectCartTotal = state => state.cart.reduce((total, item))

Let's understand what's happening in the code above.
The cartSlice.js contains the initial state of an empty array and several reducer functions for adding, removing, and updating items in the cart.

The addToCart reducer function checks if the item being added already exists in the cart by checking if its id matches any existing items in the cart. If it does, it increments the quantity of that item. If not, it adds the new item to the cart with a quantity of 1.

The removeFromCart reducer function removes an item from the cart by finding the index of the item with the id that matches the payload of the action being dispatched. If the item is found, it is removed from the cart using the splice method.

The incrementQuantity reducer function increments the quantity of an item in the cart by finding the index of the item with the id that matches the payload of the action being dispatched and incrementing its quantity.

The decrementQuantity reducer function decrements the quantity of an item in the cart by finding the index of the item with the id that matches the payload of the action being dispatched and decrementing its quantity. If the quantity of the item becomes 0, the item is removed from the cart using the splice method.

The cartSlice.actions object exports the four reducer functions defined in the reducers property of the createSlice function.

The selectCart and selectCartTotal functions are selectors that are used to access the cart slice of the Redux store and compute the total price of all items in the cart.

Finally, the export default statement exports the cartSlice.reducer function, which is used to create the Redux store for the shopping cart.

Overall, this code defines the structure and behavior of the shopping cart slice.

Step 5: Creating the UI Components

Now that we have our Redux store and cartSlice set up, we can start building the UI components for our shopping cart application. In the src directory, create a new directory called components. Inside the components directory, create a new file called Cart.js and add the following code:

import React from 'react';
import { useSelector, useDispatch } from 'react-redux';
import {
  selectCart,
  selectCartTotal,
  addToCart,
  removeFromCart,
  incrementQuantity,
  decrementQuantity,
} from '../features/cart/cartSlice';

const Cart = () => {
  const cart = useSelector(selectCart);
  const total = useSelector(selectCartTotal);
  const dispatch = useDispatch();

  const handleAddToCart = item => {
    dispatch(addToCart(item));
  };

  const handleRemoveFromCart = id => {
    dispatch(removeFromCart(id));
  };

  const handleIncrementQuantity = id => {
    dispatch(incrementQuantity(id));
  };

  const handleDecrementQuantity = id => {
    dispatch(decrementQuantity(id));
  };

  return (
    <div>
      <h2>Shopping Carth2>
      {cart.length === 0 ? (
        <p>Your cart is empty.p>
      ) : (
        <>
          <ul>
            {cart.map(item => (
              <li key={item.id}>
                <div>
                  <span>{item.name}span>
                  <button onClick={() => handleRemoveFromCart(item.id)}>-button>
                  <span>{item.quantity}span>
                  <button onClick={() => handleIncrementQuantity(item.id)}>+button>
                  <span>${item.price * item.quantity}span>
                div>
              li>
            ))}
          ul>
          <p>Total: ${total}p>
        
      )}

      
      <button onClick={() => handleAddToCart({ id: 2, name: 'Item 2', price: 20 })}>Add Item 2 to Cartbutton>
    
  );
};

export default Cart;

This code defines a Cart the component that uses the useSelector and useDispatch hooks from React Redux to access the cart state and dispatch actions to the Redux store. It also defines several event handlers for adding and removing items from the cart and updating item quantities.

Step 6: Rendering the App

Finally, we need to render our Cart component in our App component. Open up the App.js file in the src directory and replace the existing code with the following:

import React from 'react';
import './App.css';
import Cart from './components/Cart';

function App() {
  return (
    <div className="App">
      <Cart />
    div>
  );
}

export default App;

This code simply renders our Cart component in the App component.

Step 7: Running the App

With our project setup and our code written, we can now run our shopping cart application. Open up your terminal and run the following command:

npm start

This will start the development server and open up the shopping cart application in your browser.

Conclusion

In this article, we learned how to use Redux Toolkit to simplify the process of creating a Redux store and how to build a shopping cart application using React and Redux Toolkit. We created a cartSlice that contained the reducer, actions, and selectors

5 reasons why you need to start writing Test-driven development (TDD)

Caleb Benjamin — Sun, 22 Jan 2023 10:27:02 GMT

Writing tests for your app helps to ensure that your code is functioning correctly and is free of bugs. This improves the overall quality of your app, making it more reliable and user-friendly.

1. Improve code quality:

Writing tests for your app helps to ensure that your code is functioning correctly and is free of bugs. This improves the overall quality of your app, making it more reliable and user-friendly. writing test also helps you write cleaner, more maintainable code by ensuring that each piece of functionality is thoroughly tested and working as intended. Making it more reliable and stable.

2. Fast Development:

TDD allows you to write code faster by breaking it down into smaller, testable chunks. This helps you focus on one piece of functionality at a time, rather than trying to tackle a whole project all at once. By writing tests, you can quickly identify issues and bugs in their code, allowing them to fix them more quickly. This can help to speed up the development process and get your app to market faster.

3. Better Scalability:

Test help to ensure that your code can handle increasing amounts of data and users. This is important for apps that are expected to grow in popularity and usage, as it ensures that they can handle the increased demand.

4. Better Documentation:

TDD helps you document your code by providing a clear and concise description of how each piece of functionality is supposed to work. They can make it easier for others to understand and maintain your code, even if they are not familiar with the specific language or framework you are using.

5. More Robust Code:

TDD helps you write more robust code by catching errors and bugs early on in the development process. This can help you avoid costly and time-consuming bugs that can be difficult to fix later on. Additionally, TDD can you help you identify edge cases and potential issues that you may no have thought of otherwise, helping you write more resilient code that can handle unexpected situations.

Conclusion

Please let me know more reasons why we need TDD in the comments section below. I'll had like to know your reasons as well so I can pass them on to other developers like myself.😊

10 Advance React Do's and Don'ts

Caleb Benjamin — Thu, 06 Oct 2022 07:21:20 GMT

Learning is a never-ending journey, as a developer you must learn to un-learn and re-learn new things every day. It should be a norm as developers to search google for best practices so we can write clean, scalable, and maintainable code and also be productive. In this article I will show you 10 react do's and don'ts, to help you start building optimizable production-ready applications when using react.

NOTE: These are my personal preference from my 5years of writing react, I hope these help you become a better react developer or javascript engineer in general.

📚What you will learn

The DOs

Use TypeSctript
Use a query library
Learn to make custom hooks
Learn to get used to dependency arrays
Use functional components over class components
Use Next.js for server-side rendering and Gatsby for static websites

The DON'Ts

Don't use React Fragment
Don’t make your own UI library
Don’t ignore useCallback or useMemo
Don’t use Redux just because you think you have to

The DOs

🎯Use TypeSctript

Use Typescript when building your react app, it helps you make more robust, reliable, and easy to maintain applications. So why are you not using TS in your react app? it has saved me so many times from run-time errors and I have only been using it for a year now. TypeScript is absolutely worth using in your react app.

🎯Use a query library

Speaking of query libraries I highly recommend you use them. Use something like React-Query, SWR - these are fantastic query libraries that do more than just fetching, they give you a lot right out of the box. They allow fetching, caching, or re-fetching data in real-time, and re-fresh on an interval. They also have useMutation that makes it possible to do post requests and is super simple. My strong recommendation to you is to use them if you want to access any API.

🎯Learn to make custom hooks

Do learn to make and use your own custom hooks. Custom hooks are collections of hooks gathered together as a function that accomplishes a specific task.

🎯Learn to get used to dependency arrays

Learn to love dependency arrays, at least deal with them, or don't hate them quite so much 😊. So dependency arrays are the arrays at the end of useEffect, useCallback, and useMemo, and they tell react when a useEffect should run if any of the items in that dependency array change then your useEffect will re-run, and useEffect is the one that gives people more grief.

Here are some rules to help you

Rule #1 Add anything you read from that array
Rule #2 Check what you write in the dependency array
Rule #3 Don't disable the lint-rule

🎯Use functional components over class components

Don't use class components, but if you are still using class components or you are new to React, I highly recommend starting with the functional component. Let me give you some reasons.

Functional Components are the future of React, take a look at their documentation site where is really hard to find a class component, even on their new beta site is nearly impossible to find a class component, why does it make sense?
Functional Component has a better state mechanism than class-based components. Functional components use hooks and those hooks create reactive state management baked right in to react. Using useState and useReducer you can declare your state, and then using useEffect and useCallback and useMemo you react to changes in the state. Those 5 little hooks can create an amazing ecosystem of super awesome hooks. There are hooks for calling an API, for doing external state management, for CSS, Animations, and everything you can think of has a hook. You won't get access to any of that if you are using class components.
Is harder to build applications with functional components and hooks, there's a deeper learning curve, so if you start it is pretty easy to fall back to class-based components if you find yourself on a project that uses them.

If you are just starting out and you are currently learning class-based components, I highly recommend using functional-based components.

🎯Use Next.js for server-side rendering

I will highly recommend you use Next.js instead of pure react. If you are concerned about the SEO in your application then go with next.js. Next.js gives you the best developer experience with all the features you need for production: hybrid static & server rendering, TypeScript support, smart bundling, route pre-fetching, and more. No config is needed.

The DON'Ts

🎯Don't use React Fragment

Don't use React Fragment, This causes increased DOM depth causing DOM manipulation slower.

🎯Don’t make your own UI library

Here is the one that's so dear to my heart, Don't build your own UI library, react has an amazing ecosystem of UI libraries, there is MaterialUI, Bootstrap, Auntd, Tailwind, ChakraUI, and Mantine. These are fantastic UI libraries that come out of the box with most of the components you will be needing, plus they are scalable, themeable, and internationalizable. They have great documentation and a whole user community around them that make it very easy to use them. Most importantly some of these libraries, particularly MateriaUI come with templates for a lot of designers' favorite tools like Figma. There's a Figma template for material-UI and it is great at what it does, it allows designers to specify the UI for a component by just dragging and dropping it, and those mockups are exact. I think is just a much better way to communicate with the design team and the development team. You will lose all these if you build your own UI library.

🎯Don’t ignore useCallback or useMemo

Don't ignore useCallback or useMemo. Some advice that went around about how useCallback and useMemo impact the performance of a react app, but that is not 100% true. Yes, they are vital to the reactive state management for react, and when used properly to retain referential identity, it can be a performance enhancement to your react app. Let's take a look at the two hooks and their few use case.

useMemo: is used if you are computing an array or an object because those are maintained by reference and you want to maintain that referential identity.
useCallback: is used in two cases. 1. is where you want to keep your callback function from being stale. and 2. is when you want to retain the referential identity of those callbacks.

🎯Don’t use Redux just because you think you have to

When you are thinking about building out your applications and you are thinking about choosing your state management model, my recommendation to you is to start with React state management (Context and Hooks) and see how far that can take you, they may actually be enough. If not enough then go for API requests and use query libraries like React-Query, and SWR. These are strong state management with their caches that might be enough, with a combination of React-Context plus React-Query, and SWR. If you're doing forms then use form libraries like React-Hook-Form or Formik which also maintain state. The combination of all these hooks might be enough for a state management system for your application. But if that doesn't do it then you can use Redux or ReduxToolKit.

Conclusion

How did I do? did I get your own Dos? did I get your own Don'ts? Please let me know in the comments section below. I'll had like to know what dos and don'ts you have to pass on to other react developers like myself.😊

5 important features you must master in CSS

Caleb Benjamin — Tue, 04 Oct 2022 09:40:48 GMT

Introduction

Hello Guys, in this article you are going to know the 5 CSS properties and features you need to master, once you master these features I assure you that you can be able to build any UI design that comes your way, from basic to advance designs.

Prerequisites

This article is for total beginners and for intermediate-level developers that want to sharpen their skills in CSS.

What you will learn

What is CSS
Margin and Padding
- Use case
- Helpful resources
Positioning
- Types of Positioning
- Helpful resources
Flexbox?
- Features of flexbox
- Flexbox properties
CSS Grid
- Helpful resources
Media Queries
- Helpful resources

What is CSS?

CSS stands for Cascading Style Sheet, and it is simply used to style web pages. CSS has over 259 properties used for styling and in all these large numbers of properties, there are few that are used on a daily bases, and without them, we can't build a standard design.

These few CSS properties are:

Margin & Padding
Positioning
Flexbox
Grid
Media Queries

Margin & Padding

Understanding how margin and padding work is very simple and important. Margin is the space around all HTML elements, While Padding is the space inside the HTML elements.

Use cases

You can use a margin to ensure that other elements aren't too close to the element in question. You can use padding to make space inside the element itself.

Helpful rescourse

Margin and Padding Deep Dive: The basics

How CSS Padding and Margin Works

Positioning

Positioning an element is another important feature in CSS, positioning will help you achieve some cool design patterns when designing. The CSS position property defines the position of an HTML element in a document. This property works with the left, right, top, bottom, and z-index properties to determine the final position of an element on a page. Note that by default, the position property for all HTML elements in CSS is set to static. This means that if you don't specify any other position value or if the position property is not declared explicitly, it'll be static

Types of Positioning

Position Relative
Position Absolute
Position Fixed
Position Sticky
Position Static

Helpful resources

CSS Position Tutorial | Learn CSS For Beginners

CSS Positioning: Position absolute and relative explained

Flexbox

The flexbox or flexible box model in CSS is another key feature to master, it is a layout model that provides an easy and clean way to arrange items within a container. Flexbox can be useful for creating small-scale layouts & is responsive and mobile-friendly.

Features of flexbox:

A lot of flexibility is given.
Arrangement & alignment of items.
Proper spacing
Order & Sequencing of items.

Flexbox properties:

Display: flex
Flex-direction: row | row-reverse | column | column-reverse
align-self: flex-start | flex-end | center | baseline | stretch
justify-content: start | center | space-between | space-around | space-evenly

Helpful resources

Introduction to Flexbox

A Complete Guide to Flexbox

CSS Grid Layout

CSS Grid is similar to flexbox but is more geared toward complex layouts, it can be used to create any kind of layout, and it is more complex and difficult to master.

Helpful resources

A Complete Guide to Grid

Learn CSS Grid by Building 5 Layouts in 17 minutes

Media Queries

You can't build a modern website if you don't understand what and how media query works. Media queries are a key part of responsive web design, as they allow you to create different layouts depending on the size of the viewport, but they can also be used to detect other things about the environment your site is running on, for example, whether the user is using a touchscreen rather than a mouse.

Helpful resources

A Complete Guide to CSS Media Queries

Standard Resolutions, CSS Breakpoints, and Target Phone Sizes

Conclusion

If you can master those five CSS properties you can build any design that comes your way from your design team or your client. These properties come in handy in almost all standard projects you will come across. I hope you have found this article helpful.

HTTP-Only Cookies Authentication with Next.js

Caleb Benjamin — Fri, 23 Sep 2022 18:53:00 GMT

Greeting! folks, If you don't want to save your JWT token on the client side then I believe that's why you're here, So welcome. In this article am going to show you how to handle authentication, JWT & HttpOnly Cookies with Next.js. This example will go with any API endpoints you are using. In order to follow along with the project, I create a starter project where all the styling is done so we can just focus on handling all the required Authentications in our application. You can grab it here Starter files

What We're Going To Cover

What Is JWT?
JSON Web Token Dos and Don't
Our JWT Strategy Explained
Cloning And Setting Up Our Project
Setting Up AuthContext
Login And Get JWT
Store JWT In Server HttpOnly Cookie
Persist Logged in User
Logout And Destroy Cookie
Register User

What Is JWT?

A JSON Web Token (JWT) is really just a way to transmit information between two parties. One party might be your frontend React application and another party might be your API. The real value of JSON Web Tokens is they include a security feature. That is you can be sure that the information that was transmitted in the token wasn't tampered with along the way.

JSON Web Token Dos And Don't

I wanted to outline some do's and don'ts. Let's start with the don'ts.

The first don't that I've got is don't store your tokens in Local Storage. The reason that it's risky to keep them in local storage is that local storage is easily scriptable.
The next don't that I've got is don't keep these secret keys that go into signing your tokens in the browser. The only place that you should be keeping your secret keys is on your backend, because browsers are public clients. Any time a user loads up a website or an application, they get all of the code that goes into powering that application.

Now for the Do's,

Do keep long, strong, unguessable secrets. Keep something that is super long, strong, and unguessable.

Our JWT Strategy Explained

Now what we are going to do in our application is create an API routes within Nextjs which run on the server-side. We are going to have routes that we can hit, then from there we will make our request to the API Endpoint, get the token and then we will set the cookie on the server-side, what's called the Http-Only Cookie, that means it can't be accessed via the browser (local Storage) so that's a saver way to go. So let's dive into code and start to create our API routes.

Cloning And Setting Up Our Project

So like l said I have already created a starter files so Jump right in and clone it.

https://github.com/calebbenjin/starter-jwtauth-nextjs

After cloning the app, open it in your VScode and press crtl+J your terminal will open then type yarn add or npm install to install all necessary dependences. After that type npm run dev or yarn run dev:

Setting Up AuthContext

Now we want to create our context, we are going to use the Context-API, where we can store all our Authentication methods, our users and also any errors that comes from authentication. So we are going to create a new folder in the root called context then inside the context we're going to create a file called AuthContext.js.

So We want to basically create a context using createContext from react. So now go inside your AuthContext file and fill it with this code snippet below.

import { useState, useEffect, createContext } from 'react'
import { useRouter } from 'next/router'
import {NEXT_URL} from '../config/index'

const AuthContext = createContext()

export const AuthProvider = ({children}) => {
  const [user, setUser] = useState(null)
  const [error, setError] = useState(null)
  const [isLoading, setIsLoading] = useState(false)

  const router = useRouter()

  // Register user
  const register = async ({ fullname, email, password }) => {
    setIsLoading(true)
    console.log(fullname, email, password)
  }

  // Login user
const login = async ({email, password}) => {
  setIsLoading(true)
  console.log(email, password)
}

  // Logout user
  const logout = () => {
    console.log("User Logged out")
  }

  // Check if user id Logged in
  const checkedUserLoggedIn = async (user) => {
    console.log('Checked')
  }

  return (
    <AuthContext.Provider value={{ register, login, logout, isLoading, user, error}}>
      {children}
    AuthContext.Provider>
  )
}


export default AuthContext

Now let me explain the code above. We imported some necessary hooks from react like { useState, useEffect, createContext } and also {useRouter} from next/router, Next we imported our {API_URL} this will be your API endpoint URL of choice. Next we create a context by creating a variable called AuthContext and set it to createContext. Next we created a provider that needs to wrap around our application so we can provides certain functions to our application and whatever component needed. Next we created some state [user, setUser] and [error, setError] and we set the default to null. Next we created some methods like register, login, logout, checkUserLoggedIn which we will use to hit our backend routes. Then as you can see we are exposing all the methods created so it can be accessible all over the application. So let's do that by going into our _app.js file in the pages folder and bring in our AuthProvider as you can see below.

import '../styles/globals.css'
import Navbar from '../components/Navbar'
import {AuthProvider} from '../context/AuthContext'

function MyApp({ Component, pageProps }) {
  return (
    <AuthProvider>
      <Navbar />
      <Component {...pageProps} />
    AuthProvider>
  )
}

export default MyApp

So in this section we are going to setup our login functionality and get the JWT token, we're not going to store it just yet but what we want to do is to create an api-route to connect to and in that api-route is were we are going to communicate with our backend-endpoint, we are going to send our request from there get the token and then our next step is to save the Http-Only Cookie. So let's dive right in by getting into our api folder and create a new file called login.js Now copy the code below and paste in the login.js file you have created, I will explain things in details below.

import { API_URL} from '../config/index'

export default async (req, res) => {
  if(req.method === 'POST') {

  } else {
    res.setHeader('Allow', ['POST'])
    res.status(405).json({message: `Method ${req.method} not allowed`})
  }
}

First we import our API_URL this can be your api url of choice Next we create an async function and pass in our (req res) Next we want to make sure if is the req.method is equal to POST, else we want to res.setHeader('Allow', ['POST'] and set the status res.status(405) which is method not allowed and send a .json({message:Method ${req.method} not allowed}). Next after making sure is a post request we want to get the email, and password from the req.body so we do that by destructuring the email and password from req.body. Now in this our api route this were we want to login our user with actual backend api-endpoint or l should say fetch our token. Now go ahead and paste the code below inside of your code.

   // destructure email, and password
    const { email, password } = req.body

    // Making a post request to hit our backend api-endpoint
    const apiRes = await fetch(`${API_URL}/your url of choice`, {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json'
      },
      body: JSON.stringify({
        email,
        password
      })
    })

    const data = await apiRes.json()

    if(apiRes.ok) {
      // @todo - Set Cookie

      res.status(200).json({user: data.user})
    } else {
      res.status(data.statusCode).json({message: data.message})
    }

So if you're following correctly your code show look like this below.

import { API_URL} from '../config/index'

export default async (req, res) => {
  if(req.method === 'POST') {
    const { email, password } = req.body

    const apiRes = await fetch(`${API_URL}/your url of choice`, {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json'
      },
      body: JSON.stringify({
        email,
        password
      })
    })

    const data = await apiRes.json()

    console.log(data.jwt)

    if(apiRes.ok) {
      res.status(200).json({user: data.user})
    } else {
      res.status(data.statusCode).json({message: data.message})
    }

  } else {
    res.setHeader('Allow', ['POST'])
    res.status(405).json({message: `Method ${req.method} not allowed`})
  }
}

So what we have done so far, which is creating this api-endpoint inside our Nextjs app, is like a middle man between our frontend and the backend-api, and then we are doing this so we can set Http-Only Cookie with token. You can console.log(data.jwt) to see it. Next let's head over to AuthContext and go to the login method we create so we can make a request to our api/login api-endpoint we have created. So paste these code inside of the login function.

const res = await fetch(`${NEXT_URL}/api/login`, {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json'
    },
    body: JSON.stringify({
      email,
      password
    })
  })

  const data = await res.json()

  if(res.ok) {
    setUser(data.user)
    router.push('/dashboard')
  } else {
    setError(data.message)
    setError(null)
  }

Now we are fetching the data from the api route we create in api/login. After that we check if the request is okay then we setUser(data.user) and make a redirect to our dashboard using next/router, But if is not Ok then we want to setError(data.message) and also setError(null) so the error will not remain in our state. Next let's head on to our login page and bring in our login method from AuthProvider, so now update your login page with these code


import AuthContext from '../context/AuthContext'

  const { login, error, user, isLoading } = useContext(AuthContext)

  const handleLoginSubmit = async ({ email, password }) => {
    login({email, password})
  }

We are importing our AuthContext, then we destructure out login, error, user, isLoading from it. Then in our handleLoginSubmit function we then call in the login({email, password}) and then pass in email, and password. Now at this point our app should be working very fine, next we are going to go head and store our jwt in the server httpOnly Cookie. Let's dive in.

Now what we want to do is set the Cookies, there's quite a few ways to do this, but we are going to use a package called cookie that let's us easily set cookie on the server-side, if you check in our package.json file you will see that l have install it already, or you can install it @ yard add cookie or npm install cookie if you are not using the start file. Next we going to bring in our api/login.js file

import cookie from 'cookie'

So go down the code where we have our @todo Set Cookie comment and add these code there.

  res.setHeader(
    'Set-Cookie',
    cookie.serialize('token', String(apiRes.data.token), {
      httpOnly: true,
      secure: process.env.NODE_ENV !== 'development',
      maxAge: 60 * 60 * 24 * 7, // 1 week
      sameSite: 'strict',
      path: '/'
    })
 )

Now as you can see we are setting res.setHeader that's coming with 'Set-Cookie' and a second parameter of cookie.serialize() then we set the name of the cookie to be cookie.serialize('token') and the value is going to be cookie.serialize('token', String(apiRes.data.token) and we also have an object option which is the httpOnly: true and secure since is going to be https and we want that to be true on production not development then we are going to set it to process.env.NODE_ENV !== 'development', and also check the node environment and see if that's not equal to development if is equal to development then is going to be false, if is in production is going to be true. Then we do maxAge is set to a week maxAge: 60 * 60 * 24 * 7, // 1 week. then we set sameSite to strict and path is set to '/' because we want it to be accessible everywhere. So this will set the cookie on the server-side once we login our app.

Persist Logged in User

Now we are going to persist the user and that is going to happen with the checkUserLoggedIn function we created in our AuthContext. Now this checkUserLoggedIn is going to hit a new route called user so go ahead and create a user.js file inside of our api folder. Basically what we are going to do in this user.js is to hit the users endpoint of your api, what we can do is we can send our token which we have in our cookie right now, once we send the token it will give you back the user for that token, then what we do with in AuthContext is set the user. Now go head and copy the code and paste in the user.js file you have created.

import { API_URL } from '@/lib/index'
import cookie from 'cookie'

export default = async (req, res) => {
  if (req.method === 'GET') {
    if (!req.headers.cookie) {
      res.status(403).json({message: 'Not Authorized'})
      return
    }

    const { token } = cookie.parse(req.headers.cookie)

    const apiRes = await fetch(`${API_URL}/user`, {
      method: 'GET',
      headers: {
        Authorization: `Bearer ${token}`
      }
    })

    const user = await apiRes.json()

    if(apiRes.ok) {
      res.status(200).json({user})
    } else {
      res.status(403).json({message: 'User forbidden'})
    }
  } else {
    res.setHeader('Allow', ['POST'])
    res.status(405).json({ message: `Method ${req.method} not allowed` })
  }
}


export default user

Now inside our function we are first checking to see if the cookie exist (!req.headers.cookie) if that's not there then res.status(403).json({message: 'Not Authorized'}) and then we return. But if is found then we need to pass the cookie and get the token. we then destructure the token const { token } = cookie.parse(req.headers.cookie) this will put the token into a variable and then we can send into our backend-Api. Once we get the user back. and then check if the apiRes.ok then we want to set the status(200) and send the user object. else the user is forbidden res.status(403).json({message: 'User forbidden'}). Now let's save that and hit this api-route with checkUserLoggedIn. now let's go to our AuthContext and fill in out checkUserLoggedIn with this code, just a simple get request

 const checkUserLoggedIn = async () => {
    const res = await fetch(`${NEXT_URL}/api/user`)
    const data = await res.json()

    if (res.ok) {
      setUser(data.user.data.user)
    } else {
      setUser(null)
    }
  }

Now we are checking that if everything goes ok then we're setting setUser(data.user.data.user) the user we get back from our backend-api else we are going to setUser to null and then we want to call this up here in a useEffect so let's go under our state and call the useEffect.

  useEffect(() => checkUserLoggedIn(), [])

Now we are going to have another api route for this because we need to destroy the cookie that's going to happened in our server which in our api route. So let's create a logout.js in our api folder. after we have done that, go ahead and paste the code inside of the logout.js file we just create. I will explain the code below.

import cookie from 'cookie'

export default = async (req, res) => {
  if (req.method === 'POST') {
    // DESTROY COOKIE
    res.setHeader(
      'Set-Cookie',
      cookie.serialize('token', '', {
        httpOnly: true,
        secure: process.env.NODE_ENV !== 'development',
        expires: new Date(0),
        sameSite: 'strict',
        path: '/'
      })
    )

    res.status(200).json({ message: "Success"})

  } else {
    res.setHeader('Allow', ['POST'])
    res.status(405).json({ message: `Method ${req.method} not allowed` })
  }
}

export default logout

All we are doing here is just to destroy the cookie. Now if you look at the cookie.serialize('token', '',) you will see that the token is now set to an empty string. Next we replace the maxAge with expires and we want to set it to something that's pass and we did that by passing a new data and pass in zero. And that's it this should destroy the cookie. Now from our logout function in out AuthContext we just want to call that api/logout.js Now add these code inside of the logout function inside of the AuthContext


  const logout = async () => {
    const res = await fetch(`${NEXT_URL}/api/logout`, {
      method: 'POST',
    })

    if (res.ok) {
      setUser(null)
      router.push('/login')
    }
  }

What we are doing here is simply hitting that api/logout route and we then setUser(null) to null, this will remove our cookie, and redirect the user to the login page. Now let's go to our Navbar components and bring in the logout method from AuthContext, So now update your navbar component with this code below

import { useContext } from 'react'

const { logout, user } = useContext(AuthContext)

{user ? <>
  <Link href="/dashboard">
    <a>Dashboarda>
  Link>
  <div>
    <a onClick={() => logout()}>Logouta>
  div>
 : null}

Now once you click on logout everything should be working very fine, the cookie will be destroy. Now the next thing is the register page, basically this will do the same thing as login except it will create the user and then it will send back the token basically do the same thing the login response does.

Register User

Now let's go to our api folder and create our register.js file. Now go ahead and copy these code and paste inside of your register.js file.

import { API_URL } from '../../config/index'
import cookie from 'cookie'

const register = async (req, res) => {
  if (req.method === 'POST') {

    const {fullname, email, password} = req.body

    const apiRes = await fetch(`${API_URL}/your register endpoint`, {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
      },
      body: JSON.stringify({
        fullname,
        email,
        password
      }),
    })

    const resData = await apiRes.json()

    // console.log(resData.data.token)

    if (apiRes.ok) {
      // Set Cookie
      res.setHeader(
        'Set-Cookie',
        cookie.serialize('token', String(resData.data.token), {
          httpOnly: true,
          secure: process.env.NODE_ENV !== 'development',
          maxAge: 60 * 60 * 24 * 7, // 1 week
          sameSite: 'strict',
          path: '/'
        })
      )

      res.status(200).json({ user: resData.data })
    } else {
      res.status(500).json({message: resData.message})
    }
  } else {
    res.setHeader('Allow', ['POST'])
    res.status(405).json({ message: `Method ${req.method} not allowed` })
  }
}


export default register

Now if you take a close look you will see that we are doing the same thing as the login route, the little difference here is that we are accepting an extra field which is fullname. So next let's dive right into the AuthContext and handle the register route we have just created. You can copy the code below and paste it into the register async function we created.

 // Resister user
  // ====================================
  const signup = async ({ fullname, email, password }) => {
    const res = await fetch(`${NEXT_URL}/api/register`, {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
      },
      body: JSON.stringify({ fullname, email, password }),
    })

    const resData = await res.json()

    if (res.ok) {
      setUser(resData.user)
      router.push('/dashboard')
    } else {
      setIsError(resData.message)
      setIsError(null)
    }
  }

Now we are hitting the api/register.js route that we just created, we are sending along the user object which is the fullname, email, password then we check to see if the response is ok, if is okay then we set the user and push/redirect to the dashboard and if there's an error we set that in the state. Now let's go inside the register and update our handleRegisterSubmit with these code


const handleRegisterSubmit = async ({ fullname, email, password }) => {
    register({ fullname, email, password })
  }

Now you can go ahead and test your app, everything should be working very fine now.

Conclusion

So having these API routes and being able to set an HTTP-only cookie is another big benefit of using Next.Js because is not something you can do with just React. Where to store JSON Web Tokens has always been kind of an issue with front-end development. So this does give us one solution.

Hello, I hope you liked the article. I am Caleb, a software developer. Let's connect at Twitter

Calebbenjamin Blog

How to Approach Frontend Performance in 2025 (and Why It Still Matters)

1. Start With User Experience, Not Lighthouse

2. Architecture is the Foundation of Performance

3. Audit Before You Act

4. Modern Tools Give You Superpowers

If you're using Next.js:

5. Optimize the Critical Path

Images:

Fonts:

JavaScript:

CSS:

6. Understand and Control Renders

7. Don’t Forget Network + Backend

8. Build a Performance Culture

Final Thoughts

Mastering Redux Toolkit: A Step-by-Step Tutorial for New Developers.

What we will cover

Step 1: Setting up the Project

Step 2: Installing Redux Toolkit

Step 3: Creating the Redux Store

Step 4: Setup Provider

Step 5: Creating the Cart Slice

Step 5: Creating the UI Components

Step 6: Rendering the App

Step 7: Running the App

5 reasons why you need to start writing Test-driven development (TDD)

1. Improve code quality:

2. Fast Development:

3. Better Scalability:

4. Better Documentation:

5. More Robust Code:

Conclusion

10 Advance React Do's and Don'ts

📚What you will learn

The DOs

🎯Use TypeSctript

🎯Use a query library

🎯Learn to make custom hooks

🎯Learn to get used to dependency arrays

🎯Use functional components over class components

🎯Use Next.js for server-side rendering

The DON'Ts

🎯Don't use React Fragment

🎯Don’t make your own UI library

🎯Don’t ignore useCallback or useMemo

🎯Don’t use Redux just because you think you have to

Conclusion

5 important features you must master in CSS

Introduction

Prerequisites

What you will learn

What is CSS?

Margin & Padding

Use cases

Helpful rescourse

Positioning

Types of Positioning

Helpful resources

Flexbox

Features of flexbox:

Flexbox properties:

Helpful resources

CSS Grid Layout

Helpful resources

Media Queries

Helpful resources

Conclusion

HTTP-Only Cookies Authentication with Next.js

What We're Going To Cover

What Is JWT?

JSON Web Token Dos And Don't

Now for the Do's,

Our JWT Strategy Explained

Cloning And Setting Up Our Project

Setting Up AuthContext

Login & Get JWT

Store JWT In Server HttpOnly Cookie

Persist Logged in User

Logout And Destroy Cookie