Using react-beautiful-dnd with Next.JS

NextJS server side renders, which if a library dependencies or requirements, this can mess up how a library operates. One such library is react-beautiful-dnd. It’s become the standard drag and drop library but when integrating into a Next.JS app requires one additional piece. That piece is using resetServerContext call.

This needs to be called so that markup from the server doesn’t conflict with what the client side library expects.

To make it work we need to create a custom _document file in the pages directory. You can follow the docs for the base _document here https://nextjs.org/docs/advanced-features/custom-document

This is what it looks like.

import Document, { Html, Head, Main, NextScript } from 'next/document'

class MyDocument extends Document {
  static async getInitialProps(ctx) {
    const initialProps = await Document.getInitialProps(ctx)
    return { ...initialProps }
  }

  render() {
    return (
      <Html>
        <Head />
        <body>
          <Main />
          <NextScript />
        </body>
      </Html>)
  }
}

export default MyDocument

#react native

codedaily.io

Using react-beautiful-dnd with Next.JS