{"id":86290,"date":"2024-12-01T07:35:23","date_gmt":"2024-12-01T04:05:23","guid":{"rendered":"https:\/\/nabfollower.com\/blog\/nextjs-api-management-implement-search-pagination-filter-sort-and-limit-features-411i\/"},"modified":"2024-12-01T07:35:23","modified_gmt":"2024-12-01T04:05:23","slug":"nextjs-api-management-implement-search-pagination-filter-sort-and-limit-features-411i","status":"publish","type":"post","link":"https:\/\/nabfollower.com\/blog\/nextjs-api-management-implement-search-pagination-filter-sort-and-limit-features-411i\/","title":{"rendered":"\u0645\u062f\u06cc\u0631\u06cc\u062a API Next.js: \u067e\u06cc\u0627\u062f\u0647 \u0633\u0627\u0632\u06cc \u0648\u06cc\u0698\u06af\u06cc \u0647\u0627\u06cc \u062c\u0633\u062a\u062c\u0648\u060c \u0635\u0641\u062d\u0647 \u0628\u0646\u062f\u06cc\u060c \u0641\u06cc\u0644\u062a\u0631\u060c \u0645\u0631\u062a\u0628 \u0633\u0627\u0632\u06cc \u0648 \u0645\u062d\u062f\u0648\u062f\u06cc\u062a"},"content":{"rendered":"

Summarize this content to 400 words in Persian Lang
\n \u062f\u0631 \u0627\u06cc\u0646 \u0645\u0642\u0627\u0644\u0647\u060c \u0645\u06cc\u200c\u062e\u0648\u0627\u0647\u0645 \u0646\u062d\u0648\u0647 \u0645\u062f\u06cc\u0631\u06cc\u062a API\u0647\u0627 \u0631\u0627 \u062f\u0631 a \u0628\u0647 \u0627\u0634\u062a\u0631\u0627\u06a9 \u0628\u06af\u0630\u0627\u0631\u0645 Next.js \u06a9\u0627\u0631\u0628\u0631\u062f\u060c \u0627\u0632 \u062c\u0645\u0644\u0647 \u0648\u0627\u06a9\u0634\u06cc \u062f\u0627\u062f\u0647\u200c\u0647\u0627\u060c \u0646\u0645\u0627\u06cc\u0634 \u0622\u0646\u200c\u0647\u0627 \u0648 \u0627\u062c\u0631\u0627\u06cc \u0648\u06cc\u0698\u06af\u06cc\u200c\u0647\u0627\u06cc\u06cc \u0645\u0627\u0646\u0646\u062f \u062c\u0633\u062a\u062c\u0648\u060c \u0635\u0641\u062d\u0647\u200c\u0628\u0646\u062f\u06cc\u060c \u0641\u06cc\u0644\u062a\u0631 \u06a9\u0631\u062f\u0646\u060c \u0645\u0631\u062a\u0628\u200c\u0633\u0627\u0632\u06cc \u0648 \u0645\u062d\u062f\u0648\u062f \u06a9\u0631\u062f\u0646 \u0646\u062a\u0627\u06cc\u062c. \u0628\u06cc\u0627\u06cc\u06cc\u062f \u0645\u0633\u062a\u0642\u06cc\u0645\u0627\u064b \u0648\u0627\u0631\u062f \u062c\u0632\u0626\u06cc\u0627\u062a \u0634\u0648\u06cc\u0645.<\/p>\n

\u0627\u0644\u0632\u0627\u0645\u0627\u062a:<\/p>\n

Next.js 14.2.18
\nAxios 1.7.8
\n\u0627\u0632 debounce 10.0.4 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u06a9\u0646\u06cc\u062f
\nAPI\u060c \u0645\u0637\u0645\u0626\u0646 \u0634\u0648\u06cc\u062f \u06a9\u0647 API \u0645\u0648\u0631\u062f \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0634\u0645\u0627 \u0627\u0632 \u0648\u06cc\u0698\u06af\u06cc\u200c\u0647\u0627\u06cc\u06cc \u0645\u0627\u0646\u0646\u062f \u062c\u0633\u062a\u062c\u0648\u060c \u0635\u0641\u062d\u0647\u200c\u0628\u0646\u062f\u06cc\u060c \u0641\u06cc\u0644\u062a\u0631 \u06a9\u0631\u062f\u0646\u060c \u0645\u0631\u062a\u0628\u200c\u0633\u0627\u0632\u06cc \u0648 \u0645\u062d\u062f\u0648\u062f \u06a9\u0631\u062f\u0646 \u062f\u0627\u062f\u0647\u200c\u0647\u0627 \u067e\u0634\u062a\u06cc\u0628\u0627\u0646\u06cc \u0645\u06cc\u200c\u06a9\u0646\u062f. \u062f\u0631 \u0627\u06cc\u0646 \u0645\u0642\u0627\u0644\u0647\u060c \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 API Jikan \u0631\u0627 \u0646\u0634\u0627\u0646 \u0645\u06cc\u200c\u062f\u0647\u0645 \u06a9\u0647 \u062f\u0627\u062f\u0647\u200c\u0647\u0627\u06cc\u06cc \u0631\u0627 \u0628\u0631\u0627\u06cc \u0627\u0646\u06cc\u0645\u0647 \u0648 \u0645\u062d\u062a\u0648\u0627\u06cc \u0645\u0631\u062a\u0628\u0637 \u0627\u0631\u0627\u0626\u0647 \u0645\u06cc\u200c\u06a9\u0646\u062f.<\/p>\n

\u0631\u0627\u0647 \u0627\u0646\u062f\u0627\u0632\u06cc \u067e\u0631\u0648\u0698\u0647<\/p>\n

Next.js \u0648 Required Packages \u0631\u0627 \u0646\u0635\u0628 \u06a9\u0646\u06cc\u062f
\n\u0627\u06cc\u062c\u0627\u062f \u0633\u0627\u062e\u062a\u0627\u0631 \u0641\u0627\u06cc\u0644 \u0648 \u067e\u0648\u0634\u0647 \u067e\u0631\u0648\u0698\u0647 \u062e\u0648\u062f \u0631\u0627 \u0628\u0627 \u0633\u0627\u062e\u062a\u0627\u0631 \u0632\u06cc\u0631 \u0633\u0627\u0632\u0645\u0627\u0646\u062f\u0647\u06cc \u06a9\u0646\u06cc\u062f:<\/p>\n

\u0648\u0627\u06a9\u0634\u06cc \u0648 \u0646\u0645\u0627\u06cc\u0634 \u062f\u0627\u062f\u0647 \u0647\u0627<\/p>\n

\/\/src\/lib\/actions.ts<\/p>\n

import axios from ‘axios’;<\/p>\n

const axiosInstance = axios.create({
\n baseURL: ‘https:\/\/api.jikan.moe\/v4’,
\n});<\/p>\n

export const getAllAnime = async (
\n query?: string,
\n currentPage?: number,
\n orderBy?: string,
\n type?: string,
\n status?: string,
\n sort?: string,
\n limit?: number
\n) => {
\n try {
\n const res = await axiosInstance.get(
\n `\/anime?q=${query}&page=${currentPage}&order_by=${orderBy}&type=${type}&status=${status}&sort=${sort}&limit=${limit}`
\n );<\/p>\n

const totalPages = res.data.pagination.last_visible_page;<\/p>\n

return {
\n data: res.data.data,
\n totalPages,
\n };
\n } catch (error) {
\n console.log(error);
\n return null;
\n }
\n};<\/p>\n

\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/p>\n

\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/p>\n

\/\/src\/components\/AnimeList.tsx<\/p>\n

import { getAllAnime } from ‘@\/lib\/actions’;
\nimport Image from ‘next\/image’;<\/p>\n

type AnimeProps = {
\n mal_id: number;
\n images: {
\n webp: {
\n image_url: string;
\n };
\n };
\n title: string;
\n};<\/p>\n

export default async function AnimeList({
\n query,
\n currentPage,
\n orderBy,
\n type,
\n status,
\n sort,
\n limit,
\n}: {
\n query?: string;
\n currentPage?: number;
\n orderBy?: string;
\n type?: string;
\n status?: string;
\n sort?: string;
\n limit?: number;
\n}) {
\n const animes = await getAllAnime(
\n query,
\n currentPage,
\n orderBy,
\n type,
\n status,
\n sort,
\n limit
\n );<\/p>\n

return (
\n <>
\n <div className=”grid grid-cols-6 gap-4 pt-4″>
\n {animes?.data.map((anime: AnimeProps) => (
\n <div key={anime.mal_id}>
\n <Image
\n src={anime.images.webp.image_url}
\n alt={anime.title}
\n width={500}
\n height={500}
\n className=”w-full h-[250px] object-cover rounded-md”
\n \/>
\n <h3>
\n {anime.title.length > 15
\n ? `${anime.title.slice(0, 15)}…`
\n : anime.title}
\n h3>
\n div>
\n ))}
\n div>
\n >
\n );
\n}<\/p>\n

\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/p>\n

\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/p>\n

\u062c\u0633\u062a\u062c\u0648 \u0631\u0627 \u067e\u06cc\u0627\u062f\u0647 \u0633\u0627\u0632\u06cc \u06a9\u0646\u06cc\u062f<\/p>\n

\/\/src\/components\/Search.tsx<\/p>\n

‘use client’;<\/p>\n

import { usePathname, useRouter, useSearchParams } from ‘next\/navigation’;
\nimport { useDebouncedCallback } from ‘use-debounce’;<\/p>\n

export default function Search() {
\n const pathname = usePathname();
\n const { replace } = useRouter();
\n const searchParams = useSearchParams();<\/p>\n

const handleSearch = useDebouncedCallback((term: string) => {
\n const params = new URLSearchParams(searchParams);
\n params.set(‘page’, ‘1’);
\n if (term) {
\n params.set(‘query’, term);
\n } else {
\n params.delete(‘query’);
\n }
\n replace(`${pathname}?${params.toString()}`);
\n }, 500);<\/p>\n

return (
\n <div className=”w-[50%]”>
\n <input
\n type=”text”
\n placeholder=”Search…”
\n className=”w-full bg-neutral-200 px-2 py-1 rounded-md”
\n onChange={(e) => {
\n handleSearch(e.target.value);
\n }}
\n defaultValue={searchParams.get(‘query’)?.toString()}
\n \/>
\n div>
\n );
\n}<\/p>\n

\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/p>\n

\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/p>\n

\u067e\u06cc\u0627\u062f\u0647 \u0633\u0627\u0632\u06cc \u0635\u0641\u062d\u0647 \u0628\u0646\u062f\u06cc<\/p>\n

\/\/src\/components\/Pagination.tsx<\/p>\n

‘use client’;<\/p>\n

import { usePathname, useRouter, useSearchParams } from ‘next\/navigation’;<\/p>\n

export default function Pagination({ totalPages }: { totalPages: number }) {
\n const pathname = usePathname();
\n const searchParams = useSearchParams();
\n const currentPage = Number(searchParams.get(‘page’)) || 1;
\n const router = useRouter();<\/p>\n

const createPageURL = (pageNumber: number | string) => {
\n const params = new URLSearchParams(searchParams);
\n params.set(‘page’, pageNumber.toString());
\n return `${pathname}?${params.toString()}`;
\n };<\/p>\n

return (
\n <>
\n <div className=”w-full flex items-center justify-center gap-x-8″>
\n <button
\n onClick={() => router.push(createPageURL(currentPage – 1))}
\n disabled={currentPage === 1}
\n className=”bg-neutral-600 px-2 py-1 rounded-md text-neutral-100 disabled:bg-neutral-400 disabled:cursor-not-allowed”
\n >
\n Prev
\n button>
\n <p className=”text-[1rem] text-neutral-700″>
\n Page\u00a0{currentPage} of\u00a0{totalPages}
\n p>
\n <button
\n onClick={() => router.push(createPageURL(currentPage + 1))}
\n disabled={currentPage === totalPages}
\n className=”bg-neutral-600 px-2 py-1 rounded-md text-neutral-100 disabled:bg-neutral-400 disabled:cursor-not-allowed”
\n >
\n Next
\n button>
\n div>
\n >
\n );
\n}<\/p>\n

\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/p>\n

\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/p>\n

\u067e\u06cc\u0627\u062f\u0647 \u0633\u0627\u0632\u06cc \u0641\u06cc\u0644\u062a\u0631 \u0648 \u0645\u0631\u062a\u0628 \u0633\u0627\u0632\u06cc<\/p>\n

\/\/src\/components\/FilterByType.tsx<\/p>\n

‘use client’;<\/p>\n

import { usePathname, useRouter, useSearchParams } from ‘next\/navigation’;<\/p>\n

type TypeProps = { value: string; name: string };<\/p>\n

const TYPE = [
\n { value: ‘tv’, name: ‘TV’ },
\n { value: ‘movie’, name: ‘Movie’ },
\n { value: ‘ova’, name: ‘OVA’ },
\n { value: ‘special’, name: ‘Special’ },
\n { value: ‘ona’, name: ‘ONA’ },
\n { value: ‘music’, name: ‘Music’ },
\n { value: ‘cm’, name: ‘CM’ },
\n { value: ‘pv’, name: ‘PV’ },
\n { value: ‘tv_special’, name: ‘TV Special’ },
\n];<\/p>\n

export default function FilterByType() {
\n const pathname = usePathname();
\n const searchParams = useSearchParams();
\n const router = useRouter();<\/p>\n

const handleFilterByType = (type: string) => {
\n const params = new URLSearchParams(searchParams);
\n params.set(‘page’, ‘1’);
\n params.set(‘type’, type);
\n router.replace(`${pathname}?${params.toString()}`);
\n };<\/p>\n

return (
\n <>
\n <form className=”w-[10%] bg-neutral-400 px-2 py-1 rounded-md”>
\n <select
\n className=”bg-neutral-400 w-full”
\n onChange={(e) => handleFilterByType(e.target.value)}
\n defaultValue={searchParams.get(‘type’)?.toString()}
\n >
\n <option value={”} defaultValue={”}>
\n Type:
\n option>
\n {TYPE.map((type: TypeProps, index) => (
\n <option key={index} value={type.value}>
\n {type.name}
\n option>
\n ))}
\n select>
\n form>
\n >
\n );
\n}<\/p>\n

\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/p>\n

\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/p>\n

\/\/src\/components\/FilterByStatus.tsx<\/p>\n

‘use client’;<\/p>\n

import { usePathname, useRouter, useSearchParams } from ‘next\/navigation’;<\/p>\n

type StatusProps = { value: string; name: string };<\/p>\n

const STATUS = [
\n { value: ‘airing’, name: ‘Airing’ },
\n { value: ‘upcoming’, name: ‘Upcoming’ },
\n { value: ‘complete’, name: ‘Complete’ },
\n];<\/p>\n

export default function FilterByStatus() {
\n const pathname = usePathname();
\n const searchParams = useSearchParams();
\n const router = useRouter();<\/p>\n

const handleFilterByStatus = (status: string) => {
\n const params = new URLSearchParams(searchParams);
\n params.set(‘page’, ‘1’);
\n params.set(‘status’, status);
\n router.replace(`${pathname}?${params.toString()}`);
\n };
\n return (
\n <>
\n <form className=”w-[10%] bg-neutral-400 px-2 py-1 rounded-md”>
\n <select
\n className=”bg-neutral-400 w-full”
\n onChange={(e) => handleFilterByStatus(e.target.value)}
\n defaultValue={searchParams.get(‘status’)?.toString()}
\n >
\n <option value={”} defaultValue={”}>
\n Status:
\n option>
\n {STATUS.map((status: StatusProps, index) => (
\n <option key={index} value={status.value}>
\n {status.name}
\n option>
\n ))}
\n select>
\n form>
\n >
\n );
\n}<\/p>\n

\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/p>\n

\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/p>\n

\/\/src\/components\/SortByOrder<\/p>\n

‘use client’;<\/p>\n

import { usePathname, useRouter, useSearchParams } from ‘next\/navigation’;<\/p>\n

type OrderByProps = { value: string; name: string };<\/p>\n

const ORDER_BY = [
\n { value: ‘mal_id’, name: ‘Mal id’ },
\n { value: ‘title’, name: ‘Title’ },
\n { value: ‘start_date’, name: ‘Start date’ },
\n { value: ‘end_date’, name: ‘End date’ },
\n { value: ‘episodes’, name: ‘Episodes’ },
\n { value: ‘score’, name: ‘Score’ },
\n { value: ‘scored_by’, name: ‘Scored by’ },
\n { value: ‘rank’, name: ‘Rank’ },
\n { value: ‘popularity’, name: ‘Popularity’ },
\n { value: ‘members’, name: ‘Members’ },
\n { value: ‘favorites’, name: ‘Favorites’ },
\n];<\/p>\n

export default function SortByOrder() {
\n const pathname = usePathname();
\n const searchParams = useSearchParams();
\n const router = useRouter();<\/p>\n

const handleSortByOrder = (orderBy: string) => {
\n const params = new URLSearchParams(searchParams);
\n params.set(‘page’, ‘1’);
\n params.set(‘order_by’, orderBy);
\n router.replace(`${pathname}?${params.toString()}`);
\n };
\n return (
\n <>
\n <form className=”w-[10%] bg-neutral-400 px-2 py-1 rounded-md”>
\n <select
\n className=”bg-neutral-400 w-full”
\n onChange={(e) => handleSortByOrder(e.target.value)}
\n defaultValue={searchParams.get(‘order_by’)?.toString()}
\n >
\n <option value={”} defaultValue={”}>
\n Order by:
\n option>
\n {ORDER_BY.map((orderBy: OrderByProps, index: number) => (
\n <option key={index} value={orderBy.value}>
\n {orderBy.name}
\n option>
\n ))}
\n select>
\n form>
\n >
\n );
\n}<\/p>\n

\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/p>\n

\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/p>\n

\/\/src\/components\/SortDirection.tsx<\/p>\n

‘use client’;<\/p>\n

import { usePathname, useRouter, useSearchParams } from ‘next\/navigation’;<\/p>\n

type SortDirectionProps = { value: string; name: string };<\/p>\n

const SORT_DIRECTION = [
\n { value: ‘asc’, name: ‘Ascending’ },
\n { value: ‘desc’, name: ‘Descending’ },
\n];<\/p>\n

export default function SortDirection() {
\n const pathname = usePathname();
\n const searchParams = useSearchParams();
\n const router = useRouter();<\/p>\n

const handleSortDirection = (sort: string) => {
\n const params = new URLSearchParams(searchParams);
\n params.set(‘page’, ‘1’);
\n params.set(‘sort’, sort);
\n router.replace(`${pathname}?${params.toString()}`);
\n };
\n return (
\n <>
\n <form className=”w-[10%] bg-neutral-400 px-2 py-1 rounded-md”>
\n <select
\n className=”bg-neutral-400 w-full”
\n onChange={(e) => handleSortDirection(e.target.value)}
\n defaultValue={searchParams.get(‘sort’)?.toString()}
\n >
\n <option value={”} defaultValue={”}>
\n Sort:
\n option>
\n {SORT_DIRECTION.map((orderBy: SortDirectionProps, index: number) => (
\n <option key={index} value={orderBy.value}>
\n {orderBy.name}
\n option>
\n ))}
\n select>
\n form>
\n >
\n );
\n}<\/p>\n

\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/p>\n

\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/p>\n

\u0645\u062d\u062f\u0648\u062f \u06a9\u0631\u062f\u0646 \u0646\u062a\u0627\u06cc\u062c<\/p>\n

\/\/src\/components\/Limit.tsx<\/p>\n

‘use client’;<\/p>\n

import { usePathname, useRouter, useSearchParams } from ‘next\/navigation’;<\/p>\n

export default function Limit() {
\n const pathname = usePathname();
\n const searchParams = useSearchParams();
\n const router = useRouter();<\/p>\n

const handleLimitChange = (event: React.ChangeEvent<HTMLInputElement>) => {
\n const value = event.target.value;
\n const params = new URLSearchParams(searchParams);<\/p>\n

if (!isNaN(Number(value)) && Number(value) > 0) {
\n params.set(‘page’, ‘1’);
\n params.set(‘limit’, value);
\n router.replace(`${pathname}?${params.toString()}`);
\n }<\/p>\n

if (
\n Number(value) === 0 ||
\n isNaN(Number(value)) ||
\n value === ” ||
\n Number(value) > 25
\n ) {
\n params.delete(‘limit’);
\n router.replace(`${pathname}?${params.toString()}`);
\n }
\n };<\/p>\n

return (
\n <form className=”w-[10%] bg-neutral-400 px-2 py-1 rounded-md flex items-center gap-x-2″>
\n <label htmlFor=”limit”>Limit:label>
\n <input
\n id=”limit”
\n type=”string”
\n className=”bg-neutral-400 w-full placeholder-neutral-700″
\n min=”1″
\n placeholder=”1-25″
\n defaultValue={searchParams.get(‘limit’) || ”}
\n onChange={handleLimitChange}
\n \/>
\n form>
\n );
\n}<\/p>\n

\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/p>\n

\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/p>\n

\u0635\u0641\u062d\u0647 \u0627\u0635\u0644\u06cc<\/p>\n

\/\/src\/app\/page<\/p>\n

import AnimeList from ‘@\/components\/AnimeList’;
\nimport FilterByStatus from ‘@\/components\/FilterByStatus’;
\nimport FilterByType from ‘@\/components\/FilterByType’;
\nimport Limit from ‘@\/components\/Limit’;
\nimport Pagination from ‘@\/components\/Pagination’;
\nimport Search from ‘@\/components\/Search’;
\nimport SortByOrder from ‘@\/components\/SortByOrder’;
\nimport SortDirection from ‘@\/components\/SortDirection’;
\nimport { getAllAnime } from ‘@\/lib\/actions’;
\nimport { Suspense } from ‘react’;<\/p>\n

export default async function Home({
\n searchParams,
\n}: {
\n searchParams?: {
\n query?: string;
\n page?: string;
\n order_by?: string;
\n type?: string;
\n status?: string;
\n sort?: string;
\n limit?: string;
\n };
\n}) {
\n const query = searchParams?.query || ”;
\n const currentPage = Number(searchParams?.page) || 1;
\n const orderBy = searchParams?.order_by || ”;
\n const type = searchParams?.type || ”;
\n const status = searchParams?.status || ”;
\n const sort = searchParams?.sort || ”;
\n const limit = Number(searchParams?.limit) || 25;<\/p>\n

const pages = await getAllAnime(
\n query,
\n currentPage,
\n orderBy,
\n type,
\n status,
\n sort,
\n limit
\n );
\n const totalPages = pages?.totalPages;<\/p>\n

return (
\n <main className=”w-[1020px] mx-auto”>
\n <div className=”flex items-center gap-x-4 py-4″>
\n <Search \/>
\n <FilterByType \/>
\n <FilterByStatus \/>
\n <SortByOrder \/>
\n <SortDirection \/>
\n <Limit \/>
\n div>
\n <Pagination totalPages={totalPages} \/>
\n <Suspense
\n key={query + currentPage + orderBy + type + status + sort + limit}
\n fallback={<div>Loading…div>}
\n >
\n <AnimeList
\n query={query}
\n currentPage={currentPage}
\n orderBy={orderBy}
\n type={type}
\n status={status}
\n sort={sort}
\n limit={limit}
\n \/>
\n Suspense>
\n main>
\n );
\n}<\/p>\n

\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/p>\n

\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/p>\n

\u0627\u062c\u0632\u0627\u06cc Refactor<\/p>\n

\u0628\u0631\u0627\u06cc \u0627\u06cc\u0646\u06a9\u0647 \u06a9\u062f \u0631\u0627 \u0645\u062e\u062a\u0635\u0631\u062a\u0631 \u0648 \u0642\u0627\u0628\u0644 \u0627\u0633\u062a\u0641\u0627\u062f\u0647\u200c\u062a\u0631 \u06a9\u0646\u06cc\u0645\u060c \u0645\u06cc\u200c\u062a\u0648\u0627\u0646\u06cc\u0645 \u0641\u06cc\u0644\u062a\u0631 \u0631\u0627 \u0627\u0635\u0644\u0627\u062d \u06a9\u0646\u06cc\u0645 \u0648 \u0627\u062c\u0632\u0627 \u0631\u0627 \u0645\u0631\u062a\u0628 \u06a9\u0646\u06cc\u0645 \u062a\u0627 \u0627\u0641\u0632\u0648\u0646\u06af\u06cc \u0631\u0627 \u06a9\u0627\u0647\u0634 \u062f\u0647\u06cc\u0645. \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u06a9\u0646\u06cc\u062f FilterSelect.tsx \u0645\u0624\u0644\u0641\u0647 \u0627\u06cc \u06a9\u0647 \u0645\u06cc \u062a\u0648\u0627\u0646\u062f \u0647\u0645 \u0639\u0645\u0644\u06a9\u0631\u062f \u0641\u06cc\u0644\u062a\u0631 \u06a9\u0631\u062f\u0646 \u0648 \u0647\u0645 \u0645\u0631\u062a\u0628 \u0633\u0627\u0632\u06cc \u0631\u0627 \u0627\u0646\u062c\u0627\u0645 \u062f\u0647\u062f. \u062f\u0631 \u0627\u06cc\u0646\u062c\u0627 \u0646\u062d\u0648\u0647 \u0628\u0627\u0632\u0633\u0627\u0632\u06cc \u0627\u062c\u0632\u0627\u06cc \u062e\u0648\u062f \u0622\u0648\u0631\u062f\u0647 \u0634\u062f\u0647 \u0627\u0633\u062a:<\/p>\n

\/\/src\/components\/FilterSelect.tsx<\/p>\n

‘use client’;<\/p>\n

import { usePathname, useRouter, useSearchParams } from ‘next\/navigation’;
\nimport React from ‘react’;<\/p>\n

type FilterSelectProps = {
\n options: { value: string; name: string }[];
\n paramKey: string;
\n label: string;
\n};<\/p>\n

const FilterSelect: React.FC<FilterSelectProps> = ({
\n options,
\n paramKey,
\n label,
\n}) => {
\n const pathname = usePathname();
\n const searchParams = useSearchParams();
\n const router = useRouter();<\/p>\n

const handleChange = (value: string) => {
\n const params = new URLSearchParams(searchParams);
\n params.set(‘page’, ‘1’);
\n params.set(paramKey, value);
\n router.replace(`${pathname}?${params.toString()}`);
\n };<\/p>\n

return (
\n <form className=”w-[10%] bg-neutral-400 px-2 py-1 rounded-md”>
\n <select
\n className=”bg-neutral-400 w-full”
\n onChange={(e) => handleChange(e.target.value)}
\n defaultValue={searchParams.get(paramKey) || ”}
\n >
\n <option value=””>{label}:option>
\n {options.map((option, index) => (
\n <option key={index} value={option.value}>
\n {option.name}
\n option>
\n ))}
\n select>
\n form>
\n );
\n};<\/p>\n

const STATUS = [
\n { value: ‘airing’, name: ‘Airing’ },
\n { value: ‘upcoming’, name: ‘Upcoming’ },
\n { value: ‘complete’, name: ‘Complete’ },
\n];<\/p>\n

const TYPE = [
\n { value: ‘tv’, name: ‘TV’ },
\n { value: ‘movie’, name: ‘Movie’ },
\n { value: ‘ova’, name: ‘OVA’ },
\n { value: ‘special’, name: ‘Special’ },
\n { value: ‘ona’, name: ‘ONA’ },
\n { value: ‘music’, name: ‘Music’ },
\n { value: ‘cm’, name: ‘CM’ },
\n { value: ‘pv’, name: ‘PV’ },
\n { value: ‘tv_special’, name: ‘TV Special’ },
\n];<\/p>\n

const ORDER_BY = [
\n { value: ‘mal_id’, name: ‘Mal id’ },
\n { value: ‘title’, name: ‘Title’ },
\n { value: ‘start_date’, name: ‘Start date’ },
\n { value: ‘end_date’, name: ‘End date’ },
\n { value: ‘episodes’, name: ‘Episodes’ },
\n { value: ‘score’, name: ‘Score’ },
\n { value: ‘scored_by’, name: ‘Scored by’ },
\n { value: ‘rank’, name: ‘Rank’ },
\n { value: ‘popularity’, name: ‘Popularity’ },
\n { value: ‘members’, name: ‘Members’ },
\n { value: ‘favorites’, name: ‘Favorites’ },
\n];<\/p>\n

const SORT_DIRECTION = [
\n { value: ‘asc’, name: ‘Ascending’ },
\n { value: ‘desc’, name: ‘Descending’ },
\n];<\/p>\n

export function FilterByStatus() {
\n return <FilterSelect options={STATUS} paramKey=”status” label=”Status” \/>;
\n}<\/p>\n

export function FilterByType() {
\n return <FilterSelect options={TYPE} paramKey=”type” label=”Type” \/>;
\n}<\/p>\n

export function SortByOrder() {
\n return (
\n <FilterSelect options={ORDER_BY} paramKey=”order_by” label=”Order by” \/>
\n );
\n}<\/p>\n

export function SortDirection() {
\n return <FilterSelect options={SORT_DIRECTION} paramKey=”sort” label=”Sort” \/>;
\n}<\/p>\n

\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/p>\n

\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/p>\n

\u0635\u0641\u062d\u0647 \u0627\u0635\u0644\u06cc \u0631\u0627 \u062a\u063a\u06cc\u06cc\u0631 \u062f\u0647\u06cc\u062f \u0648 \u0641\u06cc\u0644\u062a\u0631 \u0631\u0627 \u0648\u0627\u0631\u062f \u06a9\u0646\u06cc\u062f \u0648 \u0627\u062c\u0632\u0627\u06cc \u0622\u0646 \u0631\u0627 \u0645\u0631\u062a\u0628 \u06a9\u0646\u06cc\u062f FilterSelect<\/p>\n

\u062a\u0648\u0636\u06cc\u062d<\/p>\n

usePathname\u060c useSearchParams\u060c \u0648 useRouterHooks\u0627\u06cc\u0646 \u0642\u0644\u0627\u0628\u200c\u0647\u0627 \u0627\u0632 next\/navigation \u0628\u0631\u0627\u06cc \u0645\u062f\u06cc\u0631\u06cc\u062a \u0648\u0636\u0639\u06cc\u062a\u200c\u0647\u0627\u06cc URL \u0636\u0631\u0648\u0631\u06cc \u0647\u0633\u062a\u0646\u062f:<\/p>\n

usePathname: \u0645\u0633\u06cc\u0631 \u0641\u0639\u0644\u06cc URL \u0631\u0627 \u0628\u0627\u0632\u06cc\u0627\u0628\u06cc \u0645\u06cc \u06a9\u0646\u062f.<\/p>\n

useSearchParams: \u0628\u0647 \u067e\u0627\u0631\u0627\u0645\u062a\u0631\u0647\u0627\u06cc \u067e\u0631\u0633 \u0648 \u062c\u0648 \u062f\u0633\u062a\u0631\u0633\u06cc \u0648 \u062f\u0633\u062a\u06a9\u0627\u0631\u06cc \u0645\u06cc \u06a9\u0646\u062f.<\/p>\n

useRouter: \u062a\u0648\u0627\u0628\u0639 \u0645\u0633\u06cc\u0631\u06cc\u0627\u0628\u06cc \u0631\u0627 \u0628\u0631\u0627\u06cc \u067e\u06cc\u0645\u0627\u06cc\u0634 \u06cc\u0627 \u0628\u0647\u200c\u0631\u0648\u0632\u0631\u0633\u0627\u0646\u06cc \u0628\u0631\u0646\u0627\u0645\u0647\u200c\u0627\u06cc URL\u0647\u0627 (\u062c\u0627\u06cc\u06af\u0632\u06cc\u0646 \u06cc\u0627 \u0641\u0634\u0627\u0631) \u0627\u0631\u0627\u0626\u0647 \u0645\u06cc\u200c\u06a9\u0646\u062f.<\/p>\n

\u0628\u0631\u06af\u0634\u062a \u0628\u0647 \u062a\u0645\u0627\u0633 \u062f\u0631 \u0645\u0624\u0644\u0641\u0647 \u062c\u0633\u062a\u062c\u0648\u0631\u0627 useDebouncedCallback \u062a\u0627\u0628\u0639 \u0627\u062c\u0631\u0627\u06cc \u062f\u0631\u062e\u0648\u0627\u0633\u062a \u062c\u0633\u062a\u062c\u0648 \u0631\u0627 \u0628\u0647 \u062a\u0627\u062e\u06cc\u0631 \u0645\u06cc \u0627\u0646\u062f\u0627\u0632\u062f:<\/p>\n

\u0628\u0627 \u0627\u0646\u062a\u0638\u0627\u0631 \u0628\u0631\u0627\u06cc \u0645\u062f\u062a \u0632\u0645\u0627\u0646 \u0645\u0634\u062e\u0635 (500 \u0645\u06cc\u0644\u06cc \u062b\u0627\u0646\u06cc\u0647) \u0627\u0632 \u062a\u0645\u0627\u0633 \u0647\u0627\u06cc \u0628\u06cc\u0634 \u0627\u0632 \u062d\u062f API \u062c\u0644\u0648\u06af\u06cc\u0631\u06cc \u0645\u06cc \u06a9\u0646\u062f.
\n\u0639\u0645\u0644\u06a9\u0631\u062f \u0628\u0647\u062a\u0631 \u0648 \u062a\u062c\u0631\u0628\u0647 \u06a9\u0627\u0631\u0628\u0631\u06cc \u0631\u0648\u0627\u0646 \u062a\u0631 \u0631\u0627 \u062a\u0636\u0645\u06cc\u0646 \u0645\u06cc \u06a9\u0646\u062f.<\/p>\n

\u0628\u0647 \u0631\u0648\u0632 \u0631\u0633\u0627\u0646\u06cc \u067e\u0648\u06cc\u0627 URL\u0628\u0647\u200c\u0631\u0648\u0632\u0631\u0633\u0627\u0646\u06cc\u200c\u0647\u0627\u06cc \u067e\u0648\u06cc\u0627 \u0628\u0631\u0627\u06cc \u067e\u0627\u0631\u0627\u0645\u062a\u0631\u0647\u0627\u06cc URL\u060c \u0646\u0627\u0648\u0628\u0631\u06cc \u0631\u0648\u0627\u0646 \u0648 \u062f\u0631 \u0633\u0645\u062a \u0645\u0634\u062a\u0631\u06cc \u0631\u0627 \u062a\u0636\u0645\u06cc\u0646 \u0645\u06cc\u200c\u06a9\u0646\u062f:<\/p>\n

replace() URL \u0631\u0627 \u0628\u062f\u0648\u0646 \u0628\u0627\u0631\u06af\u06cc\u0631\u06cc \u0645\u062c\u062f\u062f \u0635\u0641\u062d\u0647 \u0628\u0647 \u0631\u0648\u0632 \u0645\u06cc \u06a9\u0646\u062f.
\n\u062a\u0627\u0631\u06cc\u062e\u0686\u0647 \u0645\u0631\u0648\u0631\u06af\u0631 \u0631\u0627 \u062f\u0631 \u062d\u0627\u0644\u06cc \u06a9\u0647 \u0645\u0646\u0639\u06a9\u0633 \u0645\u06cc \u06a9\u0646\u062f\u060c \u062a\u0645\u06cc\u0632 \u0646\u06af\u0647 \u0645\u06cc \u062f\u0627\u0631\u062f filter\u060c sort\u060c \u0648 pagination \u062a\u063a\u06cc\u06cc\u0631 \u0645\u06cc \u06a9\u0646\u062f.<\/p>\n

\u06a9\u0627\u0645\u067e\u0648\u0646\u0646\u062a AnimeList \u0648 \u0648\u0627\u06a9\u0634\u06cc \u062f\u0627\u062f\u0647 \u0647\u0627\u062c\u0632\u0621 AnimeList \u0634\u0627\u0645\u0644 \u0645\u0648\u0627\u0631\u062f \u0632\u06cc\u0631 \u0627\u0633\u062a:<\/p>\n

\u0648\u0627\u06a9\u0634\u06cc \u062f\u0627\u062f\u0647 \u0647\u0627\u06cc \u0646\u0627\u0647\u0645\u0632\u0645\u0627\u0646 \u0627\u0632 API Jikan (getAllAnime()).<\/p>\n

\u06a9\u0627\u0645\u067e\u0648\u0646\u0646\u062a FilterSelect \u0642\u0627\u0628\u0644 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0645\u062c\u062f\u062f\u0631\u0627 FilterSelect\u062c\u0632\u0621:<\/p>\n

\u0639\u0645\u0644\u06a9\u0631\u062f \u06a9\u0634\u0648\u06cc\u06cc \u0686\u06a9\u06cc\u062f\u0647 \u0628\u0631\u0627\u06cc \u0641\u06cc\u0644\u062a\u0631\u0647\u0627\u06cc\u06cc \u0645\u0627\u0646\u0646\u062f status\u060c type\u060c order_by\u060c \u0648 sort.
\n\u06a9\u062f \u0631\u0627 \u0628\u0627 \u06a9\u0627\u0647\u0634 \u0627\u0641\u0632\u0648\u0646\u06af\u06cc \u062f\u0631 \u0633\u0631\u0627\u0633\u0631 \u0633\u0627\u062f\u0647 \u0645\u06cc \u06a9\u0646\u062f filter\u0648 sort\u0627\u062c\u0632\u0627\u0621<\/p>\n

\u0645\u062f\u06cc\u0631\u06cc\u062a \u0635\u0641\u062d\u0647 \u0628\u0646\u062f\u06cc\u062c\u0632\u0621 \u0635\u0641\u062d\u0647 \u0628\u0646\u062f\u06cc:<\/p>\n

\u0628\u0647 \u0635\u0648\u0631\u062a \u067e\u0648\u06cc\u0627 \u0644\u06cc\u0646\u06a9 \u0647\u0627\u06cc \u0646\u0627\u0648\u0628\u0631\u06cc (Prev \u0648 Next) \u0628\u0631 \u0627\u0633\u0627\u0633 currentPage \u0648 totalPages.
\n\u062f\u06a9\u0645\u0647 \u0647\u0627 \u0631\u0627 \u0647\u0646\u06af\u0627\u0645 \u0631\u0633\u06cc\u062f\u0646 \u0628\u0647 \u0635\u0641\u062d\u0647 \u0627\u0648\u0644 \u06cc\u0627 \u0622\u062e\u0631 \u063a\u06cc\u0631\u0641\u0639\u0627\u0644 \u0645\u06cc \u06a9\u0646\u062f.<\/p>\n

\u0627\u0639\u062a\u0628\u0627\u0631 \u0633\u0646\u062c\u06cc \u0648\u0631\u0648\u062f\u06cc \u0631\u0627 \u0645\u062d\u062f\u0648\u062f \u06a9\u0646\u06cc\u062f\u0645\u0624\u0644\u0641\u0647 Limit \u0648\u0631\u0648\u062f\u06cc \u06a9\u0627\u0631\u0628\u0631 \u0631\u0627 \u0628\u0631\u0627\u06cc \u0645\u062d\u062f\u0648\u062f \u06a9\u0631\u062f\u0646 \u062a\u0639\u062f\u0627\u062f \u0646\u062a\u0627\u06cc\u062c \u062a\u0623\u06cc\u06cc\u062f \u0645\u06cc \u06a9\u0646\u062f:<\/p>\n

\u0627\u0637\u0645\u06cc\u0646\u0627\u0646 \u062d\u0627\u0635\u0644 \u0645\u06cc \u06a9\u0646\u062f \u06a9\u0647 \u0645\u0642\u062f\u0627\u0631 \u0628\u06cc\u0646 1 \u0648 25 \u0627\u0633\u062a.
\nURL \u0631\u0627 \u0628\u0647 \u0635\u0648\u0631\u062a \u067e\u0648\u06cc\u0627 \u0628\u0647 \u0631\u0648\u0632 \u0645\u06cc \u06a9\u0646\u062f \u06cc\u0627 \u0627\u06af\u0631 \u0648\u0631\u0648\u062f\u06cc \u0646\u0627\u0645\u0639\u062a\u0628\u0631 \u0628\u0627\u0634\u062f\u060c \u0628\u0627\u0632\u0646\u0634\u0627\u0646\u06cc \u0645\u06cc \u0634\u0648\u062f.<\/p>\n

\u062a\u0639\u0644\u06cc\u0642 \u0628\u0631\u0627\u06cc \u0648\u0627\u06a9\u0634\u06cc \u062f\u0627\u062f\u0647 \u0647\u0627\u062c\u0632\u0621 Suspense \u0628\u0631\u0627\u06cc \u0645\u062f\u06cc\u0631\u06cc\u062a \u0631\u0646\u062f\u0631 \u0646\u0627\u0647\u0645\u0632\u0645\u0627\u0646 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0645\u06cc \u0634\u0648\u062f:<\/p>\n

\u0646\u0634\u0627\u0646\u06af\u0631 \u0628\u0627\u0631\u06af\u06cc\u0631\u06cc \u0645\u062c\u062f\u062f \u0631\u0627 \u062f\u0631 \u062d\u06cc\u0646 \u0627\u0646\u062a\u0638\u0627\u0631 \u0628\u0631\u0627\u06cc \u062f\u0627\u062f\u0647 \u0646\u0634\u0627\u0646 \u0645\u06cc \u062f\u0647\u062f.
\n\u0627\u0637\u0645\u06cc\u0646\u0627\u0646 \u062d\u0627\u0635\u0644 \u0645\u06cc \u06a9\u0646\u062f \u06a9\u0647 UI \u062f\u0631 \u0637\u0648\u0644 \u0648\u0627\u06a9\u0634\u06cc \u062f\u0627\u062f\u0647 \u0647\u0627 \u067e\u0627\u0633\u062e\u06af\u0648 \u0628\u0627\u0642\u06cc \u0645\u06cc \u0645\u0627\u0646\u062f.<\/p>\n

\u0648 \u0627\u06cc\u0646 \u0628\u0631\u0646\u0627\u0645\u0647 \u0628\u0647 \u0627\u06cc\u0646 \u0635\u0648\u0631\u062a \u0627\u0633\u062a:<\/p>\n

\u0646\u062a\u06cc\u062c\u0647 \u06af\u06cc\u0631\u06cc\u0627\u0645\u06cc\u062f\u0648\u0627\u0631\u0645 \u0627\u06cc\u0646 \u0645\u0642\u0627\u0644\u0647 \u0631\u0627\u0647\u0646\u0645\u0627\u06cc \u062c\u0627\u0645\u0639\u06cc \u062f\u0631 \u0645\u0648\u0631\u062f \u0646\u062d\u0648\u0647 \u067e\u06cc\u0627\u062f\u0647\u200c\u0633\u0627\u0632\u06cc \u0648\u06cc\u0698\u06af\u06cc\u200c\u0647\u0627\u06cc \u0636\u0631\u0648\u0631\u06cc \u0627\u0631\u0627\u0626\u0647 \u06a9\u0631\u062f\u0647 \u0628\u0627\u0634\u062f \u062c\u0633\u062a\u062c\u0648 \u06a9\u0646\u06cc\u062f\u060c \u0635\u0641\u062d\u0647 \u0628\u0646\u062f\u06cc\u060c \u0641\u06cc\u0644\u062a\u0631 \u06a9\u0631\u062f\u0646\u060c \u0645\u0631\u062a\u0628 \u0633\u0627\u0632\u06cc\u060c \u0648 \u0645\u062d\u062f\u0648\u062f \u06a9\u0631\u062f\u0646 \u0646\u062a\u06cc\u062c\u0647 \u062f\u0631 \u06cc\u06a9 Next.js \u06a9\u0627\u0631\u0628\u0631\u062f.<\/p>\n

\u0628\u0631\u0627\u06cc \u06a9\u0627\u0648\u0634\u060c \u0634\u0628\u06cc\u0647 \u0633\u0627\u0632\u06cc\u060c \u06cc\u0627 \u0645\u0634\u0627\u0631\u06a9\u062a \u062f\u0631 \u067e\u0631\u0648\u0698\u0647 \u062f\u0631 github \u0631\u0627\u062d\u062a \u0628\u0627\u0634\u06cc\u062f. \u0645\u0646 \u0645\u0634\u062a\u0627\u0642\u0627\u0646\u0647 \u0645\u0646\u062a\u0638\u0631 \u0646\u0638\u0631\u0627\u062a \u0634\u0645\u0627 \u0647\u0633\u062a\u0645 \u0648 \u0627\u0645\u06cc\u062f\u0648\u0627\u0631\u0645 \u0627\u06cc\u0646 \u067e\u0631\u0648\u0698\u0647 \u0628\u0647 \u0634\u0645\u0627 \u062f\u0631 \u0633\u0641\u0631 \u062a\u0648\u0633\u0639\u0647 \u0634\u0645\u0627 \u06a9\u0645\u06a9 \u06a9\u0646\u062f!<\/p>\n

\u0645\u0631\u0627\u062c\u0639:https:\/\/nextjs.org\/learn\/dashboard-app\/adding-search-and-paginationhttps:\/\/nextjs.org\/docs\/app\/api-reference\/functions\/use-search-paramshttps:\/\/docs.api.jikan.moe\/<\/p>\n

\n

\u062f\u0631 \u0627\u06cc\u0646 \u0645\u0642\u0627\u0644\u0647\u060c \u0645\u06cc\u200c\u062e\u0648\u0627\u0647\u0645 \u0646\u062d\u0648\u0647 \u0645\u062f\u06cc\u0631\u06cc\u062a API\u0647\u0627 \u0631\u0627 \u062f\u0631 a \u0628\u0647 \u0627\u0634\u062a\u0631\u0627\u06a9 \u0628\u06af\u0630\u0627\u0631\u0645 Next.js<\/strong> \u06a9\u0627\u0631\u0628\u0631\u062f\u060c \u0627\u0632 \u062c\u0645\u0644\u0647 \u0648\u0627\u06a9\u0634\u06cc \u062f\u0627\u062f\u0647\u200c\u0647\u0627\u060c \u0646\u0645\u0627\u06cc\u0634 \u0622\u0646\u200c\u0647\u0627 \u0648 \u0627\u062c\u0631\u0627\u06cc \u0648\u06cc\u0698\u06af\u06cc\u200c\u0647\u0627\u06cc\u06cc \u0645\u0627\u0646\u0646\u062f \u062c\u0633\u062a\u062c\u0648\u060c \u0635\u0641\u062d\u0647\u200c\u0628\u0646\u062f\u06cc\u060c \u0641\u06cc\u0644\u062a\u0631 \u06a9\u0631\u062f\u0646\u060c \u0645\u0631\u062a\u0628\u200c\u0633\u0627\u0632\u06cc \u0648 \u0645\u062d\u062f\u0648\u062f \u06a9\u0631\u062f\u0646 \u0646\u062a\u0627\u06cc\u062c.<\/strong> \u0628\u06cc\u0627\u06cc\u06cc\u062f \u0645\u0633\u062a\u0642\u06cc\u0645\u0627\u064b \u0648\u0627\u0631\u062f \u062c\u0632\u0626\u06cc\u0627\u062a \u0634\u0648\u06cc\u0645.<\/p>\n

\n
\n

\u0641\u0647\u0631\u0633\u062a \u0645\u0637\u0627\u0644\u0628<\/p>\nToggle<\/span><\/path><\/svg><\/svg><\/span><\/span><\/span><\/a><\/span><\/div>\n