Как использовать сторонние компоненты и пакеты в Next.js?

@brook 

1. Установить пакет с помощью npm или yarn:

1

npm install <package_name>

1

yarn add <package_name>

1. Импортировать компонент из установленного пакета в нужном файле:

1

import { SomeComponent } from 'package_name';

1. Использовать компонент в коде:

1
2
3

export default function MyPage() {
  return ;
}

1. Если пакет не работает с серверным рендерингом, то необходимо обернуть его импорт в условие проверки окружения:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10

import dynamic from 'next/dynamic';

const SomeComponentWithNoSSR = dynamic(
  () => import('package_name').then((mod) => mod.SomeComponent),
  { ssr: false }
);

export default function MyPage() {
  return ;
}

1. Если компоненты не поддерживаются на сервере, например, потому что они зависят от браузерных API, то следует также использовать dynamic() и передавать параметр { ssr: false }.
2. Важно учитывать, что компоненты, которые используются на сервере, должны поддерживать SSR, иначе может возникнуть ошибка при сборке проекта.