Skip to main content

Next.js

  • Next
  • NextJS

Installation​

In your Next.js project, Install the Dopt React component you would like to use with your preferred JavaScript package manager. For example, if installing the modal component:

npm install @dopt/react-modal

Setup​

If you are leveraging Dopt components headlessly (i.e., using the hooks only), then you can skip this setup step as long as you are using the hooks exports (e.g., @dopt/react-*/hooks). For example, if you are only using the modal component hooks:

import { useModal } from '@dopt/react-modal/hooks';

If you are leveraging Dopt React components as pre-built UI, then you'll need to complete an additional setup step to transpile the components before you can use them.

info

The following is only required if you are utilizing Dopt React components with the Pages Router.

If you are using the components with the App Router, everything should work out of the box, but you'll need to utilize client components via 'use client' at the top of your file.

Client-side components​

Many providers and some hooks within Dopt SDKs, like the DoptProvider, rely on useEffect hooks to set up sockets, perform data fetches and updates, and cache data on the client.

Given this, you should be careful when rendering or using these components and ensure that they are used within a client-side component.

If you are building with server-side components, like when using the App Router, you will need to specify use client to wrap Dopt's providers into a client-side component.

Next.js 13+​

If you are using Next.js 13 and above, add the Dopt React component package(s) to transpilePackages your Next.js configuration. For example, if using the modal component:

next.config.js
/** @type {import('next').NextConfig} */
const nextConfig = {
  transpilePackages: [
    // 👇 Add the Dopt React components you are using
    '@dopt/react-modal',
    // 👇 These are dependencies that also need to be transpiled
    '@dopt/react-theme',
    '@dopt/react-rich-text',
    '@dopt/core-theme',
    '@dopt/core-rich-text',
  ],
}

module.exports = nextConfig

Next.js 12​

If you are using Next.js 12, you will need to add the next-transpile-modules plugin first.

npm install next-transpile-modules@9.1.0

Then, you need to use the plugin and define the Dopt React component package(s) and their dependencies in your Next.js configuration. For example, if using the modal component:

next.config.js
const withTM = require('next-transpile-modules')(
  [
    // 👇 Add the Dopt React components you are using
    '@dopt/react-modal',
    // 👇 These are dependencies that also need to be transpiled
    '@dopt/react-theme',
    '@dopt/react-rich-text',
    '@dopt/core-theme',
    '@dopt/core-rich-text',
  ]
);

module.exports = withTM({});

Usage​

Import the Dopt React component and use it as specified in the usage section of each component. For example, if using the modal component:

import Modal, { useModal } from '@dopt/react-modal';

function MyModal() {
  const modal = useModal('my-flow.four-pandas-jam');

  return (
    <Modal.Root active={modal.active}>
      <Modal.Overlay />
      <Modal.Content>
        <Modal.Header>
          <Modal.Title>{modal.title}</Modal.Title>
          <Modal.DismissIcon onClick={modal.dismiss} />
        </Modal.Header>
        <Modal.Body>{modal.body}</Modal.Body>
        <Modal.Footer>
          <Modal.DismissButton onClick={modal.dismiss}>
            {modal.dismissLabel}
          </Modal.DismissButton>
          <Modal.CompleteButton onClick={modal.complete}>
            {modal.completeLabel}
          </Modal.CompleteButton>
        </Modal.Footer>
      </Modal.Content>
    </Modal.Root>
  );
}