Getting started with Bryntum TaskBoard in Next.js

This quick start guide will show you how to build a basic Bryntum TaskBoard in a Next.js TypeScript application using the Next.js getting started guide as a starting point.

You can also take a shortcut and start with our Bryntum TaskBoard Next.js with TypeScript starter template that we will create in this guide.

Requirements

Next.js version 15 requires Node.js 18.18 or higher. Bryntum TaskBoard requires React 16.0.0 or higher and TypeScript 3.6.0 or higher for applications written in TypeScript.

Version requirements

Minimum supported:

• React: 16.0.0 or higher
• TypeScript: 3.6.0 or higher (for TypeScript application)
• Vite 4.0.0 or higher (for application build with Vite)

Recommended:

• React: 18.0.0 or higher
• TypeScript: 4.0.0 or higher (for TypeScript application)
• Vite 5.0.0 or higher (for application build with Vite)

Getting started

To get started, we'll follow these steps to create a basic Bryntum TaskBoard Next.js app:

1. Setup a Next.js application.
2. Install the Bryntum TaskBoard component.
3. Create a Bryntum TaskBoard component.
4. Run the application.

The basic Bryntum TaskBoard starter template that we'll build will look like this:

Setup a Next.js application

We will use the Next.js getting started guide to create a Next.js application. Next.js recommends using create-next-app to create a new Next.js app as it sets everything up for you, automatically. Create a Next.js application by running the following command:

npx create-next-app@latest

You'll see multiple prompts. To follow along with this guide, choose the following options:

What is your project named? bryntum-taskboard
Would you like to use TypeScript? No / Yes ✔️
Would you like to use ESLint? No / Yes ✔️
Would you like to use Tailwind CSS? No ✔️ / Yes
Would you like to use `src/` directory? No ✔️ / Yes 
Would you like to use App Router? (recommended) No / Yes ✔️
Would you like to use Turbopack for `next dev`? No ✔️ / Yes
Would you like to customize the default import alias (@/*)? No ✔️ / Yes

After you've selected your answers for the prompt questions, create-next-app will create a folder with your project name and install the dependencies.

Change your current working directory to the new Next.js project directory:

cd bryntum-taskboard

Install the Bryntum TaskBoard component

Installing the Bryntum TaskBoard component using npm is the quickest way to use our products. You can try out Bryntum components for free using our public Bryntum trial packages. If you have a Bryntum license, please refer to our Npm Repository Guide to access the private Bryntum repository.

From your terminal, update project dependencies using the following commands:

npm install @bryntum/taskboard@npm:@bryntum/taskboard-trial@7.3.0 @bryntum/taskboard-react@7.3.0

npm install @bryntum/taskboard@7.3.0 @bryntum/taskboard-react@7.3.0

Dependencies

The application configuration may add a caret ^ as a prefix of the dependencies version in your package.json file. We recommend removing the caret character as a version prefix so that you have full control over package updates.

Create a Bryntum TaskBoard component

Create a config file called taskboardConfig.ts in the app/ folder. Add the following lines of code to it:

import { BryntumTaskBoardProps } from '@bryntum/taskboard-react';

export const taskboardProps: BryntumTaskBoardProps = {

    columns : [
        { id : 'todo', text : 'Todo', color : 'orange' },
        { id : 'doing', text : 'Doing', color : 'blue', tooltip : 'Items that are currently in progress' },
        { id : 'done', text : 'Done' }
    ],

    // Field used to pair a task to a column
    columnField : 'status',

    project : {
        transport : {
            load : {
                url : 'data.json'
            }
        },
        autoLoad : true
    }

};

Create a file called TaskBoard.tsx in the app/components/ folder. Add the following lines of code to it:

"use client";

import { BryntumTaskBoard } from "@bryntum/taskboard-react";
import { useEffect, useRef } from "react";

export default function TaskBoard({ ...props }) {
  const taskboardRef = useRef<BryntumTaskBoard>(null);

  useEffect(() => {
    // Bryntum TaskBoard instance
    const taskboard = taskboardRef?.current?.instance;
  }, []);

  return <BryntumTaskBoard {...props} ref={taskboardRef} />;
}

The TaskBoard component is a React client component as it uses the "use client" directive at the top of the file.

The code in the useEffect hook setup function shows you how to access the Bryntum TaskBoard instance.

Add component data

Create a public/data/data.json file for example data and add the following JSON data to it:

{
  "success": true,
  "tasks": {
    "rows": [
      { "id": 1, "name": "Design landing page", "status": "doing", "description": "Creating layout for the new landing page" },
      { "id": 2, "name": "Set up database schema", "status": "todo",  "description": "Define tables and relationships for user data" },
      { "id": 3, "name": "Write API documentation", "status": "done",  "description": "Document the REST endpoints for the project" },
      { "id": 4, "name": "Create login screen", "status": "doing", "description": "Implement authentication UI with validation" },
      { "id": 5, "name": "Integrate payment gateway", "status": "todo",  "description": "Connect Stripe API to the backend" },
      { "id": 6, "name": "Fix navigation bugs", "status": "done",  "description": "Resolve reported issues with navbar links" },
      { "id": 7, "name": "Build notification system", "status": "doing", "description": "Real-time push notifications for events" },
      { "id": 8, "name": "Add unit tests", "status": "todo",  "description": "Write tests for services and components" },
      { "id": 9, "name": "Optimize image loading", "status": "done",  "description": "Implement lazy loading for large images" },
      { "id": 10, "name": "Deploy staging server", "status": "doing", "description": "Set up CI/CD pipeline for staging environment" },
      { "id": 11, "name": "Create user profile page", "status": "todo",  "description": "Design and implement profile management UI" },
      { "id": 12, "name": "Implement role-based access control", "status": "todo",  "description": "Restrict features based on user roles" },
      { "id": 13, "name": "Set up error logging", "status": "todo",  "description": "Integrate centralized error monitoring tool" },
      { "id": 14, "name": "Improve form validation", "status": "todo",  "description": "Enhance validation rules for all forms" },
      { "id": 15, "name": "Add search functionality", "status": "todo",  "description": "Implement search bar with filtering options" }
    ]
  },
  "resources": {
    "rows": [
      { "id": 1, "name": "Angelo"  },
      { "id": 2, "name": "Celia"   },
      { "id": 3, "name": "Dave"    },
      { "id": 4, "name": "Emilia"  },
      { "id": 5, "name": "Gloria"  },
      { "id": 6, "name": "Henrik"  },
      { "id": 7, "name": "Kate"    }
    ]
  },
  "assignments": {
    "rows": [
      { "id": 1, "event": 1, "resource": 1 },
      { "id": 2, "event": 2, "resource": 2 },
      { "id": 3, "event": 3, "resource": 3 },
      { "id": 4, "event": 4, "resource": 4 },
      { "id": 5, "event": 5, "resource": 5 },
      { "id": 6, "event": 6, "resource": 6 },
      { "id": 7, "event": 7, "resource": 7 },
      { "id": 8, "event": 8, "resource": 1 },
      { "id": 9, "event": 9, "resource": 2 },
      { "id": 10, "event": 10, "resource": 3 },
      { "id": 11, "event": 11, "resource": 4 },
      { "id": 12, "event": 12, "resource": 5 },
      { "id": 13, "event": 1, "resource": 5 },
      { "id": 14, "event": 2, "resource": 5 },
      { "id": 15, "event": 3, "resource": 5 },
      { "id": 16, "event": 4, "resource": 5 },
      { "id": 17, "event": 6, "resource": 5 },
      { "id": 18, "event": 7, "resource": 5 }
    ]
  }
}

We need to create a wrapper component for the Bryntum TaskBoard React component to render on the client only. In the components folder, create a file called TaskBoardWrapper.tsx and add the following lines of code to it:

'use client';

import dynamic from "next/dynamic";
import { taskboardProps } from "../taskboardConfig";

const TaskBoard = dynamic(() => import("./TaskBoard"), {
  ssr: false,
  loading: () => {
    return (
      <div
        style={{
          display        : "flex",
          alignItems     : "center",
          justifyContent : "center",
          height         : "100vh",
        }}
      >
        <p>Loading...</p>
      </div>
    );
  },
});

const TaskBoardWrapper = () => {
    return <TaskBoard {...taskboardProps} />
};
export { TaskBoardWrapper };

The Bryntum TaskBoard React component is dynamically imported with server-side rendering (ssr) set to false. This is done to prevent the Bryntum TaskBoard React client component from being pre-rendered on the server as Bryntum components are client-side only.

Next, replace the code in the app/page.tsx file with the following lines of code:

import { TaskBoardWrapper } from "@/app/components/TaskBoardWrapper";
/* FontAwesome is used for icons */
import "@bryntum/taskboard/fontawesome/css/fontawesome.css";
import "@bryntum/taskboard/fontawesome/css/solid.css";
/* Importing TaskBoard's structural CSS and a theme */
import "@bryntum/taskboard/taskboard.css";
import "@bryntum/taskboard/svalbard-light.css";
import styles from "./page.module.css";

export default function Home() {
  return (
    <main className={styles.main}>
      <TaskBoardWrapper />
    </main>
  );
}

We imported the CSS styles for the Bryntum TaskBoard Svalbard Light theme, which is one of five available themes.

Styling

To style the Bryntum TaskBoard so that it takes up the whole page, replace the styles in the app/globals.css file with the following styles:

body,
html {
  margin: 0;
  display: flex;
  flex-direction: column;
  height: 100vh;
  font-family: Poppins, "Open Sans", Helvetica, Arial, sans-serif;
  font-size: 14px;
}

Create src/app/page.module.css file with the following style for the <main> HTML tag:

.main {
  height: 100%;
}

If you want to customize the default theme, you can replace the stockholm.css with the sass version. Visit Creating a custom theme section for more info.

You can learn more about styling your Bryntum TaskBoard in our style guide.

Using ref outside TaskBoard Component

To access the Bryntum TaskBoard instance outside of TaskBoard.tsx, you can use React’s useRef hook. Typically, you would use forwardRef; however, in this case, the TaskBoard component is lazy-loaded, so the ref needs to be passed as a regular prop. To implement this, make the TaskBoardWrapper.tsx a client component, create a ref in the TaskBoardWrapper function and pass it as a prop to the TaskBoard:

"use client"; // make it a client component

import { useEffect, useRef } from "react";
import { BryntumTaskBoard } from "@bryntum/taskboard-react";

const TaskBoardWrapper = () => {
  const taskboardRef = useRef<BryntumTaskBoard>(null);

  useEffect(() => {
    // For testing purposes, since TaskBoard is lazy loaded, taskboardRef is null initially
    setTimeout(() => {
      console.log(taskboardRef);
    }, 2000);
  });

  return <TaskBoard taskboardRef={taskboardRef} {...taskboardProps} />;
};

In TaskBoard.tsx, define the Props type:

type Props = {
  taskboardRef: React.Ref<BryntumTaskBoard>;
} & BryntumTaskBoardProps;

Next, pass and apply the taskboardRef within the TaskBoard function and remove any existing ref used for BryntumTaskBoard.

export default function TaskBoard({ taskboardRef, ...props }: Props) {
  return (
    <BryntumTaskBoard
      {...props}
      ref={taskboardRef}
      // additional config
    />
  );
}

TaskBoard can now be accessed from TaskBoard, letting you access TaskBoard's events and configs.

Run the application

Run the local development server:

npm run dev

You'll see the Bryntum TaskBoard app at the URL http://localhost:3000.