✨ Basic drag and drop

src/pages/_document.tsx

@@ -1,12 +1,14 @@
 import Document, { DocumentContext } from 'next/document';
 import { ServerStyles, createStylesServer } from '@mantine/next';
+import { resetServerContext } from 'react-beautiful-dnd';
 
 const stylesServer = createStylesServer();
 
 export default class _Document extends Document {
   static async getInitialProps(ctx: DocumentContext) {
-    const initialProps = await Document.getInitialProps(ctx);
+    resetServerContext();
 
+    const initialProps = await Document.getInitialProps(ctx);
     // Add your app specific logic here
 
     return {

src/pages/data.json

@@ -0,0 +1,34 @@
+{
+	"data": [
+		{
+			"position": 6,
+			"mass": 12.011,
+			"symbol": "C",
+			"name": "Carbon"
+		},
+		{
+			"position": 7,
+			"mass": 14.007,
+			"symbol": "N",
+			"name": "Nitrogen"
+		},
+		{
+			"position": 39,
+			"mass": 88.906,
+			"symbol": "Y",
+			"name": "Yttrium"
+		},
+		{
+			"position": 56,
+			"mass": 137.33,
+			"symbol": "Ba",
+			"name": "Barium"
+		},
+		{
+			"position": 58,
+			"mass": 140.12,
+			"symbol": "Ce",
+			"name": "Cerium"
+		}
+	]
+}

src/pages/trydnd.tsx

@@ -0,0 +1,41 @@
+import { useEffect } from 'react';
+import { DndList } from '../components/dnd';
+
+const data = {
+  data: [
+    {
+      position: 6,
+      mass: 12.011,
+      symbol: 'C',
+      name: 'Carbon',
+    },
+    {
+      position: 7,
+      mass: 14.007,
+      symbol: 'N',
+      name: 'Nitrogen',
+    },
+    {
+      position: 39,
+      mass: 88.906,
+      symbol: 'Y',
+      name: 'Yttrium',
+    },
+    {
+      position: 56,
+      mass: 137.33,
+      symbol: 'Ba',
+      name: 'Barium',
+    },
+    {
+      position: 58,
+      mass: 140.12,
+      symbol: 'Ce',
+      name: 'Cerium',
+    },
+  ],
+};
+
+export default function TryDnd() {
+  return <DndList data={data.data} />;
+}