Hello @American black bear

Yes, u can use dnd-kit with Next.js, but the key is architecture:

Keep DndContext at the page (or layout) level, not inside each component, Store drag state (items) in one parent, pass data down via props, Child components should only use useSortable / useDraggable, In Next.js App Router, don’t forget 'use client'

Common mistake: creating multiple DndContexts or managing drag state in each component.

https://docs.dndkit.com/guides/architecture - docs for architecture
https://docs.dndkit.com/presets/sortable - docs for sort
https://docs.dndkit.com/api-documentation/dndcontext - docs to context

Good luck to learn NextJs)

2/3 of those links are 404's. Stop copy pasting ai slop. If they wanted help from an ai they could ask an ai themselves

If u have a particular error or issue u need help with feel free to post it here with more detail n we could try to help. Ur initial question is a bit too broad to help with

Please elaborate on what you mean by "add it across multiple components of a page". Do you mean in general just integrating dnd-kit into your page? or having multiple components in the same drag and drop?

I could assume you mean one. So in dnd-kit, the structure of your page will be like this:

<DndContext (your event handlers will be here)>
  <Droppable> // your drop target
    <Draggable> // whatever you want to drag, this can be dragged between this and the 2nd droppable
      hello i am draggable
    </Draggable>
    <Draggable> ... </Draggable>
    ...
  </Droppable>
  <Droppable> // another
  </Droppable>
</DndContext>

So really you just need the context on top, droppable as the target containers and draggable as your things to drag

Droppable and Draggable aren't provided by dnd-kit, but it's easy to make one. The templates are provided on their website which you can customize however you want.
https://docs.dndkit.com/api-documentation/droppable
https://docs.dndkit.com/api-documentation/draggable

Thanks for your help guys
I am confused on the structure. You are right, I am confused on implementing it into my page.

I'm fairly new to Next so I have
a couple questions

1. So it is alright to have DndContext on the page itself with 'use client' on the top but is it more benefitial to keep pages rendered on the server in general and then create a component to wrap context (This question is for my own sake when I need to deal with Context Providers in the future)

components/DndWrapper.tsx
'use client'

DndWrapper({children, ...props}) {
  <DndContext (your event handlers will be here)>
    {children}
  </DndContext>
}

page.tsx
// no 'use client' here

 Homepage() {
    <DndWrapper>
      <Droppable> // your drop target
        <Draggable> // whatever you want to drag, this can be dragged between this and the 2nd droppable
          hello i am draggable
        </Draggable>
        <Draggable> ... </Draggable>
        ...
      </Droppable>
      <Droppable> // another
      </Droppable>
  </DndWrapper>
 }

2. My second question is that I have a sidebar and container components that I want to be able to drag and drop to and from

page.tsx
Homepage() {
  return(
    <DndWrapper>
      <SideBar />
      <ContainerWithDroppableGrid />
    </DndWrapper>
  )
}

SideBar.tsx
SideBar() {
  {
    tasks.map(task => (
    <Draggable> 
       task.name
    </Draggable>
  )}
}

ContainerWithDroppableGrid.tsx
ContainerWithDroppableGrid() {
  {
    grid.map(grid => (
    <Droppable> 
       (Drop Containers)
    </Droppable>
  )}
}

I know there's definitely a better way to implement things, but I'm not sure the best way to go about it

From my experience, yes I'd keep the providers in a client component, since I have 4-8 providers for the page.

This, I am not sure, this depends on the implementation of the sidebar. But it will highly likely work out of the box.

You can have a look at one of mine which is the only open source project that uses dnd-kit
https://git.dgnr.us/astral/buzz/src/branch/main/app/%28ui%29/tl/%5Btype%5D/%5Bver%5D

Although mine is based on SortableDraggable which is a variant of Draggable that can be programmatically ordered.

I always keep the page.tsx files as server components.

So yeah I would create providers in separate client components and then import them into the page (or sometimes layout if you want multiple pages to read from the context) and wrap the children, like you have done in your 2nd example.