Getting Started with Three
yarn add three @react-three/fiber @react-three/drei maath framer-motionSwitch 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);
}
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent