docs: Add example with next.js

[bryanjtc]

What is the best way to use swapy with next.js?

• Make container a client component and the slots and content server components
• Make container and slots client components and the content server component.

Adding an example would be nice.

[james-william-r]

Swapy uses client-side code, so the container will need to be a client component, but no reason why the slots couldn't then be server components if you wanted.

As NextJS runs on React, the setup is the same, here's one I wizzed up from the React example:

"use client";
import { createSwapy } from "swapy";
import { useEffect } from "react";

export default function Sales({ params: { team } }) {
  useEffect(() => {
    const container = document.querySelector(".container");

    const swapy = createSwapy(container, {
      animation: "dynamic", // or spring or none
    });

    // You can disable and enable it anytime you want
    swapy.enable(true);
  }, []);

  return (
    <div className="container">
      <div className="grid grid-cols-4 gap-4">
        <div
          className="bg-mat col-span-1 h-[200px] rounded border"
          data-swapy-slot="foo"
        >
          <div
            className="bg-mat-top z-50 rounded border p-4"
            data-swapy-item="a"
          >
            123
          </div>
        </div>

        <div
          className="bg-mat col-span-3 h-[200px] rounded border"
          data-swapy-slot="bar"
        >
          <div
            className="bg-mat-top z-50 rounded border p-4"
            data-swapy-item="b"
          >
            123
            <div className="handle" data-swapy-handle>
              handle
            </div>
          </div>
        </div>

        <div
          className="bg-mat col-span-4 h-[200px] rounded border"
          data-swapy-slot="baz"
        >
          <div
            className="bg-mat-top z-50 rounded border p-4"
            data-swapy-item="c"
          >
            123
          </div>
        </div>
      </div>
    </div>
  );
}

[james-william-r]

@TahaSh I'll sort out a tidier NextJS example (sometime next week) and whack it in a pull request if you'd like?

[bryanjtc]

@TahaSh I'll sort out a tidier NextJS example (sometime next week) and whack it in a pull request if you'd like?

Sure it would be nice

[TahaSh]

@james-william-r That sounds great! Thank you! 🙏