Gantt Chart with Next js 13
Hi
below, the project I've tried to test ( with mongo db as database) using prisma
https://github.com/ab77-oss/gantt-next13.git
The issues:
- in the file ./components/BryntumGantt:
In next js 13
we got this error : Parsing error: '>' expected.eslint
but in next 12, it works fine
- we've faced also an issue with the dynamic import in the page file ( app directory equivalent of pages/index in next js 12)
const GanttDynamic = dynamic(() => import("./components/Gantt"), {
No problem with the backend files api/gantt/route.ts and helpers.helpers.ts except the type of data in gantt/route ( line 90 in the POST function)
"use client"
import { useRef, LegacyRef } from "react";
import Head from "next/head";
import dynamic from "next/dynamic";
import { BryntumGantt } from "@bryntum/gantt-react";
const GanttDynamic = dynamic(() => import("./components/Gantt"), {
ssr: false,
loading: () => {
return (
<div
style={{
display: "flex",
alignItems: "center",
justifyContent: "center",
height: "100vh",
}}
>
<p>Loading...</p>
</div>
);
},
});
export default function BryntumGanttPage() {
const ganttRef = useRef() as LegacyRef<BryntumGantt> | undefined;
return (
<>
<Head>
<title>Bryntum Gantt using Next.js</title>
<meta name="description" content="Bryntum Gantt using Next.js" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="icon" href="/favicon.ico" />
</Head>
<GanttDynamic ganttRef={ganttRef} />
</>
);
}
/bryntum-gantt/app/components/Gantt.ts
import { LegacyRef } from "react";
import { ganttConfig } from "../../ganttConfig";
import { BryntumGantt } from "@bryntum/gantt-react";
type Props = {
ganttRef: LegacyRef<BryntumGantt> | undefined;
};
export default function Gantt({ ganttRef }: Props) {
return <BryntumGantt ref={ganttRef} {...ganttConfig} />;
}