DEV Community: Khalid Kakar

Learn server actions in Nextjs

Khalid Kakar — Thu, 13 Feb 2025 08:03:23 +0000

NextJs Server Actions

Khalid Kakar ・ Feb 13

NextJs Server Actions

Khalid Kakar — Thu, 13 Feb 2025 08:02:13 +0000

In this article, we will explore Next.js Server Actions, which were introduced in Next.js 14 and are now stable. This is a good opportunity to learn and use them in large Next.js projects.

What are server actions? 😊

Actions can only be run on the server. They are simple, regular, and asynchronous functions that are helpful for async tasks like file management, database requests (CRUD operations), and more.

In simple terms, Server Actions are equivalent to API calls, but they are fully integrated. This is because we can send headers and cookies directly in Server Actions. 👍

Purpose of Server Action

The purpose of Server Actions is to make data fetching and mutations simpler while removing unnecessary APIs.
They are simpler than API calls and require less boilerplate code.
Server Actions can be directly called from both types of components: Server Components and Client Components.

Behaviour of Server Action

Server Action arguments and return values must be serializable by React. Serializable means they can be converted into a format that can be stored or transmitted, such as primitive data types in JavaScript. Non-serializable values include functions, class instances, symbols, DOM elements, and BigInt.
Server Actions inherit the runtime of the page and layout. If the page and layout use the Edge runtime, the Server Action must run in the Edge runtime, and vice versa for the Node.js runtime.
Server Actions can also handle caching and revalidate data. 🤞

How to implement?

The 'use server'; directive is used to create a Server Action.
For example

import { createTask } from "../_actions/actions";

export default function TodoForm() {

    return (
        <form action={async (formData) => {
            'use server';
            // trigrred server action which will run only on server
            await createTask(formData)
        }}>

            {/* form body */}

        </form>
    )
}

In the example, we created a form and passed an asynchronous function to the form’s action attribute. Inside that function, we used the use server directive, which ensures that the function runs only on the server.

That was a simple example of a Server Action. However, the most convenient approach is to create a separate file for the Server Action. In that file, write 'use server'; at the top to ensure the function executes only on the server.

How can we conveniently implement Server Actions in a real-world application?

In this example, we will create a to-do application with a file system, using Server Actions in Next.js 14.
Step 1
Initialize you latest Nextjs project.

npx create-next-app@latest

Step 2
Create form for the task creation
components/task-form.tsx

"use client"

import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Textarea } from "@/components/ui/textarea"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { useState } from "react"


export default function TodoForm() {
    const [title, setTitle] = useState("")
    const [desc, setDesc] = useState("")
    const [type, setType] = useState<'TODO'|'IN_PROGRESS'|'COMPLETED'>('TODO')


   async function onSubmit(formData: FormData) {

        formData.append('type', type)

    }

    return (
        <div className="w-2/3 md:w-1/3   mx-auto p-4 space-y-6">
            <div className="space-y-2 text-center">
                <h1 className="text-3xl font-bold">Create Todo</h1>
                <p className="text-gray-500 dark:text-gray-400">Add a new todo item to your list</p>
            </div>
            {/*  */}
            <form action={onSubmit} className="space-y-4 w-full">
                <Input placeholder="Enter todo title" name="title" onChange={(e) => setTitle(e.target.value)} value={title} />
                <Textarea placeholder="Enter todo description" className="min-h-[100px]" name="desc" onChange={(e) => setDesc(e.target.value)} value={desc} />
                <Select onValueChange={(e) => setType(e as 'TODO'|'IN_PROGRESS'|'COMPLETED')} defaultValue={type}>
                    <SelectTrigger>
                        <SelectValue placeholder="Select a status" />
                    </SelectTrigger>
                    <SelectContent>
                        <SelectItem value="TODO">Todo</SelectItem>
                        <SelectItem value="IN_PROGRESS">In Progress</SelectItem>
                        <SelectItem value="COMPLETED">Completed</SelectItem>
                    </SelectContent>
                </Select>

                <Button type="submit" className="w-full">
                    Create Todo
                </Button>
            </form>
        </div>
    )
}

Step 3
Make the directory inside that directory create file for task action like actions/task-actions.ts

'use server';
import fs from 'fs';
import { revalidatePath } from 'next/cache';


const FILE_PATH = './app/server-action/_actions/task.json'

export const createTask = async (formData: FormData): Promise<{ success: boolean }> => {
    try {
        const title = formData.get('title') as string
        const desc = formData.get('desc') as string
        const type = formData.get('type') as 'TODO' | 'IN_PROGRESS' | 'COMPLETED'

        // Ensure the file exists before reading
        if (!fs.existsSync(FILE_PATH)) {
            fs.writeFileSync(FILE_PATH, JSON.stringify({ tasks: [] }))
        }

        const allTask = fs.readFileSync(FILE_PATH, 'utf-8')
        const task = JSON.parse(allTask)

        console.log({task})

        const newId = task.tasks.length ? task.tasks.length + 1 : 0
        task.tasks.push({ id: newId, title, desc, type })

        fs.writeFileSync(FILE_PATH, JSON.stringify(task))
        revalidatePath('/server-action')
        return { success: true }
    } catch (error) {
        console.error('Error creating task:', error)
        return { success: false }
    }
}


export const getAllTasks = async(): Promise<{ tasks: { id: number; title: string; desc: string; type: 'TODO' | 'IN_PROGRESS' | 'COMPLETED' }[]}> => {
    const allTask = fs.readFileSync(FILE_PATH, 'utf-8')
    return JSON.parse(allTask)
}

export const deleteTaskById = async (id: number): Promise<{ success: boolean }> => {
    try {

        const allTask = fs.readFileSync(FILE_PATH, 'utf-8');
        const task = JSON.parse(allTask);

        const updatedTasks = task.tasks.filter((task: { id: number; }) => task.id !== id);  

        fs.writeFileSync(FILE_PATH, JSON.stringify({ tasks: updatedTasks }));

        revalidatePath('/server-action')

        return { success: true };
    } catch (error) {
        console.error('Error deleting task:', error);
        return { success: false };
    }
}

We will use a JSON file to manipulate tasks by applying different CRUD operations, following the same procedure used for databases. This is just for simplicity.

Step 4
Trigger the server action inside components/task-form.tsx file to create the new task in JSON file.

"use client"

import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Textarea } from "@/components/ui/textarea"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { useState } from "react"
import { createTask } from "../_actions/actions"
import { useToast } from "@/hooks/use-toast"


export default function TodoForm() {
    const [title, setTitle] = useState("")
    const [desc, setDesc] = useState("")
    const [type, setType] = useState<'TODO' | 'IN_PROGRESS' | 'COMPLETED'>('TODO')
    const { toast } = useToast()

    async function onSubmit(formData: FormData) {

        formData.append('type', type)
        const res = await createTask(formData)
        if (res.success) {
            setTitle("")
            setDesc("")
            setType('TODO')
            toast({
                title: "Success",
                description: "Task created successfully",
            })
        }
        else {
            toast({
                title: "Error",
                description: "Something went wrong",
                variant: 'destructive'
            })
        }
    }

    return (
        <div className="w-2/3 md:w-1/3   mx-auto p-4 space-y-6">
            <div className="space-y-2 text-center">
                <h1 className="text-3xl font-bold">Create Todo</h1>
                <p className="text-gray-500 dark:text-gray-400">Add a new todo item to your list</p>
            </div>
            {/*  */}
            <form action={onSubmit} className="space-y-4 w-full">
                <Input placeholder="Enter todo title" name="title" onChange={(e) => setTitle(e.target.value)} value={title} />
                <Textarea placeholder="Enter todo description" className="min-h-[100px]" name="desc" onChange={(e) => setDesc(e.target.value)} value={desc} />
                <Select onValueChange={(e) => setType(e as 'TODO' | 'IN_PROGRESS' | 'COMPLETED')} defaultValue={type}>
                    <SelectTrigger>
                        <SelectValue placeholder="Select a status" />
                    </SelectTrigger>
                    <SelectContent>
                        <SelectItem value="TODO">Todo</SelectItem>
                        <SelectItem value="IN_PROGRESS">In Progress</SelectItem>
                        <SelectItem value="COMPLETED">Completed</SelectItem>
                    </SelectContent>
                </Select>

                <Button type="submit" className="w-full">
                    Create Todo
                </Button>
            </form>
        </div>
    )
}

Step 5
Get all tasks in the 'page.tsx' file and also create a task card inside the components directory, like 'components/task-card.tsx'.

import React from 'react'
import TodoForm from './_components/todo-form'
import { getAllTasks } from './_actions/actions'
import TaskCard from './_components/task-card'

const page = async () => {
  const {tasks} =await getAllTasks()

  return (
    <div className='min-h-screen flex py-10 items-center justify-center flex-col gap-y-3'>
      <div className='flex items-center flex-wrap gap-4 justify-center'>
      {
        tasks.map((task) => (
          <TaskCard  key={task.id} title={task.title} description={task.desc} id={task.id} type={task.type} />
        ))
      }
      </div>
      <TodoForm />
    </div>
  )
}

export default page

task-card.tsx

'use client'
import { Pencil, Trash2 } from "lucide-react"
import { deleteTaskById } from "../_actions/actions"
import { toast } from "@/hooks/use-toast"

interface TaskProps {
    id:number
    title: string
    description: string
    type: 'TODO' | 'IN_PROGRESS' | 'COMPLETED'
  }

  export default function Task({id, title, description, type }: TaskProps) {
    const getTypeColor = (type: string) => {
      switch (type) {
        case "TODO":
          return "bg-red-100 text-red-800"
        case "IN_PROGRESS":
          return "bg-green-100 text-green-800"
        case "COMPLETED":
          return "bg-blue-100 text-blue-800"
        default:
          return "bg-gray-100 text-gray-800"
      }
    }

    return (
        <div className="p-4 w-1/4  border rounded-lg hover:shadow-md transition-shadow group">
        <div className="flex items-start justify-between gap-2">
          <div className="flex-1">
            <h3 className="font-medium text-lg">{title}</h3>
            <p className="mt-2 text-sm text-gray-600">{description}</p>
          </div>
          <div className="flex items-start gap-2">
            <span className={`px-2 py-1 rounded-full text-xs font-medium capitalize ${getTypeColor(type)}`}>{type}</span>
            <div className="flex gap-1 opacity-0 group-hover:opacity-100 transition-opacity">
              <button
               onClick={()=>{}}
                className="p-1 text-gray-500 hover:text-gray-700 hover:bg-gray-100 rounded"
                aria-label="Edit task"
              >
                <Pencil className="w-4 h-4" />
              </button>
              <button
                onClick={()=>deleteTaskById(id).then((res)=>toast({title: "Success", description: "Task deleted successfully"})).catch((err)=>toast({title: "Error", description: "Something went wrong", variant: 'destructive'}))
              }
                className="p-1 text-gray-500 hover:text-red-600 hover:bg-red-50 rounded"
                aria-label="Delete task"
              >
                <Trash2 className="w-4 h-4" />
              </button>
            </div>
          </div>
        </div>
      </div>
    )
  }

We also use revalidatePath, which is used to update the cache of a specific path.

Here is the full code in the GitHub repo link here.

Happy coding! 👍👍

Building Reusable Components in React

Khalid Kakar — Tue, 16 Jul 2024 06:40:43 +0000

One of the greatest strengths of React is its component-based architecture, which allows developers to build modular and reusable pieces of UI. Reusable components not only save time but also ensure consistency across your application. In this blog post, we’ll explore the best practices for building reusable components in React and provide practical coding examples.

Why Build Reusable Components?

Before diving into the code, let’s discuss why reusable components are important:

- Consistency: Reusing components ensures a consistent look and feel across your application.
- Maintainability: Isolating functionality in components makes your code easier to manage and update.
- Efficiency: Building reusable components saves development time, as you can leverage existing components rather than creating new ones from scratch.

1. Start with Simple Components

The first step in building reusable components is to identify UI elements that are used frequently across your application. Start by creating simple, self-contained components.

Example: Button Component

import React from 'react';
import PropTypes from 'prop-types';
import './Button.css';

const Button = ({ label, onClick, type = 'button' }) => (
  <button className="btn" onClick={onClick} type={type}>
    {label}
  </button>
);

Button.propTypes = {
  label: PropTypes.string.isRequired,
  onClick: PropTypes.func,
  type: PropTypes.oneOf(['button', 'submit', 'reset']),
};

export default Button;

2. Make Components Configurable

To make components truly reusable, they should be configurable through props. This allows you to customize the appearance and behavior of the component without modifying its internal code.

Example: Configurable Button Component

import React from 'react';
import PropTypes from 'prop-types';
import './Button.css';

const Button = ({ label, onClick, type = 'button', className = '', disabled = false }) => (
  <button className={`btn ${className}`} onClick={onClick} type={type} disabled={disabled}>
    {label}
  </button>
);

Button.propTypes = {
  label: PropTypes.string.isRequired,
  onClick: PropTypes.func,
  type: PropTypes.oneOf(['button', 'submit', 'reset']),
  className: PropTypes.string,
  disabled: PropTypes.bool,
};

export default Button;

Here, the Button component has additional props like className and disabled, making it more flexible and adaptable to different use cases.

3. Use Composition for More Complex Components

Composition allows you to build complex components by combining simpler ones. This approach follows React's philosophy of breaking down UI into small, manageable pieces.

Example: Card Component

import React from 'react';
import PropTypes from 'prop-types';
import './Card.css';

const Card = ({ title, content, footer }) => (
  <div className="card">
    <div className="card-header">{title}</div>
    <div className="card-body">{content}</div>
    <div className="card-footer">{footer}</div>
  </div>
);

Card.propTypes = {
  title: PropTypes.node.isRequired,
  content: PropTypes.node.isRequired,
  footer: PropTypes.node,
};

export default Card;

In this example, the Card component is composed of title, content, and footer props, allowing you to pass any React elements to create a custom card layout.

4. Leverage Children for Greater Flexibility

The children prop allows you to pass components and elements as children, providing greater flexibility in how your reusable components are used.

Example: Modal Component

import React from 'react';
import PropTypes from 'prop-types';
import './Modal.css';

const Modal = ({ isOpen, onClose, children }) => {
  if (!isOpen) return null;

  return (
    <div className="modal">
      <div className="modal-content">
        <button className="modal-close" onClick={onClose}>X</button>
        {children}
      </div>
    </div>
  );
};

Modal.propTypes = {
  isOpen: PropTypes.bool.isRequired,
  onClose: PropTypes.func.isRequired,
  children: PropTypes.node,
};

export default Modal;

The Modal component uses the children prop to render any content passed to it, making it a highly flexible and reusable component for displaying modal dialogs.

5. Style Components Effectively

Styling reusable components can be challenging, but using CSS-in-JS libraries like styled-components or Emotion can help manage styles in a modular way.

Example: Styled Button Component

import React from 'react';
import styled from 'styled-components';

const StyledButton = styled.button`
  background-color: ${(props) => (props.primary ? 'blue' : 'gray')};
  color: white;
  padding: 10px 20px;
  border: none;
  border-radius: 4px;
  cursor: pointer;

  &:hover {
    background-color: ${(props) => (props.primary ? 'darkblue' : 'darkgray')};
  }
`;

const Button = ({ label, primary, onClick }) => (
  <StyledButton primary={primary} onClick={onClick}>
    {label}
  </StyledButton>
);

export default Button;

In this example, the StyledButton component uses styled-components to apply conditional styles based on the primary prop, providing a clean and modular approach to styling.

Conclusion

Building reusable components in React is a powerful way to create maintainable, consistent, and efficient applications. By starting with simple components, making them configurable, leveraging composition and children, and using effective styling techniques, you can create a library of reusable components that will save you time and effort in your development process. Additionally, documenting your components with tools like Storybook ensures they are easy to understand and use by others.

Happy coding!

Optimizing Performance in React Applications

Khalid Kakar — Sat, 13 Jul 2024 01:41:22 +0000

As a React developer, ensuring that your applications run smoothly and efficiently is crucial for providing a great user experience. Performance optimization can make the difference between a fast, responsive app and one that feels sluggish. In this blog post, we'll explore several techniques to optimize performance in React applications, complete with code examples and real-world scenarios.

1. Use React's Built-in Performance Tools

React provides built-in tools to help identify performance bottlenecks. The React Developer Tools extension for Chrome and Firefox allows you to inspect your React component tree, identify unnecessary re-renders, and analyze component performance.

Example: React Developer Tools

Install the React Developer Tools extension from the Chrome Web Store or Firefox Add-ons.
Open your React application and the developer tools.
Navigate to the "Profiler" tab to start recording performance profiles.
By analyzing the profiling data, you can pinpoint components that are causing performance issues and take steps to optimize them.

2. Avoid Unnecessary Re-Renders

React's reconciliation process ensures that the DOM updates efficiently, but unnecessary re-renders can still degrade performance. To prevent this, you can use React.memo and shouldComponentUpdate.

Example: Using React.memo
jsx

import React, { memo } from 'react';

const MyComponent = ({ data }) => {
  console.log('Rendering MyComponent');
  return <div>{data}</div>;
};

export default memo(MyComponent);

In this example, MyComponent will only re-render if the data prop changes. Using React.memo can help reduce unnecessary renders and improve performance.

3. Optimize Component Rendering

Sometimes, breaking down large components into smaller, reusable ones can improve performance by reducing the amount of work each render requires. Additionally, you can use techniques like code splitting and lazy loading to load only the necessary parts of your application.

Example: Code Splitting with React.lazy
jsx

import React, { Suspense, lazy } from 'react';

const MyComponent = lazy(() => import('./MyComponent'));

const App = () => (
  <Suspense fallback={<div>Loading...</div>}>
    <MyComponent />
  </Suspense>
);

export default App;

In this example, MyComponent is loaded only when needed, reducing the initial load time of the application.

4. Optimize State Management

Efficient state management is crucial for performance. Use local state only when necessary, and prefer using state management libraries like Redux or Zustand for more complex state management scenarios.

Example: Using Zustand for State Management
jsx

import create from 'zustand';

const useStore = create((set) => ({
  count: 0,
  increment: () => set((state) => ({ count: state.count + 1 })),
}));

const Counter = () => {
  const { count, increment } = useStore();
  return (
    <div>
      <span>{count}</span>
      <button onClick={increment}>Increment</button>
    </div>
  );
};

export default Counter;

Zustand provides a lightweight and efficient way to manage state, helping to keep your components lean and performant.

5. Memoize Expensive Calculations

If your components rely on expensive calculations, you can use useMemo to memoize these calculations and prevent them from being recomputed on every render.

Example: Using useMemo
jsx

import React, { useMemo } from 'react';

const ExpensiveComponent = ({ items }) => {
  const sortedItems = useMemo(() => {
    console.log('Sorting items...');
    return items.sort((a, b) => a - b);
  }, [items]);

  return (
    <ul>
      {sortedItems.map((item, index) => (
        <li key={index}>{item}</li>
      ))}
    </ul>
  );
};

export default ExpensiveComponent;

In this example, the sortedItems array is only recalculated when the items prop changes, reducing the computational overhead.

6. Throttle and Debounce Event Handlers

Handling frequent events like scrolling or typing can cause performance issues. Throttling and debouncing event handlers can help mitigate this.

Example: Using lodash's debounce
jsx

import React, { useState } from 'react';
import debounce from 'lodash.debounce';

const SearchBar = () => {
  const [query, setQuery] = useState('');

  const handleChange = debounce((event) => {
    setQuery(event.target.value);
  }, 300);

  return <input type="text" onChange={handleChange} />;
};

export default SearchBar;

In this example, the handleChange function is debounced, meaning it will only be called 300 milliseconds after the user stops typing, reducing the number of unnecessary updates.

7. Optimize Images and Assets

Large images and assets can slow down your application. Use tools like react-image and react-async-script-loader to optimize images and load scripts asynchronously.

Example: Using react-image
jsx

import React from 'react';
import { Img } from 'react-image';

const OptimizedImage = ({ src, alt }) => (
  <Img
    src={src}
    loader={<div>Loading...</div>}
    unloader={<div>Failed to load image</div>}
    alt={alt}
  />
);

export default OptimizedImage;

In this example, react-image helps optimize image loading by providing a loader and unloader, ensuring that your application remains responsive even with large images.

Conclusion

Optimizing performance in React applications involves a combination of techniques, from preventing unnecessary re-renders to optimizing state management and memoizing expensive calculations. By applying these strategies, you can ensure that your React applications are fast, responsive, and provide a great user experience.

Remember, performance optimization is an ongoing process. Continuously monitor your applications using tools like the React Developer Tools and adjust your strategies as needed to maintain optimal performance.