next-component-playground

[component].js

// src/pages/play/[component].js

import dynamic from "next/dynamic";
import { useRouter } from "next/router";

const Play = () => {
  const router = useRouter();
  const { component } = router.query;
  const DynamicComponent = dynamic(
    () => import(`../../components/${component}`),
    {
      ssr: false,
    }
  );
  return <DynamicComponent />;
};

export default Play;

README.md

Create a quick Component Playground in your next project.

box.js

// src/components/box.js

const Box = (props) => <div>One & Only Box Component</div>;

export default Box;