Усовершенствуйте свое приложение Next.js с помощью React Three Fiber: подробное руководство

В этой статье блога мы рассмотрим процесс установки и использования React Three Fiber в приложении Next.js. React Three Fiber — это мощная библиотека, сочетающая гибкость React с возможностями Three.js, позволяющая создавать потрясающую 3D-графику и интерактивные возможности в Интернете. Независимо от того, являетесь ли вы опытным разработчиком или только начинаете, это руководство предоставит вам различные методы плавной интеграции React Three Fiber в ваши проекты Next.js.

Метод 1: использование npm или Yarn
Самый распространенный способ установки React Three Fiber в проекте Next.js — использование npm или Yarn. Откройте терминал и перейдите в корневой каталог вашего проекта, затем выполните одну из следующих команд:

Использование npm:

npm install react-three-fiber three

Использование Yarn:

yarn add react-three-fiber three

Метод 2: добавление тега сценария React Three Fiber
Если вы предпочитаете не использовать менеджеры пакетов, вы также можете включить React Three Fiber непосредственно в свой HTML-файл с помощью тега сценария. Добавьте следующий код в раздел <head>файла _document.jsвашего приложения Next.js:

import Document, { Html, Head, Main, NextScript } from "next/document";
class MyDocument extends Document {
  render() {
    return (
      <Html>
        <Head>
          <script src="https://unpkg.com/react@17/umd/react.production.min.js"></script>
          <script src="https://unpkg.com/react-dom@17/umd/react-dom.production.min.js"></script>
          <script src="https://unpkg.com/three@0.132.2/build/three.min.js"></script>
          <script src="https://unpkg.com/react-three-fiber@7.0.17/dist/standalone.umd.min.js"></script>
        </Head>
        <body>
          <Main />
          <NextScript />
        </body>
      </Html>
    );
  }
}
export default MyDocument;

Метод 3: использование CDN
Другой вариант — включить React Three Fiber через CDN (сеть доставки контента). Вы можете добавить следующий тег сценария в раздел <head>файла _document.jsвашего приложения Next.js:

import Document, { Html, Head, Main, NextScript } from "next/document";
class MyDocument extends Document {
  render() {
    return (
      <Html>
        <Head>
          <script src="https://cdn.skypack.dev/react@17/umd/react.production.min.js"></script>
          <script src="https://cdn.skypack.dev/react-dom@17/umd/react-dom.production.min.js"></script>
          <script src="https://cdn.skypack.dev/three@0.132.2/build/three.min.js"></script>
          <script src="https://cdn.skypack.dev/react-three-fiber@7.0.17/dist/standalone.umd.min.js"></script>
        </Head>
        <body>
          <Main />
          <NextScript />
        </body>
      </Html>
    );
  }
}
export default MyDocument;