Chapter 1: Introduction to State Management in Next.js

In the realm of frontend frameworks like React.js and Next.js, the useState hook has become a staple for managing application state. However, as applications grow in complexity, developers seek more advanced methods to enhance user experience, improve SEO, and optimize performance. This is where URL parameters come into play! 🚀

While useState is a favorite among React developers for managing state in functional components, it has its limitations. As applications expand and more components require data, we often resort to passing data from one component to another—a process known as props drilling—or we turn to state management libraries. Here are a few limitations to consider: 🧐

• Local Component Scope: The useState hook is designed to manage state within a single component. If you need to share state across multiple components or manage a global state, consider using the useContext hook from React or adopting a robust state management library like Redux Toolkit. 🚀
• SEO Limitations: SEO can suffer if URL parameters do not reflect state changes made by useState. 🚦
• User Experience Considerations: In e-commerce applications, failing to utilize URL parameters can lead to a less-than-ideal user experience, as users may struggle to share their preferences. 🛍️🔄
• Prop Drilling: Relying on useState for global state management forces you to pass both the state and its setter function as props to every necessary component. 🌳

To overcome these challenges, consider exploring other state management options like the useReducer hook, the useContext hook, or third-party solutions like Redux and MobX.

Chapter 2: Global State Management with URLs—Pros and Cons

When it comes to managing the state of web applications, using URLs can provide numerous benefits. 🌐 It can enhance user experience, facilitate marketing campaign tracking, and improve page SEO. However, if not handled properly, it can also introduce challenges. Here are some pros and cons to consider:

Pros 🌟

• Bookmarkable and Shareable URLs: Users can bookmark specific application states or share them with others, improving usability and collaboration. 📚
• Deep Linking: Developers can utilize URL parameters to create dynamic pages that align with query strings, enhancing deep linking of application states. 🔗
• Server-Side Rendering (SSR) Compatibility: For projects using Next.js that require server-side rendering, URL parameters can transmit state data between the server and client. 🌐

Cons 🚫

• Security Concerns: Sensitive information stored in URL parameters may pose security risks, as it is visible to users and can be tampered with. 🔒
• Duplicate Content: Improper use of URL parameters can lead to multiple confusing URLs, negatively affecting SEO rankings. 🔄
• Complex URL Structures: Complicated query parameters can result in long, hard-to-read URLs, deterring users from clicking on links and decreasing page visits. 🧩

Creating Components

Start by creating two components. The first will be a search input component that appends search and sort queries to the URL.

import { useRouter, useSearchParams } from "next/navigation";

const SearchSortInput = () => {

const router = useRouter();

const searchParams = useSearchParams();

const query = searchParams?.get("q");

const sort = searchParams?.get("sort");

const newParams = new URLSearchParams(searchParams.toString());

// Remaining component logic...

};

Here, we import query hooks from next/navigation. The useRouter hook allows navigation within the client application, while the useSearchParams hook enables manipulation of URL queries.

return (

<form onSubmit={handleSubmit}>

<input

type="text"

defaultValue={query || ""}

placeholder="Search"

/>

<select onChange={(e) => {

newParams.set("sort", e.target.value);

router.push(/search?${newParams.toString()});

}}>

<option value="">Default</option>

<option value="name">Name</option>

<option value="asc">Ascending</option>

<option value="desc">Descending</option>

<option value="a-z">A to Z</option>

</select>

</form>

);

In this snippet, we create input fields for search queries, setting their default values to existing queries. This allows users to retain their input even after navigating away or refreshing the page.

The handleSubmit function processes the query logic, allowing users to submit their searches and update the URL accordingly.

const handleSubmit = (event) => {

event.preventDefault();

const search = event.target.search.value;

const sortBy = event.target.sort.value;

if (search) {

newParams.set("q", search);

} else {

newParams.delete("q");

}

if (sortBy) {

newParams.set("sort", sortBy);

} else {

newParams.delete("sort");

}

router.push(/search?${newParams.toString()});

};

Creating the Data Display Component

Next, create a function that accepts data, q, and sort parameters. Indicate that this is a Next.js client component by including "use client" at the top.

const filteredData = () => {

let newData = [...data];

if (q) {

newData = newData.filter(item =>

item.name.toLowerCase().includes(q.toLowerCase()) ||

item.username.toLowerCase().includes(q.toLowerCase())

);

}

if (sort) {

// Sorting logic...

}

return newData;

};

This function uses JavaScript's built-in filter and sort methods to process data based on search and sort queries. If no queries are provided, it simply returns the entire dataset.

Creating the Search Page

This page displays search results based on user queries, utilizing the DisplayData component.

"use client";

import { useSearchParams } from "next/navigation";

import { Suspense, useEffect, useState } from "react";

import DisplayData from "../_components/DisplayData";

import SearchSortInput from "../_components/SearchInput";

export default function Search() {

const searchParams = useSearchParams();

const q = searchParams.get("q");

const sort = searchParams.get("sort");

const [data, setData] = useState([]);

useEffect(() => {

const fetchData = async () => {

const searchParams = new URLSearchParams();

if (q) {

searchParams.append("q", q);

}

if (sort) {

searchParams.append("sort", sort);

}

const response = await fetch(/api/users);

const data = await response.json();

setData(data);

};

fetchData();

}, [q, sort]);

return (

<div>

{q && <p>Search results for: {q}</p>}

{sort && <p>Sorted by: {sort}</p>}

<Suspense fallback={<p>Loading...</p>}>

<DisplayData data={filteredData()} />

</Suspense>

</div>

);

}

This completes the URL query implementation in Next.js, allowing for effective state management and enhanced user experience.

Conclusion 🌟

URL query parameters emerge as a powerful tool that can significantly enhance website performance and improve user experience. It’s encouraging to see an increasing number of developers integrating query parameters into their applications for real-world scenarios.

Happy coding! 🎉

Learn how to manage React state with URL query strings using NextJS.

Explore URL state management techniques in NextJS for better application performance.