Getting Started with Three

yarn add three @react-three/fiber @react-three/drei maath framer-motion

Switch between tabs

function generateTab(currentTab: string) {
  switch (currentTab) {
    case 'colorpicker':
      return <ColorPicker />;
    case 'filepicker':
      return <FilePicker />;
    case 'aipicker':
      return <AiPicker />;
    default:
      null;
  }
}

export default function LeftSideTab() {
  const currentTab = useSelector((state: RootState) => state.editor.currentTab);

  return (
    <>
      <div>{generateTab(currentTab)}</div>
    </>
  );
}

Next 13 / NextJS / API Routes

GET

export async function GET() {
  return new Response('Hi man');
}

POST

export async function POST(req: Request) {
  return Response.json({ msg: 'Alhamdulillah' });
}

Or for type safety use

export async function POST(req: Request) {
  return NextResponse.json({ msg: 'Alhamdulillah' });
}

Handling body

export async function POST(req: Request) {
  // await is must
  const res = await req.json();
  return NextResponse.json(res);
}