Как реализовать Infinite Scroll в Next.js с помощью Intersection Observer

Создатели и разработчики постоянно изобретают новые способы усовершенствования приложений и обеспечения ценности для пользователей.

Одной из особенностей, особенно полезной для социальных сетей и программ электронной коммерции, является бесконечная прокрутка. Он обеспечивает плавный и интуитивно понятный опыт просмотра, сокращая время, необходимое для просмотра нового содержимого.

Эта статья научит вас, как реализовать бесконечную прокрутку в программе Next.js с помощью API Intersection Observer JavaScript.

Бесконечная прокрутка — это техника веб-дизайна, которая позволяет вашему веб-сайту или программе загружать больше содержимого при прокрутке страницы вниз.

Например, предположим, что на вашем сайте есть много элементов для отображения (например, лента новостей или список продуктов). Эта техника устраняет необходимость переходить многие страницы, позволяя пользователям легко исследовать и открывать новое содержимое.

Это также помогает улучшить взаимодействие с пользователем, сокращая время, необходимое для загрузки новых страниц, поскольку содержимое загружается динамически, когда пользователь прокручивает страницу.

Пагинация против бесконечной прокрутки - Smashing Magazine
Пагинация против бесконечной прокрутки — Smashing Magazine

Вы можете реализовать его в своем проекте с помощью API Intersection Observer JavaScript.

Что такое Intersection Observer API?

Этот API на основе браузера позволяет наблюдать за изменениями в окне просмотра программы или определенном пересечении между элементами.

Это работает для таких случаев использования, как отложенная загрузка, плавный переход анимации и бесконечная прокрутка. Вы можете использовать этот API, чтобы определить, когда определенные элементы появляются на экране, и запустить функцию для внесения изменений в приложение.

CodeSandbox и GitHub Repo

Полная демонстрационная версия этой статьи доступна на CodeSandbox. Вы также можете проверить его исходный код GitHub.

предпосылки

Чтобы беспрепятственно следовать вам сначала понадобится:

  • Знания JavaScript и React.
  • Учетная запись GitHub для создания стартового кода и удаленного хранения вашего кода. Вам также требуется Git для отслеживания изменений в вашей кодовой базе.
  • Пряжа установлена ​​на вашем компьютере. Вам нужно установить Node.js на вашем компьютере, который поставляется с NPM для установки Yarn.
  • Опыт работы с Next.js, хотя и не обязателен, даст вам преимущество и поможет лучше понять эту статью.
  • Знакомство с Tailwind, структура CSS, которая используется в этом проекте. Также не обязательно.

Как настроить проект

Щелкните здесь, чтобы создать исходные файлы для проекта в желаемом браузере:

generate_repo

После создания хранилища скопируйте его URL Git, чтобы вы могли клонировать его на свой ПК:

project_repo

В терминале ПК выполните следующую команду, чтобы клонировать свое репо:

git clone theGitUrlOfYourRepo

После успешного клонирования проекта установите зависимости, выполнив следующую команду в терминале вашего проекта:

yarn

# or npm install. But for this demo, yarn is preferred

После завершения запустите yarn dev в терминале вашего проекта и перейдите к localhost:3000 в вашем браузере, чтобы увидеть исходный пользовательский интерфейс:

starter_ui

Как обращаться с содержимым

Для этого проекта вы получите изображение чая от Unsplash через его публичный API. Поэтому перейдите и нажмите «Зарегистрироваться как разработчик» или «Войти», если у вас есть аккаунт Unsplash:

unsplash_login

После успешного входа нажмите «Ваши программы» и «Новая программа». Примите условия соглашения, а затем введите название и описание программы:

app_info

После успешного создания программы на Unsplash прокрутите вниз, чтобы скопировать ключ доступа.

Откройте проект в желаемом редакторе кода и создайте .env.local файл в корневой папке для хранения ключа доступа:

NEXT_PUBLIC_UNSPLASH=yourUnsplashApiAccessKey

В редакторе кода перейдите к pages/index.js и обновить fetchImages функцию с кодом ниже:

const fetchImages = async () => {
  const response = await fetch(`${BASE_URL}?query=tea&page=${page}`, {
    headers: {
      Authorization: `Client-ID ${process.env.NEXT_PUBLIC_UNSPLASH}`,
    },
  });
  const { results } = await response.json();
  setImages((prev) => [...prev, ...results]);
}; 

Здесь вы сделали следующее:

  • Реализован JavaScript fetch для отправки запроса HTTP в конечную точку API Unsplash. Конечная точка содержит BASE_URLваш queryи текущий page.
  • В вашем fetch функция, объект параметров включает a headers свойство, определяющее an Authorization заголовок со значением Client-ID ${process.env.NEXT_PUBLIC_UNSPLASH}который является ключом доступа к API.
  • Затем вы разобрали свой response как JSON и деструктурирован results собственность.
  • Наконец-то вы обновили свой images состояние путем конкатенации предыдущего значения images с results массив.

В вашем pages/index.js файл, заменить // useEffect here с кодом ниже:

useEffect(() => {
  fetchImages();
}, [page]);

Здесь вы настраиваете useEffect для запуска fetchImages функционировать когда-либо page обновление.

Как реализовать Intersection Observer API

Перейдите к components/ui/Card.js и обновить useEffect с кодом ниже:

useEffect(() => {
  if (!cardRef?.current) return;

  const observer = new IntersectionObserver(([entry]) => {
    if (isLast && entry.isIntersecting) {
      newLimit();
      observer.unobserve(entry.target);
    }
  });

  observer.observe(cardRef.current);
}, [isLast]);

Здесь вы устанавливаете Intersection Observer с useEffect крючок. Он определяет, когда каждый компонент карты становится видимым в окне просмотра.

Когда компонент Card содержит последний элемент в вашем массиве изображений и просматривается (entry.isIntersecting), Intersection Observer API запускает newLimit и прекращает наблюдение за целевым элементом.

The useEffect крючок будет запускаться каждый раз, когда isLast смены переменных.

Обновите реквизит в компоненте карты, чтобы он содержал newLimit и isLast:

export default function Card({
  creditUrl,
  imgAlt="placeholder",
  imgSrc="
  shotBy,
  newLimit,
  isLast,
}) {
// code content
}

В вашем pages/index.jsобновление <HomeLayout> с кодом ниже:

<HomeLayout>
  {images.map((image, index) => (
    <Card
      key={image.id}
      imgSrc={image.urls.regular}
      imgAlt={image.alt_description}
      shotBy={image.user.name}
      creditUrl={image.links.html}
      isLast={index === images.length - 1}
      newLimit={() => setPage(page + 1)}
    />
  ))}
</HomeLayout>;

Здесь вы отразили через свой images массив, отображающий список Card компоненты, каждый из которых отображает изображения, фотографы и ссылки на оригинальную публикацию на Unsplash.

The isLast prop проверяет, является ли текущий компонент карты последним в images массив. Затем это запускает newLimit с API Intersection Observer для обновления количества страниц.

Вот конечный результат ниже:

infinitea_demo

Вывод

В этой статье вы узнали, как реализовать бесконечную прокрутку в программе Next.js. Возможности API Intersection Observer не ограничиваются бесконечной прокруткой и отложенной загрузкой. Продолжая практику, вы узнаете больше. Нижеследующие ресурсы являются хорошей отправной точкой.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *