Integrate Unsplash API to Next.js applications

const UNSPLASH_URL = process.env.UNSPLASH_URL;
const UNSPLASH_KEY = process.env.UNSPLASH_KEY;

export async function GET(request) {
    const { searchParams } = new URL(request.url);

    const res = await fetch(`${UNSPLASH_URL}?${searchParams.toString()}`, {
        headers: {
            Authorization: `Client-ID ${UNSPLASH_KEY}`
        },
        cache: 'force-cache'
    });

    const data = await res.json();

    return Response.json(data);
}

export async function POST(request) {
    const body = await request.json();
    const { download_url } = body;

    const res = await fetch(download_url, {
        headers: {
            Authorization: `Client-ID ${UNSPLASH_KEY}`
        }
    });

    const data = await res.json();

    return Response.json(data);
}

npm i react-unsplash

<ReactUnsplash
            initValue={search}
            loading={isLoading}
            onSearch={onSearch}
            onCommit={onCommit}
            onSelect={onSelect}
            onClose={handleClose}
            images={results}
            handleLoadMore={handleNextPage}
            hasMore={hasNext}
            displayMode="normal"
            cols={isMobile ? 2 : 3}
/>

const [page, setPage] = useState(1);
const query = search
        ? new URLSearchParams({
              query: search,
              page: page.toString(),
              per_page: '10'
          }).toString()
        : null;

const { data, isLoading } = useSWR(query ? `${URL}?${query}` : null, fetcher);
[...]
<ReactUnsplash [...] loading={isLoading} />

const [page, setPage] = useState(1);
const [currentSearch, setCurrentSearch] = useState('');
const [search, setSearch] = useState('');

const searchNow = useCallback(
    (value) => {
        if (isLoading) return;

        if (value === currentSearch) return;

        setPage(1);
        setSearch(value);
        setCurrentSearch(value);
    },
    [currentSearch, isLoading]
);

const debounceSearch = useMemo(() => debounce(searchNow, 1000), [searchNow]);

const onSearch = (value) => {
    debounceSearch(value);
};

const onCommit = (value) => {
    searchNow(value);
};

const onSelect = (image) => {
    const info = getUnsplashNeccessaryInfo(image);
    setSelectedImage(info);
    onChange?.({
        image: info,
        searchTerm: search
    });

    // track usage
    axios.post(URL, {
        download_url: info.links.download_location
    });
};

const [results, setResults] = useState([]);
const { data, isLoading } = useSWR(query ? `${URL}?${query}` : null, fetcher);

const memoizedResults = useMemo(() => data?.results || [], [data]);

useEffect(() => {
  if (page === 1) {
      setResults(memoizedResults || []);
  } else {
      setResults((prev) => [...prev, ...(memoizedResults || [])]);
  }
}, [memoizedResults, page]);

const [page, setPage] = useState(1);
const [hasNext, setHasNext] = useState(false);

const query = search
    ? new URLSearchParams({
          query: search,
          page: page.toString(),
          per_page: '10'
      }).toString()
    : null;

const { data, isLoading } = useSWR(query ? `${URL}?${query}` : null, fetcher);

useEffect(() => {
    if (data?.total_pages) {
        setHasNext(data.total_pages > page);
    }
}, [data, page]);

const handleNextPage = () => {
    setPage((prev) => prev + 1);
};