CODEWITHSUNDEEP
next.jsurlsearchparams
Chicha
Chicha

Reputation: 25

Nextjs 14 how to manipulate multiple values in one query

Working on Nextjs 14, app router.

I am working on filtering right now(brands, countries). I want to save choosen brands(for example) in my query params(https://example.com/products?brands=brand1,brand2&countries=spain). But i can't find soultion for that.

Upvotes: 0

Views: 34

Answers (2)

Aleksandr Smyshliaev
Aleksandr Smyshliaev

Reputation: 420

Check out this library https://www.npmjs.com/package/state-in-url , can define state as an object with any fields, and work with it as with usual useState

Upvotes: 0

Rijin
Rijin

Reputation: 934

You can use this method:

// SampleForm.tsx

"use client";

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

export default function SampleForm() {
  const router = useRouter();
  const pathname = usePathname();
  const searchParams = useSearchParams()!;

  const createQueryString = useCallback(
    (queries: [string, string | string[] | null][]) => {
      const params = new URLSearchParams(Array.from(searchParams.entries()));
      for (let index = 0; index < queries.length; index++) {
        const query = queries[index];
        if (!query[1]) params.delete(query[0]);
        else {
          if (Array.isArray(query[1])) {
            params.delete(query[0]);
            query[1].forEach((item) => {
              params.append(query[0], item);
            });
          } else params.set(query[0], query[1]);
        }
      }
      return params.toString();
    },
    [searchParams],
  );

  function applyFiltersHandler(values: any) {
    router.push(
      pathname +
        "?" +
        createQueryString([
          ["search", values.search],
          ["brands", values.brands],
          ["countries", values.countries],
        ]),
    );
  }

  // Redirects to: https://example.com/products?search=hello&brands=Brand1&brands=Brand2&countries=Country1

  return (
    <button
      onClick={() =>
        applyFiltersHandler({
          search: "hello",
          brands: ["Brand1", "Brand2"],
          countries: ["Country1"],
        })
      }
    >
      Submit
    </button>
  );
}

You can then access the query params using:

// Client component
const searchParams = useSearchParams()!;
const brands = searchParams.getAll("brands");


// Server component
export default async function NotesPage({
  searchParams,
}: {
  searchParams: { search: string; brands: string[]; countries: string[] };
}) {
  const brands = searchParams.brands || [];
}

Upvotes: 0

Related Questions