When we rebuilt the Digidrop website, we wanted a stack that was fast, maintainable, and integrated with the tools we already use. The result combines Next.js for the front end, Drupal for our support system, and Slack for real-time chatbot and agent workflows. Here's how it all fits together.
Next.js: The Front End and API Layer
The site is built with Next.js and the App Router. We use server components for most pages—blog posts, services, and static content—so the initial HTML is rendered on the server and we get fast load times and good SEO. Client components power interactive pieces like the chatbot, navigation, and forms.
Next.js API routes handle the glue between the front end and our backend services. The chatbot matches user messages to services and either redirects users to the right page or creates a ticket. Form submissions and chatbot enquiries are forwarded to our Drupal support system, keeping API keys and sensitive logic on the server.
Drupal: Our Support System
Tickets and contacts are created in our support system built in Drupal. When a user submits their details—whether through the main contact form or the chatbot—we create a ticket via the Drupal API. That gives us a single place to track, assign, and respond to enquiries.
Drupal's flexibility lets us define ticket types, priorities, and workflows. The API is secured with an organisation-level API key, so only our Next.js app can create tickets. All enquiry data—name, email, question, and context—is stored in Drupal, making it easy for the team to follow up.
Slack: Chatbot Notifications and Live Agent Chat
Slack is wired in two ways: notifications and live chat.
Notifications
Whenever the chatbot creates a ticket or a user submits an enquiry, we send a notification to Slack so the team sees new enquiries in Slack immediately.
Live Agent Chat
During UK business hours, users can choose "Speak to agent" in the chatbot. That starts a live chat session: the user's messages are posted to a Slack channel as a new thread, and when an agent replies in that thread, the reply is pushed back to the website. The agent's reply is then shown in the chat widget. The result is a seamless handoff from bot to human without leaving the page.
The Flow in Practice
- User asks a question → The chatbot matches keywords and either redirects, lists services, or prompts for contact details.
- User submits enquiry → Ticket created in Drupal, Slack webhook fires, user sees confirmation.
- User chooses "Speak to agent" → New thread in Slack, messages flow both ways via Slack and back to the site.
- Agent replies in Slack → Agent reply appears in the chat widget.
Why This Stack Works
Next.js gives us a modern, fast front end and a clean API layer. Drupal gives us a robust support system we already know and trust. Slack gives us visibility and real-time agent chat without building a custom chat infrastructure. Together, they form a decoupled architecture where each piece does what it does best—and we can evolve or replace parts without rewriting the whole system.
Extending with Drupal or Strapi
Right now, the blog and most content live in the Next.js codebase. When we need to pull content from a headless CMS—whether Drupal or Strapi—integrating the site is straightforward. Next.js is built for this: we'd add data fetching in server components or API routes, map the CMS response to our existing content structure, and the front end stays the same. Drupal's REST or GraphQL API and Strapi's auto-generated endpoints both work well with Next.js. We've done it many times for clients, so when the time comes, we can switch or add a CMS without a rewrite.
If you're planning a similar setup—headless front end, Drupal or another CMS for data, and Slack or similar for team workflows—get in touch. We'd be happy to share more about our approach or help you design your own.